Vue — 自定义指令

最后更新于:2022-04-02 08:06:41

>[success] # vue 自定义指令 [官方文档对应章节](https://cn.vuejs.org/v2/guide/custom-directive.html) ~~~ 1.Vue的指令官网是这样说的: Vue 允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下, 你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到'自定义指令'。 2.可以参考 --- 前端使用手册Vue章节有讲解轮播图的用法 ~~~ >[info] ## 用法讲解 ~~~ 1.使用 Vue.directive() 定义全局的指令 2.第一参数是自定义组件名称 3.第二个参数是一个对象,对象中包含了一些钩子函数(均为可选)依次是: 3.1.'bind':只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 3.2.'inserted':被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 3.3.'update':所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的 值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 3.4.'componentUpdated':指令所在组件的 VNode及其子 VNode全部更新后调用。 3.5.'unbind':只调用一次,指令与元素解绑时调用。 注:其中bind,inserted,unbind 是只调用一次,update是一些 属性重新生调用 4.这些钩子函数中参数依次为 'el、binding、vnode 和 oldVnode' 4.1.'el' 是当前绑定自定义的dom元,可以直接操作dom 4.2.'binding'是一个和自定义指令相关的对象内容包含依次如下: 4.2.1.'name':获取指令名,这里的指令名指的是不包括'v-'前缀。 4.2.2.'value':获取指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2 4.2.3.'oldValue':指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。 无论值是否改变都可用。 4.2.4.'expression':字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。 4.2.5.'arg':传给指令的参数,可选。例如'v-my-directive:foo'中,参数为"foo"。 4.2.6.'modifiers':一个包含修饰符的对象。例如:'v-my-directive.foo.bar'中, 修饰符对象为`{ foo: true, bar: true }`。 4.3.'vnode':Vue 编译生成的虚拟节点 4.4.'oldVnode':上一个虚拟节点,仅在'update'和'componentUpdated'钩子中可用 ~~~ >[danger] ##### 指令中的钩子函数对应阶段可做的事情 ~~~ 1.bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次 性的初始化设置。(还没有创建dom ,可以做一些不需要dom节点的事情, 比如样式初始化) 2.inserted:被绑定元素插入父节点时调用( 创建了dom 对象,可以做一些 dom的操作) 3.update:所在组件的 VNode 更新时调用(vue 中元素改变后才会改变) 4.componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。(不清楚如何使用后续了解) 5.unbind:只调用一次,指令与元素解绑时调用。(不清楚如何使用后续了解) ~~~ >[danger] ##### 自定义获取焦点 和改变字体颜色的案例 ~~~ 1.传参接受的时候binding.value 2.在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写: Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value }) ~~~ ~~~ Title
~~~
';