Vue简介

• 简单应用：只需一个轻量小巧的核心库。

• 复杂应用：可以引入各式各样的Vue插件。

1. 采用组件化模式，提高代码复用率、且让代码更好维护。



.Vue组件包括：.html、.css、.js（.Vue文件相当于把它们三个封装了）

2. 声明式编码，让编码人员无需之间操作DOM，提高开发效率。

3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。





Diff算法会对新的虚拟DOM和旧的虚拟DOM作比较，重复的留着，只添加新的虚拟DOM到真实的DOM上（这是一种优化）。

Vue官网使用

搭建Vue开发环境

1. Vue2官网下载开发版本和生产版本的Vue到本机上。

2. 在Chrome浏览器商城下载并安装Vue开发者调试工具插件。

3. 关闭Chrome浏览器控制台的提示。



注意：如果改了该属性还不行的话，就去到vue.js文件里面找到这个属性手动改成false即可。

Hello小案例

初识Vue：
1. 想要Vue工作，就必须创建一个Vue实例，且要传入一个配置对象。
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
3. root容器里的代码被称为【Vue模板】。Vue模板的作用：容器里的内容->Vue实例解析->解析完再放回容器内。
4. Vue实例和容器是一一对应的。
5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用。
6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新。
 
注意区分：js表达式 和 js代码（语句）
表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
• a
• a+b
• demo(1)
• x === y ? 'a' : 'b'
js代码（语句）
• if(){}
• for(){}
 
Vue模板语法有2大类：
插值语法：
功能：用于解析标签体内容。
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性。
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所以属性。
备注：Vue中有很多的指令，且形式都是：v-????。
 

数据绑定

1. 单向绑定（v-bind）：数据只能从data流向页面。

2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data。

1. 双向绑定一般都应用在表单类元素上（如：input、select等）

2. v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

el与data的两种写法

1. new Vue时候配置el属性。

2. 先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。

1. 对象式。

2. 函数式。（学习到组件时，data必须使用函数式，否则会报错）

理解MVVM

1. M：模型（Model）：data中的数据。

2. V：视图（View）：模板代码。

3. VM：视图模型（ViewModel）：Vue实例。

1. data中所有的属性，最后都出现在了vm身上。

2. vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

Object.defineProperty

理解数据代理

Vue中的数据代理

1. 通过vm对象来代理data对象中属性的操作（读/写）。

1. 更加方便的操作data中的数据。

1. 通过Object.defineProperty()把data对象中所有属性添加到vm上。

2. 为每一个添加到vm上的属性，都指定一个getter/setter。

3. 在getter/setter内部去操作（读/写）data中对应的属性。

事件处理

1. 使用v-on：xxx 或 @xxx 绑定事件，其中xxx是事件名。

2. 事件的回调需要配置在methods对象中，最终会在vm上。

3. methods中配置的函数，不要用箭头函数！否则this就不是vm了（而是window）。

4. methods中配置的函数，都是被Vue所管理的函数，this指向的是vm或组件实例对象。

5. @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参。

事件修饰符

1. prevent：阻止默认事件（常用）。

2. stop：阻止事件冒泡（常用）。

3. once：事件只触发一次（常用）。

4. capture：使用事件的捕获模式。

5. self：只有event.target是当前操作的元素时才触发事件。

6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

键盘事件

1. Vue中常用的按键别名：

按键名	别名	注意
回车	enter	ㅤ
删除	delete	捕获“删除”和“退格”键
退出	sec	ㅤ
空格	space	ㅤ
换行	tab	特殊，必须配合keydown去使用
上	up	ㅤ
下	down	ㅤ
左	left	ㅤ
右	right	ㅤ

2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短杆线命名）。

3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
• 配合keyup使用：按下修饰键的同时，再按下其他按键，随后释放其他键，事件才被触发。
• 配合keydown使用：正常触发事件。

4. 也可以使用keyCode去指定具体的按键（不推荐）。

5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名。

计算属性

1. 定义：要用的属性不存在，要通过已有属性计算得来。

2. 原理：底层借助了Objcet.defineproperty方法提供的getter和setter。

3. get函数什么时候执行？
• 初次读取时会执行一次。
• 当依赖的数据发生改变时会被再次调用。

4. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。

5. 备注：
• 计算属性最终会出现在vm上，直接读取使用即可。
• 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
• 计算属性要写在Vue里面的computed里面

监视属性

1. 当被监视的属性变化时，回调函数自动调用，进行相关操作。

2. 监视的属性必须存在，才能进行监视。

3. 监视的两种方法：
• .new Vue时传入watch配置。
• .通过vm.$watch监视
 

深度监视

1. 深度监视：
• Vue中的watch默认不监视测对象内部值的改变（一层）。
• 配置deep：true可以监视对象内部值改变（多层）。

2. 备注：
• Vue自身可以监测对象内部的改变，但Vue提供的watch默认不可以。
• 使用watch时根据数据的具体结构，决定是否采用深度监视。

监视的简写

watch对比computer

1. computed能完成的功能，watch都可以完成。

2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

1. 所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

2. 所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、promise的回调函数），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

绑定样式

1. class样式：
• 写法：class=”xxx” xxx可以是字符串、对象、数组。
• 字符串写法适用于：类名不确定，要动态获取。
• 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
• 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

2. style样式：

• :style=”{fontSize: xxx}”其中xxx是动态值。

• :style=“[a,b]”其中a、b是样式对象。

条件渲染

1. v-if
写法：
• v-if=“表达式”
• v-else-if=“表达式”
• v-else=“表达式”
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-esle-if、v-else一起使用，但要求结果不能被“打断”。

2. v-show
写法：v-show=”表达式”
适用于：切换频率较高的场景。
特点：不展示的DOM元素未必移除，仅仅是使用样式隐藏掉。

3. 备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

4. template标签配合v-if时候，在条件成立的时候渲染时只渲染template标签里面的内容，不会渲染template标签。

列表渲染

1. 用于展示列表数据。

2. 语法：v-for="(item, index) in xxx" :key="yyy" yyy要求是每个元素唯一的值。

3. 可遍历：数组（常用）、对象、字符串（少用），指定次数（少用）

key作用与原理

1. 虚拟DOM中key的作用：

• key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

1. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
• 若虚拟DOM中内容没变，直接使用之前的真实DOM。
• 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

2. 旧虚拟DOM中未找到与新虚拟DOM相同的key：
• 创建新的真实DOM，随后渲染到页面。

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：
• 会产生没有必要的真实DOM更新→界面效果没问题，但效率低。

2. 如果结构中还包含输入类的DOM：
• 会产生错误DOM更新→界面有问题。

1. 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。

2. 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

总结数据监视

1. vue会监视data中所有层次的数据。

2. 如何监视对象中的数据？
• 通过setter实现监视，且要在new Vue时就传入要监视的数据。
• 对象中后追加的属性，Vue默认是不做响应式处理。
• 如需给后添加的属性做响应式，请使用如下API：
• Vue.set(target, propertyName/index, value)
• vm.$set(target, propertyName/index, value)

3. 如何监视数组中的数据？
• 通过包裹数组更新元素的方法实现，本质就是做了两件事：
• 调用原生对应的方法对数组进行更新。
• 重新解析模板，进行更新页面。

4. 在Vue修改数组中的某个元素一定要用如下方法：
• 使用这些API：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
• Vue.set()或vm.$set()

收集表单数据

• 若：<input type=”text”/>，则v-model收集的是value值，用户输入的就是value值。

• 若：<input type=”radio”/>，则v-model收集的是value值，且要给标签配置value值。

• 若：<input type=”checkbox”/>
1. 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）。
2. 配置input的value属性：
• v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）。
• v-model的初始值是数组，那么收集的就是value组成的数组。

• lazy：失去焦点再收集数据。

• number：输入字符串转为有效的数字。

• trim：输入首尾空格过滤。

过滤器

• 定义：对要显示的数据进行特点格式化后再显示（适用于一些简单逻辑的处理）。

• 语法：
1. 注册过滤器：Vue.filter(name,callback) 或 new Vue({filters:{}})
2. 使用过滤器：{{xxx | 过滤器名}} 或 v-bing:属性 = “xxx | 过滤器名”

• 备注：
1. 过滤器也可以接收额外参数、多个过滤器也可以串联。
2. 并没有改变原本的数据，是产生新的对应的数据。

内置指令

1. 作用：向指定节点中渲染包含html结构的内容。

2. 与插值语法的区别：
• v-html会替换掉节点中所有的内容，{{xxx}}则不会。
• v-html可以识别html结构。

3. 严重注意：v-html有安全性问题
• 在网站上动态渲染任意html是非常危险的，容易导致XSS攻击。
• 一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上。
 

1. 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2. 使用css配合v-clock可以解决网速慢时展示出{{xxx}}的问题。

1. v-once所在的节点在初次动态渲染后，就视为静态内容了。

2. 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

1. 跳过其所在节点的编译过程。

2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

生命周期函数

1. 又名：生命周期回调函数、生命周期函数、生命周期钩子。

2. 生命周期函数是Vue在关键时刻帮我们调用的一些特殊名称函数。

3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4. 生命周期函数中的this指向的是vm或组件实例对象。

1. mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等（初始化操作）。

2. beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等（收尾工作）。

1. 销毁后借助Vue开发者工具看不到任何信息。

2. 销毁后自定义事件会失效，但原生DOM事件依然有效。

3. 一般不会在beforeDestroy操作数据，因为即便操作数据，也不会出发更新流程了。

• 挂载：把Vue实例生成的虚拟DOM转成真实的DOM，放在了页面中，这就是挂载。