自定義指令

2021-08-28 21:27:04 字數 1015 閱讀 9594

像v-if,v-show等,是vue已經內建的指令,我們也可以使用directive來自定義指令

其中的blue要被引號所包裹,不然會被識別為變數來進行查詢
全域性自定義指令

vue.directive('focus',

})vue.directive('color',

})

var vm=new vue(

},/*簡寫形式,代表我們這個demo寫在了bind和update這兩個之中

demo:function (el,binding)

*/

}})

定義是不需要新增v-字首,在使用時則需要新增v-字首

其中在物件方法中:

--元素是從記憶體渲染到頁面上的,

bind:function...

每當指令繫結到元素上的時候,會立即執行這個,且只執行1次

*在此上繫結的事件,在記憶體中的時候就已經被從裡(一般用於樣式的繫結處理)

inserted:function....

當元素插入到dom中的時候,會執行,且執行一次

*在記憶體到頁面上時,才做處理的(一般用於js的行為處理)

update:function...

當vnode(元件)更新的時候,會執行,可能會觸發多次

bind:function(el,binding,vnode,oldvnode)

其中:el:表示被繫結的那個元素,是個原生js物件,可以時候js的行為方法;

binding:乙個物件,裡面包含了name(不加字首的名字)、value(繫結的值)、expression(未處理的繫結值等等..)

vnode和oldvnode:虛擬節點

1231313

vue.directive('demo',

})

自定義指令

自定義指令有兩種方法 complieprovider.directive 指令名 function return restrict acem replace true,transclude true,template content return restrict acem replace true...

自定義指令

directives.js 存放 自定義標籤 strict require scope link 接收兩個引數 第乙個引數表示自定義指令的名稱 在頁面中使用 分隔單詞,在自定義指令中通過駝峰式命名 第二個引數表示自定義指令處理函式 返回值是乙個物件,用來描述我們自定義指令的 描述自定義指令的物件有一...

自定義指令

vue中有內建指令v model等 還可自定義指令 全域性指令 vue.directive focus 指令繫結時執行 inserted function el updated function 更新時執行 鉤子函式的第乙個引數指定為繫結該指令的dom元素區域性指令 var vm newvue js...