目录

Vue允许我们自定义指令，同样分为全局和私有。

全局自定义指令:      

案例: 自定义指令v-focus，完成ID的自动聚焦

 案例: 自定义指令v-color,完成指定元素内容颜色的功能?

 私有自定义指令:

案例: 如下完成自定义指令指定元素字体粗细和字体大小

案例源代码：

Vue指令综合案例——汽车品牌管理（项目实战）-Node.js文档类资源-CSDN下载

---

Vue允许我们自定义指令，同样分为全局和私有。

• 全局自定义指令:      

Vue.directive(‘指令名称’,{}) , 比如: v-focus 指令: Vue.directive(“focus”,{…})  

 参数1:指令的名称，在定义的时候，指令的名称前面，不需要加 v- 前缀，在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用

参数2:是一个对象，这个对象身上，有一些指令相关的钩子函数（在特定的阶段执行）, 要记住的是，每一个钩子函数的第一个参数表示绑定了这个指令的dom元素，是一个原生js对象 。

Vue.directive("focus", { 
bind:function(el){…}, 
inserted:function(el){…}, 
update: function(el){…}, 
componentUpdated:function(el){…}, 
unbind:function(el){…} 
})

• bind:每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次，一般用来做一些准备初始化工作
• inserted:表示元素 插入到DOM完成之后，会立即调用，执行一次
• update:当VNode更新的时候，会执行 update， 可能会触发多次，也就是绑定了Vue指令的dom元素发生改变时,这个改变包括很多，比如：样式、值、位置等等，只要这个元素和vue进行了数据绑定
• componentUpdated: 同update一样，当VNode更新时, 但在它的回调里面，el是改变后的dom
• unbind：元素从DOM删除时触发.(仅仅是删除)

• 案例: 自定义指令v-focus，完成ID的自动聚焦

---

 bind与inserted钩子函数说明:

结论:不需要操作dom，不需要等待dom完成插入，所以和样式相关的操作放在bind内,要操作dom元素，必须dom完成插入后，所以和js相关的操作放在inserted内

•  案例: 自定义指令v-color,完成指定元素内容颜色的功能?

 我们将keywords设置颜色内容：

1、使用binding value：指令的绑定值

 // 这里要注意指令值的，因为style.color=’red’

2、针对 binding arg:传给指令的修饰参数，可选 v-color.dc="'blue'"；当没有指定颜色的时候，通过它可以设置默认颜色

由于我们设定了默认是蓝色，所以呈现如下效果：

Binding对象，包含以下属性

• name：指令名，不包括 v- 前缀
• value：指令的绑定值
• oldValue：指令绑定的前一个值
• expression：字符串形式的指令表达式，沒啥用
• arg：传给指令的修饰参数，可选。例如 v-my-directive:foo 中，参数为 "foo"，比如： v-color.dc=“’’”,当没有指定颜色的时候，通过它可以设置默认颜色
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }                 它和arg类似，将修饰参数封装成了一个对象，开发者可以为指令添加多个修饰符参数，并自定义它们的作用，通过这个属性获取。

•  私有自定义指令:

案例: 如下完成自定义指令指定元素字体粗细和字体大小

 

案例源代码：

Vue指令综合案例——汽车品牌管理（项目实战）-Node.js文档类资源-CSDN下载