自定义指令

自定义指令的注册方式与组件类似，也分为全局注册和局部注册。例如，注册v-focus指令用于在初始化输入和textarea元素时自动获取焦点。有两种方式写它：

//全局注册Vue.directive('focus '，{//command option })；//部分注册varapp=newvue ({el:' # app '，directive : { focus : {//command option } })；自定义指令的选项由几个钩子函数组成，每个函数都是可选的。

自定义命令的选项如下：

绑定：只调用一次。当指令第一次绑定到元素时调用它。使用这个钩子函数，可以定义一个在绑定过程中执行一次的初始化动作。已插入：当绑定元素插入父节点时调用(当父节点存在时可以调用，且不一定在文档中)。Update:当绑定元素的模板更新时调用，不管绑定值是否改变。通过比较更新前后的绑定值，可以忽略不必要的模板更新。组件更新：当绑定元素的模板完成一个更新周期时调用。Unbind:仅调用一次，当指令与元素解除绑定时调用。逻辑代码可以根据需求在不同的钩子函数中完成，比如上面的v-focus。我们希望在元素插入父节点时调用，插入的是最好的一个。

！DOCTYPE html html lang=' en ' Head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，Initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' script src=' http:https://unpkg.com/vue/dist/vue.js'/scripttitle自定义指令/title/Head body div id=' app ' input type=' text ' v-focus/div script vue . directive(' focus '，{插入3360 function(El){//focus element El . focus()；} });var app=new Vue({ El : ' # app ' })；/脚本/正文/html

每个钩子函数都有几个可用的参数，如下所示：

El:指令绑定的元素，可用于直接操作DOM绑定：一个具有如下属性的对象：name:指令名，不包括v-prefix value le:指令的绑定值，例如v-my-directive="1 1 "，值为2 oldValue:指令绑定的前一个值，只在update和componentUpdated hooks中可用。无论值是否改变，它都可以表示为一串绑定值。例如，v-my-directive="1 1 "，表达式的值为" 1 1" arg:传递给指令的参数。例如v-my-directive:foo，arg的值是foo修饰符：一个包含修饰符的对象。例如，v-my-directive.foo.bar，修饰符对象修饰符的值为{foo:true，bar:true}

虚拟节点：由VUE编译生成的虚拟节点。OldVnode:最后一个虚拟节点只在update和componentUpdated钩子中可用。示例：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，Initial-scale=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' script src=' http:https://unpkg.com/vue/dist/vue.js'/scripttitle自定义指令/title/head body div id=' app ' div v-test : msg . a . b=' message '/div/script vue . directive(' test '，{ bind: function(for(v node中的var I){ keys . push(I)；} El . innerHTMl=' name : ' binding . name ' br/' value : ' binding . value ' br/' expression : ' binding . expression ' br/' argument : ' binding . arg ' br/' modifier 3360 ' JSON . stringify(binding . modifiers)' br/' vnode keys ' keys . join('，')；} });var app=new Vue({ el: '#app '，data : { message : ' some text ' } })；/脚本/正文/html

点击《Vue.js前端组件学习教程》获取更多教程。欢迎学习和阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。