Vue -- 自定义指令 · Vue&&TypeSprict--基础总结

>[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 }) ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="lib/vue.js"></script> </head> <body> <div id="app">  <input type="button" value="改变颜色属性" @click="color='yellow'">  <input type="text" v-color="'red'">  <input type="text" v-color="color">  <input type="text" v-changecolor="color"> <input type="text" v-focus> </div> <script> Vue.directive('color', { // 1.el 是被绑定的当前元素 2.binding 是接受指令的参数 bind:function (el,binding) { // 还没有创建dom ，可以做一些不需要dom节点的事情，比如样式更改 // el.style.color = 'red' el.style.color= binding.value }, } ); Vue.directive('focus',{ inserted:function (el,binding) { // 创建了dom 对象，可以做一些dom的操作， console.log(el) el.focus() } }); Vue.directive('changecolor',{ update:function (el,binding) { // vue 中元素改变后才会改变 el.style.color= binding.value } }); Vue.directive('color', { // 1.el 是被绑定的当前元素 2.binding 是接受指令的参数 bind:function (el,binding) { // 还没有创建dom ，可以做一些不需要dom节点的事情，比如样式更改 // el.style.color = 'red' el.style.color= binding.value }, update:function (el,binding) { // vue 中元素改变后才会改变 el.style.color= binding.value } } ); var vm = new Vue({ el:"#app", data:{ color:'red' }, }) </script> </body> </html> ~~~