1.指令名：v-text和v-html
2.指令名：v-bind 可以省为冒号 ：
3.指令名: v-if 和 v-show
4.指令名: v-for （）
5.指令名：v-on 简写 @
6.事件修饰符
<div @click.修饰符="函数"></div>
.stop 阻止单击事件继续传播
.prevent 阻止默认行为
.capture 使用事件捕获模式
.self 点到自己时才触发，不是从其它地方（事件流的流）流过来的
.once 只会触发一次
.passive onScroll事件 结束时触发一次，不会频繁触发，移动端使用
7.指令名：v-model
8.计算属性
//定义
computed:{
计算属性: function(){
return 返回值}
}
//使用
使用: {
{
计算属性}} | v-指令="计算属性"
computed VS methods
| methods | computed |
|---|---|
| 方法每次调用都会进行运算 | 基于它们的响应式依赖进行缓存的，如果依赖没有变化，就不再运算 |
| 一般 | 性能高 |
| { {methodname()}} | { {computedname}} |
| 适合强制执行和渲染 | 适合做筛选 |
9.属性检测（侦听属性）
watch:{
数据名:'methods的里函数名' //数据名==data的key
数据名:函数体(new,old){
}
数据名:{
handler:fn(new,old){
},
deep: true //深度检测，当侦听的属性是个对象，修改对象的某个键时，就能检测到
immediate: true //首次运行,要不要监听
}
}
计算属性 VS 函数 VS 属性检测
| 计算属性（computed） | 函数（methods） | 属性检测（侦听）（watch） | |
|---|---|---|---|
| 为了显示而用 | 只是处理逻辑，跟普通的函数一样 | 属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数 | |
| 依赖模板调用 | √（在模板上调用的） | -（可以在模板使用） | ×（不能在模板上使用） |
| 是否缓存 | √ | × | √ |
| 异步 | ×（必须是同步） | √ | √ |
10.组件的概念：
配置项如下：
没有el属性。
template：html模板代码，只能有一个根标签
data（）{ }
methods：{}
11.注册组件（全局注册）
Vue.component('组件名',组件变量名);
12.局部注册
//在vue对象的components选项里进行注册
new Vue({
el:
components:{
组件名：组件变量名
}
});
13. 组件传递数据Prop [ ] ，是个数组
14. 组件的事件
触发事件 ： vue对象. $emit(“事件名”,参数);
15.组件的内容 Slot(插槽)
16.refs（也就是在vue中操作dom类似于js中的id）
```js
如：<p ref = "pId"> {
{
msg}}</p>
methods:{
testf:function(){
this.$refs.pId.innerHTML = "hi";
}
}
17.事件总线（vue-bus）
18.集中管理（$root)
new Vue({
data:{
a:1}
})
使用
//子组件内部
this // 组件本身
this.$root // vm
this.xx //组件内部数据
this.$root.a //根实例数据
19.动态组件
component :is=“组件名变量”
20.vue 生命周期
（一）数据挂载 阶段
前后分别的钩子函数是：beforeCreate、created （数据挂载前后分别执行的函数）
（二）模板渲染阶段
前后分别的钩子函数是：beforeMount、mounted
（三）组件更新阶段
前后分别的钩子函数是：beforeUpdate、updated
（四）组件销毁阶段（相同组件的频繁创造和销毁，会消耗cpu性能，所以有了）
前后分别的钩子函数是：beforeDestroy、destroyed
如果组件在缓存的话，那么，组件切换时，会调用的钩子函数是：
activated 和 deactivated（组件激活前和组件激活后调用的函数）