Vue的指令(directive)是一個很強(qiáng)大和靈活的工具,它讓我們可以在模板中綁定一些數(shù)據(jù),并做出一些特定的行為,比如操作DOM元素,處理事件等等。其中,directive中的data也是非常重要的一部分,它使我們能夠在directive內(nèi)部使用一些特定的數(shù)據(jù)來實現(xiàn)需求。
Vue.directive('my-directive',{ bind:function(el,binding,vnode){ console.log(binding.value); } });
在上面的代碼中,我們定義了一個名為“my-directive”的directive。在directive的bind鉤子函數(shù)中,我們可以通過binding.value來獲取從模板中傳遞進(jìn)來的值。
在上面的代碼中,我們在模板中使用了v-my-directive指令,并傳遞了一個msg值。在directive的bind函數(shù)中,我們可以將msg值打印出來。
另外,在directive中還可以通過data屬性來獲取一些特定的數(shù)據(jù),這些數(shù)據(jù)可以在directive內(nèi)部使用。
Vue.directive('my-directive',{ data:function(){ return { count:0 } }, bind:function(el,binding,vnode){ this.count++; console.log(binding.value+'-'+this.count); } });
在上面的代碼中,我們在directive中定義了一個data對象,包含了一個count屬性。在bind函數(shù)中,我們每次使用指令都會讓count加1,并打印出傳遞進(jìn)來的值和count值。
在上面的代碼中,我們使用了兩次v-my-directive指令,并分別傳遞了msg1和msg2值。在directive的bind函數(shù)中,我們將會打印出msg1-1和msg2-2兩個結(jié)果。