自定义指令

Vue模板语法有两大类:

1. 插值语法:

1. 功能:用于解析标签体内容。
2. 写法:{{xxx}},xxx是js表达式，且可以直接读取到data中所有的属性.

2.指令语法:

1. 功能:用于解析标签(包括:标签属性、标签体内容、事件绑定…)
2. 举例:v-bind:href='xxx’或简写为 :href=“xxx”，xxx同样要写js表达式,且可以直接读取到data中所有的属性。
3. 备注:Vue中有很多的指令，且形式都是:v-???

自定义指令

你需要对普通dom元素进行底层操作，可以选择使用指令实现。比如 事件绑定 样式的消失和出现

一、局部指令

1. new Vue({
   directives:{指令名:配置对象}
   })
2. new Vue({
   directives:{指令名:回调函数} 这样写只有bind和update 2个回调
   })
3. 全局指令

• Vue.directive(指令名,配置对象) 或者 Vue.directive(指令名,回调函数)

配置对象中常用的三个回调

1. bind:指令与元素成功绑定时调用。
2. inserted: 指令所在元素被插入页面时调用
3. update:指令所在的模板结构被重新解析时调用
4. 都会接收到参数 element(当前对象) binding(一些数据) 例如:binding.value当前接收的值。vnode第三个参数,vnode.context可以获取组件的this
5. 这些中this的指向是window

备注:

1. 指令定义时不加v-,但是使用时要加
2. 指令如果是多个单词,要使用kebab-case命名方式，不要使用小驼峰命名方式