自定义指令的分类
vue 中的自定义指令分为两类,分别是:
- 私有自定义指令
- 全局自定义指令
私有自定义指令
在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令
全局自定义指令
全局共享的自定义指令需要通过“Vue.directive()”进行声明
语法:
Vue.directive('自定义指令的名字', {自定义指令的选项}})
使用方法:
需求: 把App根组件改成红色
全局自定义指令写在main.js中:
页面显示效果:
这种写法,只能定义一个颜色值,所以我们可以写一个动态提供颜色的。
示例:当我们写两个按钮,分别对应相应的色号,点击按钮,文字变成相应色号
为什么要写在update函数中,而不是bind函数生效
因为bind函数只会在创建时调用,更新时不会调用,点击按钮,更改显示颜色属于更新而不是创建
bind和update两段代码的简化:
Vue.directive('color', function (el, obj) {
el.style.color = obj.value
})
什么时候可以简写:
如果bind和update中的实现逻辑,既代码完全一致,就可以简写。