自定义指令:自定义一些指令对普通 DOM 元素进行底层操作(可注册全局指令、局部指令)。
使用:如果想注册局部指令,组件中也接受一个 directives
的选项
案例一:设置dom字体颜色
//被绑定元素插入父节点时调用(执行一次) //当我们触发 changeColor 修改颜色值时,然而视图并没有更新,因为指令也存在生命周期 , //所以如果需要视图更新,使用更新阶段全局注册多个自定义指令:
①:创建directive.js文件,然后编写全局的自定义组件;
③:在需要使用的地方直接使用
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行默认值设置。
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
unbind
:只调用一次,指令与元素解绑时调用。
el
:指令所绑定的元素,可以用来直接操作 DOM。
value
:指令的绑定值。
1)、动态指令参数:指令的参数可以是动态的。
假如我们需要动态设置元素定位的位置:
如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。
除了核心功能默认内置的指令 (v-model 、 v-show等),Vue 也允许注册自定义指令。如果你需要对普通 DOM 元素进行底层操作,这时候就会用到它。举个聚焦输入框的例子,如下: