vue自定義指令directive

vue中指令分爲全局指令和局部指令

先來看全局自定義指令：

第一個參數是指令的名字，第二個參數能夠是函數也能夠是對象，先來看函數：

函數中接收三個參數：

el在這裏是input元素

bindings裏是一些綁定信息：

其中expression是指綁定的變量名字，這裏是content

name是指令名字

value是綁定數據的值，上面content爲空，因此目前value爲空

 

v-slice上還能夠寫修飾符

還能夠傳參：

vnode虛擬節點：

vnode中contex是vue實例，其中的content是vue中的content值，即經過vnode.context拿到vue實例

小demo：規定input框中只能輸入5位

再利用對象的形式實現：

bind + update 等於以前的函數

第三個對象：（不經常使用）

 

完善一下：在這個demo中用到兩個指令，v-slice和v-model ，不太合適，因此要v-slice本身實現雙向數據綁定：

此功能實現了，可是當data中content值被提早設置後，出現此狀況

因此取value值時應先對其進行截取

又發現content值很長

截取想要是長度，可根據

v-slice:9.number這個屬性

這裏限制9位數

 

在控制檯更改content值：

發現input中的值沒變。要想同步更新，需寫在update中

 

增長功能：.number時不能有字母出現

update中也要作處理

局部指令：