一.组件的定义与使用
1.Vue文件的组成
1）模板页面
2）JS模块对象
3）样式
2.基本使用
1）引入组件
2）映射成标签
3）使用组件标签
二.模板语法
1.页面动态化
类似于Node中的ES，可以让HTML页面动态化，方法：
1）大括号表示{{ }}
2）指令，以v-开头的自定义标签属性
2.双大括号表达式
1）语法： {{example}}
2）功能：
a：向页面输出数据
b：内部可以是变量、对象调用、表达式
3.强制数据绑定
1）语法
a：v-bind:a='b',b会作为表达式解析执行
b：常用写法为：:a='b'
2）功能
a：向页面输出数据
b：内部可以是变量、对象调用、表达式
4.绑定事件监听
1）语法
a：v-on:click='a'，a为绑定事件函数名
b：简洁写法：@click='a'
2）功能
触发事件
三.计算属性和侦听器
1.计算属性(computed)
1）作用
a：减少模板中的计算逻辑
b：进行数据缓存
c：依赖固定的数据类型（响应式数据）
2）使用
a：在computed属性对象中定义计算属性的方法
b：在页面中使用{{方法名}}来显示计算结果
c：通过getter/setter实现对属性数据的显示和监视
2.侦听器(watch)
1）作用
a：比computed更加灵活
b：watch中可以执行任何逻辑
c：依赖固定的数据类型
2）使用
a：通过vm对象的$watch()或watch配置来监视指定的属性
b：当属性变化时，回调函数自动调用，在函数内部进行计算
3.总结
1）computed能做的，watch都能做，反之不行
2）能用computed的时候，尽可能用computed
3）computed 是计算一个新的属性，并将该属性挂载到 vm（Vue 实例）上，而 watch 是监听已经存在且已挂载到 vm 上的数据，所以用 watch 同样可以监听 computed 计算属性的变化（其它还有 data、props）
4）computed 本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问 computed 属性，才会计算新的值，而 watch 则是当数据发生变化便会调用执行函数
5）从使用场景上说，computed 适用一个数据被多个数据影响，而 watch 适用一个数据影响多个数据
四.class与style
1.概念
在模板界面中，某些元素的样式是变化的，class/style用于动态绑定类和样式，class/style绑定技术就是专门用来处理动态样式效果。
2.class和style
1.class
绑定:class='a',a取值可为：字符串、对象和数组。
2.style
:style="{ backgroundColor: bgColor, fontSize: fSize}"
其中 bgColor/fSize 都是 data 属性
五.条件渲染指令
1.v-if/v-else/v-else/if
2.v-show
3.两者区别
1）v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
2）v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换
3）如果需要频繁切换 v-show 较好
六.常用指令和自定义指令
1.常用内置指令
v-text=>更新元素的 textContent
v-html=>更新元素的 innerHTML（不建议使用，在网站上动态渲染任意 HTML 是非常危险的，因为容易导致XSS攻击）
v-show
v-if
v-else
v-else-if
v-for=>Array | Object | number | string | Iterable
v-on
v-bind
v-model
v-slot=>提供具名插槽或需要接收 prop 的插槽
v-pre=>跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。
v-cloak=>防止闪现，和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕
v-once=>只渲染元素和组件一次，随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过，这可以用于优化更新性能
2.自定义指令
1）自定义全局组件
2）自定义指令
七.事件处理
1.事件绑定监听
v-on:xxx="func"
@xxx="func"
@xxx="func(参数)"
v-on:xxx="函数名
2.参数
默认事件形参: event
隐含属性对象: $event
a：在原生事件中，$event是事件对象
b：在自定义事件中，$event是传递过来的数据
3.事件修饰符
.prevent：阻止事件的默认行为 event.preventDefault()
.stop：停止事件冒泡 event.stopPropagation()
4.按键修饰符
.keycode : 操作的是某个keycode值的健
.enter : 操作的是enter键
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
