VUE基础篇

# Vue入门一 #### 一、环境搭建 1. 对于中国大陆用户，建议将 npm 源设置为[国内的镜像](https://npm.taobao.org/)，可以大幅提升安装速度。 ```vue npm install -g cnpm --registry=https://registry.npm.taobao.org ``` 2. npm最新稳定版安装 ```vue cnpm install vue ``` 3. 命令行工具(CLI)安装 ```vue cnpm install -g vue-cli ``` **注意：新版本Vue CLI3安装方法不同** #### 二、关于旧版本 1. Vue CLI 的包名称由 `vue-cli` 改成了 `@vue/cli`。 如果你已经全局安装了旧版本的 `vue-cli`(1.x 或 2.x)，你需要先通过 下面命令进行卸载后安装。 ```vue npm uninstall vue-cli -g ``` 或者 ```vue yarn global remove vue-cli ``` 2. 可以使用下列任一命令安装这个新的包 ```vue npm install -g @vue/cli ``` 或者 ```vue yarn global add @vue/cli ``` 3. 安装之后，你就可以在命令行中访问 `vue` 命令。你可以通过简单运行 `vue`，看看是否展示出了一份所有可用命令的帮助信息，来验证它是否安装成功。 你还可以用这个命令来检查其版本是否正确 (3.x)： ```vue vue --version ``` #### 三、初始化项目 1. 初始化项目 ```vue vue init webpack demo ``` 初始化项目说明： ```vue Project name --项目名称 Project description --项目描述 Author --作者 Install vue-router? No --是否安装router路由 Use ESLint to lint your code? No --是否安装代码格式检测工具 Set up unit tests No --是否安装测试模块 Setup e2e tests with Nightwatch? No --同样是，是否安装测试模块 接下来回车，通过npm进行安装 ``` 2. 进入项目 ```vue cd demo ``` 3. 安装依赖 ```vue cnpm install ``` 4. 启动项目 ```vue npm run dev ``` 5. 打开浏览器输入地址查看是否启动成功 ```vue http://localhost:8080 ``` **注意：只用进行了第一步设置，才能使用淘宝的镜像，才可以使用cnpm，否则还是使用npm命令。** #### 四、项目目录结构  1. 主要文件 ```vue index.html --项目根视图 package.json --配置文件 README.md --说明文件 .postcssrc.js --postcss配置文件 .gitignore --github上传时，忽略的上传文件类型配置 .editorconfig --一些编码配置，可以忽略该文件 .babelrc --ES6的 ``` 2. 主要目录 ```vue static --静态文件目录，项目启动后可以直接访问里面的文件或内容。 src --源码文件 config --配置文件,开发服务器的配置 build --服务器配置文件，webpack配置文件 ``` 3. src目录 ```vue main.js --入口文件 App.vue --单文件主组件 components --子组件 assets --公共资源文件 ``` # Vue入门二 #### 一、项目入口 ```vue main.js --项目入口src目录下 ```  1. main.js文件介绍 ```vue Vue.config.productionTip = false 开发时的配置，可以暂时不用管 ``` 2. 初始化一个VUE实例 ```vue new Vue({ el: '#app', 绑定一个元素，绑定一个叫app的根组件元素,如上图中index.html中的

组件元素。 components: { App }, 把组件注入进来 template: ' ' 模板，指定一个组件app.vue }) ``` #### 引入组件步骤 1. 引入组件 ```vue import App from './App.vue' ``` 2. 加载视图 ```vue template: ' ' ``` 3. 创建一个组件名字，加载视图组件名字和该名字一样。 ```vue components: { App }, ``` #### 二、组件说明 Vue组件包括三部分： 1. template（视图部分） 2. script（逻辑或者数据交互部分） 3. style（样式部分） #### 三、模板语法 ###### {{ }} 文本 (数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：) 渲染出来就是文本，没有任何标签。 ```vue {{mtds}}

{{1+3}}

{{1>0 ? "错的": "对的"}}
```  功能： 1. 可以直接进行运算，可以直接放变量。 2. 不能直接放字符串（除非先声明，可以使中文的）。 3. 可以用三门运算符。 **注意：只能存在单行语句。多行语句如if else这种需要换行写的,不能作用在html属性上。** ###### v-html 原始html 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 `v-html` 指令： ```vue {{mtds}}

mtds: '

v-text与v-html区别

', ```  ###### v-text与v-html v-html：会渲染html代码。 v-text：不会渲染出来。 都可以用来显示。 ###### v-bind 绑定 1. 那个属性是活的，就用v-bind去绑定。 ```vue 您好 ha: 'bianle', ```  ###### v-if 条件渲染 ````vue

我是否能被看见a

我是否能被看见b

show: false, ```` v-if与v-if v-else类似 **注意：同级标签不能嵌套，div除外。** ###### template标签 同级并排使用,承载容器，不会渲染。 ```vue ``` ###### v-show ```vue

show

```  注意：v-show与v-if v-if：条件成立渲染，不成立则不渲染，结构中不能看见。 v-show：无论怎样都会渲染。 切换频繁时使用，v-show，不频繁使用v-if。 ###### v-for 列表渲染 ```vue

• {{item}}{{index}}

datas: ["a","b","c","d","e"], ``` ```vue

• {{user.name}} {{user.age}}{{user.sex}}

users: [ {name:"zhangsan1",age:120,sex:"boy"}, {name:"zhangsan3",age:120,sex:"boy"}, {name:"zhangsan2",age:130,sex:"boy4"} ], ``` **注意：每个列表添加key，不然会出现警告。** #### 四、事件监听 ###### v-on 事件监听 ```vue 事件

{{ num }}

num: 1 ``` ###### methods 所有被调用的方法都放在这里面。 ```vue 事件2 methods: { show() { alert("我是methods中执行的方法事件") } } ``` **注意：调用方法是，不加括号，加括号表示，一打开就执行调用方法。** ###### this ```vue 事件3 change() { this.flag = ! this.flag; } ``` 可以用this来索引当前data中的数据。 **指向，当前的组建VueComponent**  向事件传递参数 #### 五、如何使用一个新组建 1. 组建导出可被外部访问 ```vue export default { data() { return { users: ["zhangsan","lisi","wangwu'"] } } } ``` ​ data:初始化数据 2. 在需要的组建中导入该组建 ```vue import Events from './components/Events' ``` 3. 绑定该组建 ```vue components: { Events } ``` 4. 使用组建 ```vue ``` 完整代码(Events.vue定义的新组建，在App.vue中使用该组建)： ```vue ``` #### 六、事件中函数传递参数（事件参数） ```vue

• {{user}}

data() { return { users: ["zhangsan","lisi","wangwu'"] } }, methods: { getUserData(data) { console.log(this.users[data]) } } ``` #### 七、事件默认参数$event ```vue

• {{user}}

methods: { getUserData(data,event) { console.log(this.users[data]); console.log(event); } } ```  **$event:原生js对象** #### 八、事件修饰符 ```vue .stop .prevent .capture .self .once .passive ``` ```vue event.preventDefault() :阻止默认事件，也就是.prevent event.stopPropagation() ：阻止事件冒泡，也就是.stop ``` ```vue

...

...

...

``` 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。 因此，用 `v-on:click.prevent.self` 会阻止**所有的点击**， 而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。 可参考[官网](https://cn.vuejs.org/v2/guide/events.html) #### 九、按钮修饰符 ```vue ``` ```vue 全部的按键别名： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 可以通过全局 config.keyCodes 对象自定义按键修饰符别名： // 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 ``` 可通过keyup事件来查看按钮对应的数字是多少, 如下: k字母对应的数字是75. ```vue getKeyNum (event){ console.log(event); } ```  可参考[官网](https://cn.vuejs.org/v2/guide/events.html) #### 十、数组更新检测 data中的数据改变，会引起视图的改变。 ###### 变异方法 Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： ```vue push() pop() shift() unshift() splice() sort() reverse() ``` 1. push() ```vue 插入数据 export default { data() { return { users: ["zhangsan","lisi","wangwu'"] } }, methods: { getUserData(data,event) { console.log(this.users[data]); console.log(event); }, getKeyNum (event){ console.log(event); }, adddata() { this.users.push("这是添加的数据"); } } } ``` ###### 替换数组 不会引起视图更新 **注意：** **filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：** 可参考[官网](https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95) ###### 显示过滤与排序结果 ```vue nums: [1,2,34,5,6,8,54,31,34,4,2] 显示奇数 getJishu() { this.nums.filter(function(num){ if(num % 2 ==0){ console.log(num); } }); } ``` #### 十一、计算属性与观察者 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。 所以，对于任何复杂逻辑，你都应当使用**计算属性**。 ###### computed()计算属性 与data()同级 ```vue {{msg}}
{{newmsg}} msg: 'abcde' computed: { newmsg(){ return this.msg.split('').reverse().join(''); } } ``` 这样在很多需要翻转的地方直接调用newmsg就可以，不用在每个调用中在单独写翻转了。 ###### 计算属性与methods区别 1. 不同的是**计算属性是基于它们的依赖进行缓存的**。只在相关依赖发生改变时它们才会重新求值。这就意味着只要 msg 还没有发生改变，多次访问 newmsg 计算属性会立即返回之前的计算结果，而不必再次执行函数。 2. methods则每次都会重新执行。 #### 十二、表单输入绑定 ###### v-model:双向数据绑定 ```vue {{msg}}
return { msg: 'test' } ``` ###### watch（） 监听数据 ```vue watch: { msg(data){ console.log(data); } } ``` **注意：watch监听数据必须和data中名字一样。** 多行文本，单选框，复选框都可以使用v-model、watch watch一般在input中使用。 #### 十三、修饰符 ###### .lazy ```vue ``` 在默认情况下，`v-model` 在每次 `input` 事件触发后将输入框的值与数据进行同步 (除了[上述](https://cn.vuejs.org/v2/guide/forms.html#vmodel-ime-tip)输入法组合文字时)。你可以添加 `lazy` 修饰符，从而转变为使用 `change`事件进行同步. ###### .number ```vue ``` 如果想自动将用户的输入值转为数值类型，可以给 `v-model` 添加 `number` 修饰符 ###### .trim ```vue ``` 如果要自动过滤用户输入的首尾空白字符，可以给 `v-model` 添加 `trim` 修饰符 延迟操作,减轻服务器负担。 ```vue ``` #### 十四、Class与Style绑定 ###### 对象语法 绑定单个 ```vue ``` 或者绑定一个对象 ```vue

{{msg}}

styleObj: { active: true, demo: true }, msg: 'test' ``` ###### 数组语法 ```vue msg: 'test', demo1: 'demo11', demo2: 'demo22' {{msg}} ``` ```vue

• {{user.name}}----{{user.age}}-----{{user.sex}}

all: [{name:"zhangsan",age:10,sex: '男'}, {name:"zhaoliu",age:23,sex: '女'}, {name:"wangwu",age:19,sex: '女'}, {name:"lisi",age:12,sex: '男'}] .active{ color: aqua; } ``` 更多绑定可参考[官网](https://cn.vuejs.org/v2/guide/class-and-style.html) ###### 绑定内联样式 对象语法 更多绑定可参考[官网](https://cn.vuejs.org/v2/guide/class-and-style.html) 视图改变是有数据改变的。是有后端数据驱动前段视图的变化。 #### 十五、Props父组件向子组件传值 ###### 单组件由三部分组成： ```vue ``` 1. template: 里面只能存在一个根元素 2. script：必须通过export default导出，外部组件才能访问。 1. name:指定组件名字。 2. data：绑定数据。 3. style：样式 1. scoped：当前样式只在当前组件内生效，局部的。 ###### 子父级组件 一个组件被另一个组件嵌套。 如： app组件里面嵌套hellowolrd组件。 ###### 子父级组件通信 父 --> 子： props 子 --> 父： emit Event 父向子通信： ```vue 父组件： msg: 'son hello' 子组件： props: [ "title" ] {{title}} ``` ###### props数据传递类型验证 ```vue 子组件接受参数时，指定类型。 props: { title: { type: [String,Number], required: true， defalut: 100 } } ``` 1. type:指定接收参数类型，可以有多个类型。 2. required：是否必传。 注意：如果是Number、String可以直接默认一个值，如果是其他类型则默认返回一个方法。 ```vue return { say: { name:"Zhangsan", age:20 } } props: { msg: { type:Object, default:function(){ return { name:"lisi", age:10 } } } } ``` 1. 数据验证 2. 多数据类型验证 3. 必选项验证 4. 默认值 5. obj、arr数据类型的默认值 #### 十六、子向父组件通信 使用v-on自定义事件 ```vue 子组件代码： ``` ```vue 父组件代码： ``` ###### 父组件向子组件传递数据步骤 1. 子组件通过一个事件来触发。 2. 事件中有两个参数，一个key，用来在父组件中作为事件。另一个数据。 3. 父组件使用key作为事件，定义一个事件接受数据 数据交互式同步的。 ###### input所有内容为String，可以通过下面进行转换成数字。 ```vue computed: { getNum(){ return this.newMsg -0; } } ``` #### 十七、插槽与缓存 ###### 使用插槽分发内容 1. 单个插槽 ```vue 父组件： ``` ```vue 子组件： ``` **注意：插槽的样式，可以在父组件中设置，也可以在子组件中设置。** 2. 具名插槽 ```vue {{msg}}

我是插槽2哦

我是插槽，但是我会被父组件插入内容覆盖。

---

``` **注意：当没有传递视图时，可以显示查查默认设置的值。** 3. 作用域插槽（传递参数） ###### 作用于插槽传递数据 ```vue 子组件： 父组件： {{ key.text}} ``` ###### props与slot插槽对比 | 名称 | props | slot | | -------- | ------------------ | ----------------- | | 传递数据 | 父组件 ---> 子组件 | 子组件---> 父组件 | | 数据 | 由父组件决定 | 由子组件决定 | | 视图 | 由子组件决定 | 由父组件决定 | #### 十八、动态组件 ```vue ``` 注意：这样的来回切换，每次都重新渲染了。因此下面介绍了keep-alive ###### ```vue ``` keep-alive:将组建保留在内存中，做到了缓存效果。 注意：什么情况使用keep-alive缓存？ 实时更新不能使用缓存。 #### 十九、过度与动画 ###### 单元素与组建的过渡 自动应用class ```vue ``` ###### 过渡类名 1. `v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 2. `v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 3. `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在过渡/动画完成之后移除。 4. `v-leave`: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 5. `v-leave-active`：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 6. `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在过渡/动画完成之后移除。 ```vue ``` 移动的过渡 ```vue ``` ###### CSS过渡 ```vue ``` 动画可以控制过程，过渡不能。 ###### 使用第三方css 引入外部css方式 1. 直接添加到index.html中。 ```html ``` 所用动画都应该设置为浮动的，不然会出现下拉或滚动条 ```vue position: absolute; ``` ###### SVG 可参考[这里](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/circle) #### 二十、自定义指定 ###### 全局指令 如自定义自动聚焦输入框指定： ```vue main.js中自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } }) ``` 自定义指令的使用： ```vue ``` ###### 局部指令 将自定义指令放在使用的组建中： ```vue ``` #### 二十一、过滤器 如：自动转换首字母为大写： ```vue ```