<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <!-- 调用局部指令 v-fontweight v-fontsize --> <input type="text" v-model="msg1" v-fontweight="‘bold‘" /><span v-fontsize=‘"25px"‘>{{msg1}}</span> <br /> <!-- 调用全局指令 v-focus v-focus 有参数的情况下加双引号 --> <input type="text" v-focus v-color=‘"red"‘/> </div> <script type="text/javascript"> // 自定义 全局指令。 // 参数1：指令名称，不用加v-前缀 // 参数2：对象，可以加一些指令相关的函数 Vue.directive(‘focus‘,{ // inserted 表示被绑定元素插入父节点时调用,触发函数【触发一次】 inserted:function(el){//el参数表示添加指令的dom对象 el.focus(); } }) Vue.directive(‘color‘,{ // 每当绑定到元素上时，会立即执行（相当于在内存中就执行，所有focus指令不能用bind）【触发一次】 bind:function(el,binding){//el参数表示添加指令的dom对象,binding 表示一个对象，有多个属性 // binding.name binding.value binding.expression el.style.color=binding.value; } }) var vm=new Vue({ el:‘#app‘, data:{ msg1:‘‘ }, methods:{ }, directives:{//定义私有的指令 ‘fontsize‘:{ bind:function(el,size){ el.style.fontSize=size.value } }, ‘fontweight‘:function(el,weight){//定义私有的指令简写-默认使用bind 和update ，参照color的bind el.style.fontWeight=weight.value; } } }) </script> </body> </html>
以前都是用vue自带的指令，现在我们也可以自己创建指令了
原文：https://www.cnblogs.com/shangrao/p/13021361.html