背景最近在面试一个工作，然后面试官问了一些关于自定义命令的问题，由于我用的自定义命令不多，所以看了官方文档大概知道需要用到看。指令来自自定义指令；面试完马上去网上找关于自定义指令的资料，发现关于自定义指令的知识还是很多的，于是就想写一篇博客记录一下，鞭策自己多尝试，多学习！！！文档https://cn.vuejs.org/v2/guide...这是官方关于自定义指令模块的文档；自定义指令包括全局自定义指令和本地自定义指令。如果要注册本地指令，该组件还接受指令选项：@Component({name:"CustomDirectives",components:{},directives:{//本地自定义指令custom1:{inserted(el){console.log("el",el);el.style.position="absolute";el.style.top="50%";el.style.left="50%";el.style.transform="translate(-50%,-50%)";el.innerText="加载中...";el.style.padding="10px";el.style.color="#333";},},},})全局自定义指令Vue.directive("custom2",{inserted(el,binding){console.log("binding",binding);if(binding&&binding.value){el.innerText="Testglobalcustomdirective";console.log("el",el);el.style.position="absolute";el.style.top="50%";el.style.left="50%";el.style.transform="翻译(-50%,-50%)";el.style.padding="10px";el.style.color="#333";}},});说说自定义命令钩子函数bind：只调用一次，在命令第一次绑定到元素时调用，可用于一次性初始化。inserted：绑定元素插入到父节点时调用（只保证父节点存在，不一定插入到文档中）。update：组件的VNode更新时调用，但也有可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。但是可以通过比较更新前后的值来忽略不必要的模板更新（钩子函数参数详见下文）。componentUpdated：命令所在组件的VNode及其子VNode全部更新后调用。unbind：仅在指令与元素解除绑定时调用一次。钩子函数参数el：指令绑定的元素，可用于直接操作DOM。binding：包含以下属性的对象：name：指令的名称，不包括v-前缀。value：指令的绑定值，例如：在v-my-directive="1+1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否已更改均可用。expression：字符串形式的指令表达式。例如，在v-my-directive="1+1"中，表达式为"1+1"。arg：传递给命令的参数，可选。例如，在v-my-directive:foo中，参数是“foo”。修饰符：包含修饰符的对象。例如：在v-my-directive.foo.bar中，修饰符对象为{foo:true,bar:true}。vnode：Vue编译生成的虚拟节点。移至VNodeAPI了解更多详情。oldVnode：前一个虚拟节点，仅在update和componentUpdatedhooks中可用。动态指令传参Vue.directive("custom2",{inserted(el,binding){console.log("binding",binding);if(binding&&binding.value){el.innerText="测试全局自定义指令";console.log("el",el);el.style.position="absolute";el.style.top="50%";constarg=(bindingasany).arg;el.style[arg]="50%";el.style.transform="translate(-50%,-50%)";el.style.padding="10px";el.style.color="#333";}},});
