前言：笔记匹配尚硅谷教学，视频链接为www.bilibili.com/video/BV1Zy…
1.Vue基础知识
1.1 简介(P1～P2)
- Vue是组件化、渐进式、声名式编码的JS框架
- Vue的虚拟DOM与diff算法
1.2 MVVM模型(P10)
- Model:对应data中数据
- View:对应模版
- ViewModel:Vue实例对象，实现数据绑定（从Model到View），实现DOM监听（从View到Model)
1.3 Vue的安装(P4)
- 法一：script标签引入
- 法二：npm引入
1.4 Vue实例对象(P5～P6)
- Vue的引入相当于引入了一个新的构造函数，需要用new来新建实例对象
- 配置对象：
- el：即element，将实例对象与页面中的容器绑定，值一般为css选择器(字符串）
- data：以函数形式（见data的第二种形式）保存数据，数据供el指定的容器所使用，保存在vm._data
- methods：内放方法，方法的this为vm（注意不要使用箭头函数形式）
- computed：计算属性，内保存基于已有的属性计算而得的数据（见1.9）
- watch：监视属性，内可放data与computed中的数据（见1.10）
- filters：过滤器，进行简单的数据处理（复杂的还是用计算属性），本质是函数，可以在模版插值语法或者v-bind中使用（语法是 | ）
- directives：自定义指令（见1.16）
- props：让组件接收外部数据（见2.4）
- mixins：接收各种混入（见2.5）
//代码实例 const vm = new Vue({ el: '#root', data: { word1: 'Hello', word2: 'World' }, methods: { show(event) { console.log(event.target) } }, computed: { sentence: { get() { return this.word1 + this.word2 } } }, watch: { sentence: { handler(newValue, oldValue) { } } }, filters: { firstWord(value){ return value.slice(0,1) } } }) - 实例对象与容器必须是一一对应
1.5 Vue模板语法(P7-P8、P14、P40~P44)
模板：指的是容器中代码
- 插值语法：{{}}，双花括号中放置JS表达式(实例对象以及原型对象身上的属性和方法都可以使用)，用于解析标签体内容
- 内置指令语法：用于解析标签
-
v-bind: 动态制定标签属性，简写为“:”，单向数据绑定（见1.11）
-
v-model: 只应用于表单类元素的value值，实现双向数据绑定，v-model:value可以简写为v-model（见1.15）
表单类元素：input select等 -
v-on：事件处理，简写为“@”，与配置项methods结合使用（更多见1.8）
<!-- 100为传给show事件的参数，$event为占位符表示事件对象 --> <button @click="show(100, $event)">X</button> <!-- 不传参的写法，默认有事件对象 --> <button @click="show">X</button>- v-show与v-if（v-else和v-else-if)：条件渲染（见1.12）
- v-for：列表渲染，写在需要多个显示的标签里（见1.13）
- v-text：向其标签中插入文本（全部解析为文本），会替换标签中所有内容
- v-html：向其标签中插入带结构的内容，存在安全性问题(XSS攻击)
- v-cloak：与css结合使用，o防止未解析（JS阻塞时来不及引入Vue时模版会未解析）的内容呈现在页面上
- v-once：所在节点仅初始化的时候渲染，之后视为静态的内容
- v-pre：所在节点跳过编译，提高效率
-
1.6 el和data的另一种写法(P9)
- el的另一种写法：vm.$mount('#root')
- data的另一种写法：函数式（Vue所管理的函数不能写为箭头函数），返回一个保存数据的对象
//代码实例 const vm = new Vue({ data() { return { word: 'Hello World' } } }) vm.$mount('#root')
1.7 Vue的数据代理(P12～P13)
数据代理：通过一个对象代理对另一个对象中属性的操作（读&写）
- 利用Object.defineProperty()方法，最重要的是getter和setter
- Vue中数据代理：vm实例对象与data返回的对象之间的代理，即vm._data和data之间
1.8 事件(P14~P17)
- 事件修饰符（常用） 修饰符可以连用
- .prevent 阻止默认事件
- .stop 阻止冒泡
- .once 事件仅触发一次
- 键盘事件
- Vue提供九个常用按键的别名，以修饰符形式跟在keyup或keydown后面 enter delete esc up down left right tab space
- ctrl tab shift meta 系统修饰键，配合keydown键正常使用；配合keyup时要与其他键组合才能触发事件
- 可以在 Vue.config.keyCodes中添加自定义别名（不常用）
1.9 计算属性(P18～P20)
- 计算属性也会出现在vm上（以计算属性getter的返回值形式出现）
- 计算属性要有getter和setter
- getter调用时机：1.初次读取该计算属性时 2.该计算属性所依赖的数据发生改变时
- setter调用时机：该计算属性被修改时
- 计算属性中使用data中的属性时之前要加this
- computed与methods的区别：计算属性有缓存
- 简写形式（当计算属性只读不改时可用，即只有getter时）
//将sentence计算属性简写为函数，不影响模版中正常形式 computed: { sentence() { return this.word1 + this.word2 } }
1.10 监视属性(P21~P25)
- 以配置项形式存放在watch中，当被监视属性发生变化时，handler回调函数自动调用
- 写法二：vm.$watch('被监视属性', 配置项)
- 深度监视：监视多级结构中属性的变化
- 监视多级结构中某一个属性：以字符串形式写属性名（即不能用简写）、
- 监视多级结构中所有属性的变化：利用配置项deep
- 简写形式（当配置项中仅有handler()时）
//将sentence监视属性简写为函数，不影响模版中正常形式 watch: { sentence(newValue, oldValue) { //相当于handler函数 } } - 监视属性与计算属性对比：计算属性能完成的监视属性都能完成（但更复杂）；计算属性中不能实现异步操作（因为计算属性依赖return），监视属性中可以实现
- 原则：被Vue管理的函数都写成普通函数，不被Vue管理的函数（例如定时器回调、Promise回调等）都写成箭头函数，目的是使this都指向vm。
1.11 样式绑定(P26~P27)
- 绑定class样式
- 字符串写法，适用于样式的类名不确定（动态指定）
<div :class="color">color为存在data中的字符串</div>//对应css中类名为a的样式 color: "a"- 数组写法，适用于样式数目和名字都不确定
<div :class="colorArr">colorArr为存在data中的数组</div>//对应css中类名为a、b、c的样式 colorArr: ["a", "b", "c"]- 对象写法，适用于样式名字和数目都确定，但要动态决定是否使用
<div :class="colorObj">colorObj为存在data中的对象</div>colorObj: { a: true, b: false } - 绑定style内联样式
- 对象写法：key、value都不能写错，例如fontSize
- 数组写法
1.12 条件渲染(P28)
- v-show：底层实现为调整display属性
- v-if：DOM结构消失
- v-else以及v-else-if：逻辑与js中if else语句相同，使用时DOM结构必须连续
- template（不影响DOM结构）仅能与v-if配合使用
1.13 列表渲染(P29~P32)
- 遍历数组语法：
<!-- 拿到一个参数i --> <li v-for="i of personArr" :key="i.id">{{i}}</li> <!-- 拿到两个参数item及index --> <li v-for="(item, index) of personArr" :key="item.id">{{item}}</li> - 遍历对象语法：
<!-- 注意拿到参数的顺序，先value后key --> <li v-for="(value,key) of personObj" :key="key.id">{{value}}</li> - 可以遍历字符串、遍历指定次数（不常用）
- 当使用遍历的方法生成多个结构时，必须给每个结构一个标识（key属性）
- 目的：diff算法依赖标识进行运算
- key存在于虚拟DOM中，真实DOM中不存在key
- key应该为数据的唯一标识，不能用index（因为数组顺序可能发生改变）
- 列表过滤：使用计算属性
1.14 Vue对数据变化的感知(P34~P37)
- Vue会监视data中所有层级的数据
- 数据为对象时
- 步骤1:对数据进行加工（把data中每一组key-value都形成getter和setter）
- 步骤2:vm._data = data。加工的目的是使数据变为响应式。
- Vue.set()以及vm.$set():该API的功能是追加响应式的数据，只能给data中某个对象身上加数据，而不允许给vm或vm._data（根数据）中添加数据
- 数据为数组时
- 没有为数组中每一个元素配置getter和setter，并不是响应式，因此不能通过索引值修改
- Vue对数组常用方法进行包装从而达成监控的目的：push pop shift unshift splice sort reverse
- Vue.set()也可以用于数组（不常用）
- 至于slice filter concat等不影响原数组的方法，可将其返回值重新赋值给原数组
1.15 v-model与不同表单项的配合
- v-model默认收集value值
- text类型（略）
- radio类型：v-model与value值分离，即需要配置value，v-model收集的value的值
<!-- -->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
data(){
return {
picked: ''
}
}
- checkbox类型：需要配置value值，由于是多选，v-model与一个数组绑定，收集的是value组成的数组
1.16 自定义指令(P45~P47)
- 配置时有两种形式：函数式&对象式
- 函数式：不是靠返回值，而是依赖函数收到的两个参数：真实DOM元素与一个保存着本次绑定所有信息的对象。
directives: { xxx(element, binding) { //xxx配置项的操作（直接操作DOM），主要针对binding.value } } - 函数调用时机：1.指令与DOM元素初次绑定（在内存中二者建立联系，并未在页面中显示）时 2.指令所在模版被重新解析时
- 对象式：内放置多个钩子函数，在不同时间点vue调用不同的函数，比函数式自定义空间更大
directives: { 'xxx': { //指令与元素成功绑定时调用 bind(element, binding){ }, //指令所在元素被插入页面时调用 inserted(element, binding){ }, //指令所在模版被重新解析时 update(element, binding){ } } } - 注意点
- 自定义指令名：驼峰命名不合适，多个单词用-做分割
- 指令中回调函数的this：所有指令相关回调的this都是window
- 全局的自定义指令：Vue.directive('xxx', 函数或对象)
1.17 生命周期(P48~P52)
- 生命周期函数与data、methods等平级，是Vue实例配置项，是一些在Vue特殊时刻回调的函数，其中的this为vm（或组件实例对象）
- vm销毁后，自定义事件失效，但原生DOM事件依旧有效
- 钩子函数：
- beforeCreate()：create是指数据代理和数据检测，无法通过vm访问到data的数据、methods中的方法
- created()：可以通过vm访问到data的数据、methods中的方法
- beforeMount()：已生成虚拟DOM，但页面显示未解析的内容，此时所有对DOM的操作最终都不生效
- mounted()：页面挂载好已编译的DOM，至此初始化过程结束，一般在此次设置定时器、发送网络请求等
- beforeUpdate()：数据已更新，但页面未更新
- updated()：数据与页面保持同步
- beforeDestroy()：一般在此停止计时器、取消订阅、解绑自定义事件等收尾操作
- destroyed()
- 与路由有关的钩子函数：
- 待补充
