vue自定義指令（擴充套件的HTML）
阿新 • • 發佈：2019-02-18
指令: 擴充套件html語法
自定義指令:
屬性:
Vue.directive(指令名稱,function(引數){
this.el -> 原生DOM元素
});
<div v-red="引數"></div>
指令名稱: v-red -> red
* 注意: 必須以 v-開頭
<script> Vue.directive('red',function(){ this.el.style.background='red'; }); window.onload=function這是例項</span> <span v-red>
這是例項</span>
</div></body>
例項2：
<script> Vue.directive('red',function(color){ this.el.style.background=color; }); window.onload=function(){ varvm=new Vue({ el:'#box', data:{ a:'blue' } }); }; </script> </head> <body> <div id="box"> <span v-red="a"> asdfasd </span> </div>
實際上相當於data中的a先傳給v-red中的a,然後傳給自定義指令中的color，更清晰的自定義指令傳參如下<script> Vue.directive('red',function(color){ this.el.style.background=color; }); window.onload=function(){ var vm=new Vue({ el:'#box' }); }; </script> </head> <body> <div id="box"> <span v-red="'blue'"> asdfasd </span> </div> </body>
其原理都是事件繫結，如下<script> Vue.directive('red',{ bind:function(){ this.el.style.background='red'; } }); window.onload=function(){ var vm=new Vue({ el:'#box' }); }; </script> </head> <body> <div id="box"> <span v-red> asdfasd </span> </div> </body>