![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue相关学习
alice--小文子
正在变厉害的路上~
展开
-
vue项目中实现国际化
vue国际化原创 2022-11-10 09:44:44 · 2001 阅读 · 0 评论 -
基于vite构建的项目+各种集成打造一个服务端渲染项目
vite原创 2022-09-15 09:32:56 · 237 阅读 · 0 评论 -
关于watch中相关使用
watch监听原创 2022-08-11 15:41:57 · 825 阅读 · 0 评论 -
如何将自己封装的组件上传到npm并使用
npm组件原创 2022-08-09 21:50:35 · 1157 阅读 · 0 评论 -
基于Element Plus二次封装的表格组件中添加插槽-实现内容自定义
element表格中具名插槽原创 2022-08-07 15:07:59 · 5177 阅读 · 0 评论 -
搭建vue项目
1 创建项目1 vue init webpack baoge2 vue create dadi创建时根据项目需求选择使用vue2还是vue3原创 2022-02-07 16:51:16 · 340 阅读 · 0 评论 -
在style中使用sass后报错及解决
百度说是sass-loader版本过高,然后指定版本下载:npm install sass-loader@7.3.1 --save-dev然后再下node-sass后对应配置文件中版本如下:但是启动后还是报错,如下图:项目由于安装的node版本不同,安装依赖后导致项目运行失败并有报错问题。首先需要根据自己电脑安装的node版本对照出当前项目需要下载对应版本的node-sass依赖,对照表如下图:...原创 2022-02-07 11:20:40 · 814 阅读 · 0 评论 -
安装sass-loader node-sass失败
npm i -D sass-loader node-sass报如下截图:感觉像是版本原因引起的,最后使用npm i -D sass-loader --legacy-peer-deps,然后两个分开安装成功的原创 2022-02-06 17:55:13 · 502 阅读 · 0 评论 -
vue修饰符
修饰符.lazy在默认情况下,v-model在每次input事件触发后将输入框的值与数据进行同步 。你可以添加lazy修饰符,从而转变为使用change事件进行同步:<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >.number如果想自动将用户的输入值转为数值类型,可以给v-model添加number修饰符<input v-model.number="age"...转载 2022-01-20 10:05:42 · 217 阅读 · 0 评论 -
vue-路由相关
1 需要引入“vue-router”(Vue Router 是Vue.js官方的路由管理器)。2 对应三个名词route:首先它是个单数,译为路由,即我们可以理解为单个路由或者某一个路由;routes:它是个复数,表示多个的集合才能为复数;即我们可以理解为多个路由的集合,JS中表示多种不同状态的集合的形式只有数组和对象两种,事实上官方定义routes是一个数组;所以我们记住了,routes表示多个数组的集合;router:译为路由器,上面都是路由,这个是路由器,我们可以理解为一个容器包含..转载 2021-12-22 19:50:40 · 379 阅读 · 2 评论 -
vue3初实
1 对VUE-CLI要求:必须是最新版本(V4.5.4 以上版本)才有创建 Vue3 的选项2原创 2021-11-23 20:28:55 · 310 阅读 · 0 评论 -
Vue--Vuex详解
1 最普通的方法:(1)封装Vuex,一般会在src文件夹下新建一个名为store的文件夹,在此文件夹下新建一个index.js(新版本的创建项目的时候会自动生成)(2)VueX代码:import Vue from "vue";import VueX from "vuex";Vue.use(VueX);//vuex如何使用:3 声明store对象export default new VueX.Store({ strict:process.env.NODE_EVN != "pro原创 2021-08-11 21:08:17 · 139 阅读 · 0 评论 -
Vue-cli构建项目--常见报错及解决
1http://eslint.org/docs/rules/no-trailing-spaces将这里的true修改成false即可。但是这种方式据说不是太好,待补充,更好的方法。原创 2021-08-09 17:48:43 · 235 阅读 · 0 评论 -
Vue组件-组件通讯详解
1 父组件获取子组件(详细代码见$ref)在父级中添加ref:<Search@search="handleSearch"placeholder="搜索频道"ref="cc"/>使用时:分别为获取子组件的变量及方法:console.log(this.$refs.cc.searchVal)console.log(this.$refs.cc.toParent())2 子组件获取父组件:...原创 2021-08-07 16:02:41 · 140 阅读 · 0 评论 -
Vue组件-$refs
1 父组件:(父组件获取子组件只需要在父组件上加ref即可。)关键代码1:<Search @search="handleSearch" placeholder="搜索频道" ref="cc"/>关键代码2:console.log(this.$refs.cc)详细代码如下:<template> <div> <div class="aside"> <div style="width:100%;原创 2021-08-07 15:53:51 · 163 阅读 · 0 评论 -
Vue组件-<component/>动态加载组件
<component :is="cmp1"/>原创 2021-08-06 14:57:39 · 492 阅读 · 0 评论 -
Vue表单提交
1 在组件中<template> <div> <form ref="form1" @click.prevent="fn_submit()" action="data/sun.php" method="post"> <input type="text" v-modle="a" name="a"/> <input type="text" v-modle="b" name="b"/&g原创 2021-08-06 10:24:40 · 300 阅读 · 0 评论 -
Vue数据通讯(请求数据)
1 用库:axios(1)引入:import Axioa from "axios";(2)在vue实例中:async created (){ let (data) = awaitAxioa.get("./data/user.json"); this.name = data.name;}2 用原生:fetch原创 2021-08-05 17:15:01 · 121 阅读 · 0 评论 -
Vue路由
12 嵌套路由:在需求嵌套路由的路由表中添加children(注意path不能再写绝对路径,必须是相对路径)例如:import VueRouter from 'vue-router';import Header from './components/header';import Home from './components/home';import News, {router as news_router} from './components/news';export de.原创 2021-08-05 16:43:06 · 91 阅读 · 0 评论 -
vue组件生命周期
原创 2021-07-31 15:24:44 · 86 阅读 · 0 评论 -
vue组件-属性及插槽
1 item.vue:<template> <div class="item" :class={active:isActive} @click="handleClick"> <slot></slot> </div></template><script>export default { props:{ isActive:{ type:Boolean,//约束该属性的类型为B原创 2021-07-29 09:43:43 · 272 阅读 · 0 评论 -
vue组件
1 组件都包括什么?模板 script style<template><divclass="item"><div></template><script>exportdefault{//导出组件}</script><style scoped>//scoped表示局部的,范围的item{cursor:pointer;}item:hover{...原创 2021-07-26 13:59:54 · 94 阅读 · 0 评论 -
Vue -v报错问题---[解决方案]无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统中禁止执行脚本
前言 windows环境,安装vue-cli 脚手架。 安装成功,但是执行 vue -V 报错了。报错信息:无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\vue.ps1,因为在此系统中禁止执行脚本原因分析:禁止执行脚本,那就打开权限执行脚本嘛解决方案:打开 powerShell 用管理员身份运行 输入命令: set-ExecutionPolicy RemoteSigned 输入A 再输入 vue -V (搞定).转载 2021-07-25 09:28:15 · 1437 阅读 · 2 评论 -
vue的介绍
1 vue的版本:目前的正式版本是2.X3.X即将上线,对2.X是兼容的,要完全到3.X的优势,还需要学习typescript。2 vue-cli是什么?原创 2021-07-21 13:49:09 · 75 阅读 · 0 评论 -
vue创建项目在Project description (A Vue.js project)时卡的不动解决办法
尝试了好多方法发现还是卡,点什么都没有反映,后来尝试重新安装了下vue-cli好了。具体用到两个命令行:首先:npm install -g @vue/cli,然后此时如果开始创建项目还是不行,根据提示又执行了一个命令行,npm install -g @vue/cli-init,然后再创建项目,发现可以了。...原创 2019-07-12 16:36:19 · 1902 阅读 · 0 评论 -
Vue-动态绑定CSS样式
1 使用v-bind绑定。原创 2019-06-05 09:14:12 · 1111 阅读 · 1 评论 -
Vue计算属性
为什么要使用计算属性:在耗时比较大,例如搜索的时候会使用。举例说明为什么要使用计算属性:具体html片段如下:<div id="app"> <h1>Computed计算属性</h1> <button>Add to A</button> <button>Add t...原创 2019-06-05 09:12:14 · 237 阅读 · 0 评论 -
Vue指令--实时更新
1 v-bind,用于绑定属性,例如:“<a v-bind:href="webName"></a>”其缩写为:bind,例如:“<a :href="webName"></a>”2 v-html,用于添加dom片段,例如:<p v-html="websitTag"></p>其中websitTag的内容为:“<...原创 2019-05-21 14:12:12 · 1218 阅读 · 0 评论 -
Vue实例
el:element 需要获取的元素,一定是html中根容器元素data:用于数据的存储methods:用于存储各种方法原创 2019-05-21 13:55:25 · 226 阅读 · 0 评论 -
Vue会用到的命令行---实时更新
查看node版本:node -v查看npm版本:npm -v查看Vue版本:npm vue -v更新vue-cli:npm install -g @vue/cli查看vue-cli版本:vue -V下载echarts:npm install -g @vue/cli启动项目:npm run serve打包项目:npm run build创建一个vue-cli项目(要...原创 2019-05-21 13:54:46 · 2047 阅读 · 1 评论 -
Vue双向数据绑定
可以实现双向数据绑定的标签有:input、select、textarea。原创 2019-05-24 17:53:47 · 112 阅读 · 0 评论