一、Directives 指令
两种写法:
1、声明一个全局指令
Vue.directive('x', directiveOptions)
就可以在任何组件里使用v-x了
例如:声明一个全局指令
![9c8f87ca52d68d9f43456c0c41f4de0b.png](https://i-blog.csdnimg.cn/blog_migrate/098e7fc24c1024bbf753b91493814d5f.png)
在App.vue里点击图片,在HelloWorld.vue点击标题。都会打印x
![f851fd8aa01121af35051bf6b1518885.png](https://i-blog.csdnimg.cn/blog_migrate/43f549e5f4dab16d383a7d42ab302dac.jpeg)
![cea40939ede7111c2ab9dbe9e0de67ca.png](https://i-blog.csdnimg.cn/blog_migrate/9b3b16c45a9be6d3214c2f642c40f0cb.jpeg)
2、声明一个局部指令
new Vue({
...,
directives: {
"x": directiveOptions
}
})
v-x只能用在该实例中
例如:这个组件就只能在HelloWorld.vue里使用
![51af83259bf9cd0c2c788fa545b091f0.png](https://i-blog.csdnimg.cn/blog_migrate/a19fbb3e68c5aedbf6c740cda9ca4c31.png)
directiveOptions
五个函数属性
- bind(el绑定的元素,info详细的信息, vnode虚拟节点, oldVnode之前的虚拟节点)-类似created;只调用一次,指令第一次绑定到元素时调用。
- inserted(参数同上)-类似mounted;被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update(参数同上)-类似updated;
- componentUpdated(参数同上)-用得不多,参见文档
- unbind(参数同上)-类似destroyed
自制指令,不用v-on
使用v-on
![f0c787efe5e9f085cab224ca0539bbd7.png](https://i-blog.csdnimg.cn/blog_migrate/8d7992f96480986fa57622777887538d.png)
不使用v-on
![175389b7bf3c03001e70c0375aa06cdc.png](https://i-blog.csdnimg.cn/blog_migrate/e94064a5491bc6177c25defc8e117460.png)
我们如何得知用户使用的是click呢,使用info
![db660d3a542e7125173e89b034b85b69.png](https://i-blog.csdnimg.cn/blog_migrate/7cf8b6cfe43e8e92cf78476a6037c8b2.png)
打出info发现