<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>template</title></head><body><divid="app"><!--调用vue指令(包括自定义的指令)时,需要加上"v-"前缀--><inputtype="text"placeholder="name"v-color="'blue'"/></div><scripttype="text/javascript"src="js/vue.js"charset="UTF-8"></script><scripttype="text/javascript"charset="UTF-8">//自定义全局指令
Vue.directive("color",{//第一个参数el是该指令所绑定的元素//第二个参数binding是一个对象,表示该指令相关属性bind:function(el,binding){//注意:style样式不同于js事件,不需要关心该元素是否已经添加到dom中//当该指令绑定到元素中,该元素就会有一个内联的样式,该元素之后被添加到dom中就会起作用//和style样式相关的操作建议都放在bind函数中
el.style.color=binding.value;
console.log(binding.name);//color
console.log(binding.value);//blue},inserted:function(){//和js行为(/事件)有关的操作,建议都放在inserted函数中}});var vm =newVue({el:'#app',data:{},methods:{}})</script></body></html>
自定义私有的指令
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>自定义私有指令</title></head><body><divid="app"><pv-fontweight="500">hello vue</p></div><scripttype="text/javascript"src="js/vue.js"charset="UTF-8"></script><scripttype="text/javascript"charset="UTF-8">var vm =newVue({el:'#app',data:{},methods:{},filters:{},//自定义私有的指令directives:{'fontweight':{bind:function(el,binding){
el.style.fontWeight=binding.value;},inserted:function(el){},updated:function(el){}}}})</script></body></html>
指令函数的简写形式
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>自定义私有指令</title></head><body><divid="app"><pv-fontweight="500"v-fontsize="30">hello vue</p></div><scripttype="text/javascript"src="js/vue.js"charset="UTF-8"></script><scripttype="text/javascript"charset="UTF-8">var vm =newVue({el:'#app',data:{},methods:{},filters:{},//自定义私有的指令directives:{'fontweight':{bind:function(el,binding){
el.style.fontWeight=binding.value;},inserted:function(el){},updated:function(el){}},//如果一个私有的指令的相关操作只是写在bind和update函数中,那么可以简写//该指令的function就等同于把代码写到了bind和update函数中'fontsize':function(el,binding){
el.style.fontSize=parseInt(binding.value)+"px";}}})</script></body></html>