vue怎麽自定義指令??
阿新 • • 發佈:2017-07-28
相差 name value self upd 使用 插入 參數 dom節點
最近看看vue中自定義指令,感覺vue的指令和angular1的指令相差較大
<script> //指令鉤子函數: /* bind 只調用一次,指令第一次綁定到元素的時調用 inserted 被指令綁定指令的元素插入 父節點的時候調用 update 被綁定的元素模版只要發生變化,就會觸發(通過比較模板變化前後) componentUpdated 被綁定元素所在模版完成一次更新周期時被觸發 unbind 指令被解除綁定的時候 */
/*
定義指令回調函數(鉤子函數的幾個參數的意義)
第一個參數:綁定指令的元素html
第二個參數:對象的形式輸出,自定義指令的信息(指令名字,使用的名字,包括我們傳入的值,我們可以利用這個參數,在鉤子函數中進行相關操作),
第三個參數:輸出綁定指令的元素的虛擬dom節點信息
*/ const selfcomponent={ template:`<div> <p>自定義組件</p> <input v-model="com"/> <p v-my-dir="com">組件的內容:跟隨變色</p> </div>`, //props:[‘color‘], data(){ return { com:‘#ddd‘}//給一個默認值 }, directives:{ "myDir":{//指令的名字 bind:function(el,binding,nodeDom){ console.log(binding); console.log("bind"); el.style="color:"+binding.value; },
inserted:function(){ console.log("instered"); }, update:function(el,binding,nodeDom){//每次在input中輸入信息,都會觸發這個函數 console.log("update"); el.style="color:"+binding.value; }, componentUpdated:function(el,bindging,nodeDom){ console.log("componented"); }, unbind:function(el,binding,nodeDom){ console.log("unbind"); } } } };
var app =new Vue({
el:"#app",
data:{
color:‘red‘,
},
methods:{
},
components:{
selfcomponent
}
});
</script>
<div id="app"> <selfcomponent ></selfcomponent> </div>
以上實現的效果是,在輸入框輸入顏色信息,例如:red,#ddd.....組件中的信息,會隨著你輸入的信息變色
當然也可以全局定義指令:
Vue.directive("mydirective",function(el,pra,a){ console.log(el);//將元素標簽輸出 console.log(pra);//議對象的形式輸出,自定義指令的信息,(包括我們傳入的值) console.log(a);//以對象的形式輸出,vue虛擬節點信息 //console.log(document.getElementsByTagName("li")[0].parentNode); el.style="color:"+pra.value; });
vue怎麽自定義指令??