一、Vue 简介和环境搭建
一、Vue 是什么
Vue 是一套用于动态构建用户界面的渐进式 JavaScript 框架。
渐进式：Vue 可以自底向上逐层的应用。
简单应用：只需一个轻量小巧的核心库
复杂应用：可以引入各式各样的 Vue 插件
开发者：尤雨溪
后起之秀，生态完善，已然成为国内前端工程师必备技能。
二、Vue 的特点
- 采用组件化模式，提高代码复用率且让代码更好维护
- 声明式编码，让编码人员无需直接操作DOM，提高开发效率
- 使用虚拟DOM+优秀的 Diff 算法，尽量复用DOM节点
三、环境搭建
简单来说直接下载并用<script>标签引入就可以了，Vue 会被注册为一个全局变量，具体使用过程可以参考官方文档：安装 — Vue.js。
四、小结
学习 Vue 前要尽可能掌握的 JavaScript 知识：
- ES6语法规范
- ES6模块化
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise
通过代码初识Vue：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初识Vue</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
初识Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3.root容器里的代码被称为【Vue模板】；
4.Vue实例和容器是一一对应的；
5.真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js 表达式 和 js 代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? 'a' : 'b'
2.js 代码(语句)
(1). if(){}
(2). for(){}
-->
<!-- 容器 -->
<div id="root">
<!-- 插值语法 -->
<h1>Hi,{{name.toUpperCase()}},{{film}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
// 创建Vue实例
new Vue({
// el:document.getElementByID('root')
el: '#root', // el 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data: { // data 中用于存储数据，数据提供el所指定的容器去使用，值我们暂时先写成一个对象
name: 'Tom',
film: '猫和老鼠'
}
})
// axios({
// el: '#root'
// })
</script>
</body>
</html>二、数据绑定和数据代理
一、模板语法
1、插值语法（双大括号表达式）
用于解析标签体内容。
语法：{{xxx}} ，xxxx 会作为 js 表达式解析，且可以直接读取到 data 中的所有属性。
2、指令语法（以 v- 开头）
用于解析标签（包括：标签属性、标签体内容、绑定事件等）。
例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx 会作为 js 表达式被解析，且可以直接读取到 data 中的所有属性。
二、数据绑定
1、单向数据绑定
语法：v-bind:href ="xxx" 或简写为 :href
特点：数据只能从 data 流向页面
2、双向数据绑定
语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data；通常都是应用在表单类元素上（如：<input>、<select>、<textarea>等）；v-model:value 可以简写为 v-model，因为 v-model 默认收集的就是 value 值。
三、el 与 data 的两种写法
1、el 的两种写法
- new Vue 时配置 el 属性
- 先创建 Vue 实例，再通过 vm.$mount('#root') 指定 el 的值
2、data 的两种写法
- 对象式
- 函数式
学习到组件时，data必须使用函数式，否则会报错。
注意：由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。
四、MVVM模型
- M：模型(Model) ：data 中的数据
- V：视图(View) ：模板代码
- VM：视图模型(ViewModel)：Vue 实例
小结：data 中所有的属性，最后都出现在了vm 身上，vm 身上所有的属性 及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。
五、数据代理
通过一个对象代理对另一个对象中属性的操作（读/写）。
Vue 中的数据代理：
通过 vm 对象来代理 data 对象中属性的操作（读/写）。
好处：更加方便的操作 data 中的数据
基本原理：
- 通过Object.defineProperty()把 data 对象中所有属性添加到 vm 上
- 为每一个添加到 vm 上的属性，都指定一个 getter/setter
- 在 getter/setter 内部去操作（读/写）data 中对应的属性
三、事件处理
一、事件的基本使用
- 使用 v-on:xxx 或 @xxx 绑定事件，其中 xxx 是事件名
- 事件的回调需要配置在 methods 对象中，最终会在 vm 上
- methods 中配置的函数，不要用箭头函数，否则 this 就不是 vm 了
- methods 中配置的函数，都是被 Vue 所管理的函数，this的指向是 vm 或 组件实例对象
- @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参
事件修饰符：
| 事件修饰符 | 说明 |
|---|---|
| prevent | 阻止事件的默认行为（常用）event.preventDefault() |
| stop | 阻止事件冒泡（常用）event.stopPropagation() |
| once | 事件只触发一次（常用） |
| capture | 使用事件的捕获模式 |
| self | 只有 event.target 是当前操作的元素时才触发事件 |
| passive | 事件的默认行为立即执行，无需等待事件回调执行完毕 |
二、键盘事件
1、Vue 中常用的按键别名
| 按键 | 按键别名 |
|---|---|
| 回车 | enter |
| 删除 | delete (捕获“删除”和“退格”键) |
| 退出 | esc |
| 空格 | space |
| 换行 | tab (特殊，必须配合keydown去使用) |
| 上、下、左、右 | up、down、left、right |
注意：
- Vue 未提供别名的按键，可以使用按键原始的 key 值去绑定，但注意要转为 kebab-case（短横线命名）
- Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
- （不推荐）使用 keyCode 去指定具体的按键
系统修饰键（用法特殊）：ctrl、alt、shift、meta
配合 keyup 使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
配合 keydown 使用：正常触发事件
四、计算属性和监视属性
一、计算属性-computed
1、定义
- 要显示的数据不存在，要通过计算得来
- 在 computed 对象中定义计算属性
- 在页面中使用{{方法名}}来显示计算的结果
2、原理
底层借助了 Objcet.defineproperty 方法提供的 getter 和 setter。
3、get 函数的执行机制
- 初次读取时会执行一次
- 当依赖的数据发生改变时会被再次调用
4、优势
与 methods 实现相比，内部有缓存机制（复用），效率更高，调试方便。
注意：计算属性最终会出现在 vm 上，直接读取使用即可；如果计算属性要被修改，那必须写 set 函数去响应修改，且 set 中要引起计算时依赖的数据发生改变。
二、监视属性-watch
1、定义
- 通过 vm 对象的$watch()或 watch 配置来监视指定的属性
- 当属性变化时，回调函数自动调用，在函数内部进行计算
注意：监视的属性必须存在，才能进行监视。
2、监视的两种写法
- new Vue 时传入 watch 配置
- 通过 vm.$watch 监视
3、深度监视
- Vue 中的 watch 默认不监测对象内部值的改变（一层）
- 配置 deep:true 可以监测对象内部值改变（多层）
注意：Vue 自身可以监测对象内部值的改变，但 Vue 提供的 watch 默认不可以；使用 watch 时根据数据的具体结构，决定是否采用深度监视。
三、computed 和 watch 之间的区别
computed 能完成的功能，watch 都可以完成；但 watch 能完成的功能，computed 不一定能完成，例：watch 可以进行异步操作。
两个重要的小原则：
- 所有被 Vue 管理的函数，最好写成普通函数，这样 this 的指向才是 vm 或 组件实例对象
- 所有不被 Vue 所管理的函数（定时器的回调函数、ajax 的回调函数等、Promise 的回调函数），最好写成箭头函数，这样 this 的指向才是 vm 或 组件实例对象
五、绑定样式和渲染
一、class 与 style 绑定
理解：在应用界面中，某个(些)元素的样式是变化的，class/style 绑定就是专门用来实现动态样式效果的技术。
1、class 绑定
语法：
:class='xxx'其中 xxx 可以是字符串、对象、数组：
- 表达式是字符串: 'classA'
适用于：类名不确定，要动态获取
- 表达式是对象: {classA:isA, classB: isB}
适用于：要绑定多个样式，个数不确定，名字也不确定
- 表达式是数组: ['classA', 'classB']
适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用
2、style 绑定
语法：
:style="{ color: activeColor, fontSize: fontSize + 'px' }"其中 activeColor/fontSize 是 data 属性，例：
- :style="{fontSize: xxx}"，其中 xxx 是动态值
- :style="[a,b]"其中 a、b 是样式对象
二、条件渲染
1、v-if 与 v-else
语法：
v-if="表达式"
v-else-if="表达式"
v-else="表达式" 适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if 可以和 v-else-if、v-else 一起使用，但要求结构不能被“打断”。
2、v-show
语法：
v-show="表达式" 适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。
注意：使用 v-if 的时，元素可能无法获取到，而使用 v-show 一定可以获取到。
比较 v-if 与 v-show：如果需要频繁切换 v-show 较好；当条件不成立时，v-if 的所有子节点不会解析(项目中使用)。
三、列表渲染
1、v-for 指令：用于展示列表数据；
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
语法：
v-for="(item, index) in/of xxx" :key="yyy"2、key 的原理
面试题：react、vue 中的 key 有什么作用？（key 的内部原理）
1.虚拟DOM中 key 的作用：
key 是虚拟DOM对象的标识，当数据发生变化时，Vue 会根据【新数据】生成【新的虚拟DOM】，随后 Vue 进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下。
2.对比规则
- 旧虚拟DOM中找到了与新虚拟DOM相同的 key
若虚拟DOM中内容没变, 直接使用之前的真实DOM；
若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
- 旧虚拟DOM中未找到与新虚拟DOM相同的 key
创建新的真实DOM，随后渲染到到页面。
3.用 index 作为 key 可能会引发的问题
若对数据进行逆序添加、逆序删除等破坏顺序的操作会产生没有必要的真实DOM更新；界面效果没问题，但效率低。
如果结构中还包含输入类的DOM会产生错误DOM更新；界面有问题。
4.开发中如何选择 key
最好使用每条数据的唯一标识作为 key，比如 id、手机号、身份证号、学号等唯一值；如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用 index 作为 key 是没有问题的。
六、监视数据、表单和过滤器
一、Vue 监视数据
原理：vue 会监视 data 中所有层次的数据。
1、如何监测对象中的数据
通过 setter 实现监视，且要在 new Vue 时就传入要监测的数据；
对象中后追加的属性，Vue 默认不做响应式处理；如需给后添加的属性做响应式，需使用如下API：
Vue.set(target，propertyName/index，value) 或
vm.$set(target，propertyName/index，value)
2、如何监测数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了以下两件事：
1.调用原生对应的方法对数组进行更新
2.重新解析模板，进而更新页面
注意：在 Vue 修改数组中的某个元素一定要用如下方法：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
Vue.set() 或 vm.$set()
Vue.set() 和 vm.$set() 不能给 vm 或 vm 的根数据对象添加属性。
二、收集表单数据
- 若：<input type="text"/>，则 v-model 收集的是 value 值，用户输入的就是 value 值；
- 若：<input type="radio"/>，则 v-model 收集的是 value 值，且要给标签配置 value 值；
- 若：<input type="checkbox"/>
没有配置 input 的 value 属性，那么收集的就是 checked（勾选 or 未勾选，是布尔值）；
配置了 input 的 value 属性时：
v-model 的初始值是非数组，那么收集的就是 checked（勾选 or 未勾选，是布尔值）；
v-model 的初始值是数组，那么收集的的就是 value 组成的数组。
v-model 的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤
三、过滤器
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
注册过滤器：
Vue.filter(name,callback) 或 new Vue{filters:{}}使用过滤器：
{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"注意：过滤器也可以接收额外参数、多个过滤器也可以串联；并没有改变原本的数据，是产生新的对应的数据。
七、指令和生命周期
一、常用内置指令
1、v-text：更新元素的 textContent，即向其所在的节点中渲染文本内容。
与插值语法的区别：v-text 会替换掉节点中的内容，{{xx}}则不会。
2、v-html：更新元素的 innerHTML，即向指定节点中渲染包含 html 结构的内容。
与插值语法的区别：v-html 会替换掉节点中所有的内容，{{xx}}则不会；v-html 可以识别 html 结构。
注意：v-html 有安全性问题，在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击；一定要在可信的内容上使用 v-html，永远不要用在用户提交的内容上。
3、v-cloak（没有值）：防止闪现，与 css 配合: [v-cloak] { display: none }。
本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性。使用 css 配合 v-cloak 可以解决网速慢时页面展示出{{xxx}}的问题。
4、v-once：v-once 所在节点在初次动态渲染后，就视为静态内容了；以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能。
5、v-pre：跳过其所在节点的编译过程；可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
| 常用内置指令 | 说明 |
|---|---|
| v-if | 条件渲染（动态控制节点是否存存在） 如果为 true, 当前标签才会输出到页面 |
| v-else | 条件渲染（动态控制节点是否存存在） 如果为 false, 当前标签才会输出到页面 |
| v-show | 条件渲染 (动态控制节点是否展示) 通过控制 display 样式来控制显示/隐藏 |
| v-for | 遍历数组/对象/字符串 |
| v-on | 绑定事件监听，一般简写为@ |
| v-bind | 单向绑定解析表达式，可以省略 v-bind，简写为 :xxx |
| v-model | 双向数据绑定 |
二、自定义指令
语法：
局部指令：
new Vue({
directives:{指令名:配置对象}
})
new Vue({
directives{指令名:回调函数}
})全局指令：
Vue.directive(指令名,配置对象)
Vue.directive(指令名,回调函数)配置对象中常用的3个回调：
| 配置对象中的回调 | 说明 |
|---|---|
| bind | 指令与元素成功绑定时调用 |
| inserted | 指令所在元素被插入页面时调用 |
| update | 指令所在模板结构被重新解析时调用 |
注意：指令定义时不加 v-，但使用时要加 v-；指令名如果是多个单词，要使用 kebab-case 命名方式，不要用 camelCase 命名。
三、生命周期
1、简介
生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。它是 Vue 在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的；生命周期函数中的 this 指向是 vm 或 组件实例对象。
生命周期图示
2、常用的生命周期方法（钩子）
1.mounted()
发送 ajax 请求、启动定时器、绑定自定义事件、订阅消息等初始化操作（异步任务）。
2.beforeDestroy()
做收尾工作，如: 清除定时器、解绑自定义事件、取消订阅消息等。
关于销毁 Vue 实例：
- 销毁后借助 Vue 开发者工具看不到任何信息
- 销毁后自定义事件会失效，但原生DOM事件依然有效
- 一般不会在 beforeDestroy 操作数据，因为即便操作数据，也不会再触发更新流程
参考博客：Vue学习笔记