vue.js內部自定義指令與全局自定義指令的實現詳解（利用directive）

2019-11-19 16:06:45

字體：大中小

來源：轉載

供稿：網友

前言

大家都知道在Vue中，我們平時數據驅動視圖時候，內部自帶的指令有時候解決不了一些需求，這時候，Vue給我們一個很好用的東東來實現自定義指令，這就是directive。下面話不多說了，來一起看看詳細的介紹：

directive

這個單詞是我們寫自定義指令的關鍵字哦

自定義指令為我們提供了幾個鉤子函數，這時候你一定好奇什么是鉤子函數，說簡單點，就是集中表現狀態

bind: 只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作。
inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于 document 中）。
update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。
componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。
unbind: 只調用一次，指令與元素解綁時調用。

下面我們開始上代碼，讓我們更好的理解自定義指令怎么做

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app">  <div class="ab" v-css="{'color':'red','font-size':'30px'}"> hello </div> <input type="text" v-focus> </div> </body></html>

在html中，我們看到了兩個指令v-css和v-focus

我們自定義指令時候，一定前面要帶上v-

Vue.directive("css",{ //鉤子函數 ,el就是當前元素 inserted(el,binding){ //el綁定的元素本身 //binding就是css指令里面的的對象元素 let styleobj=binding.value,arr=[]; for(let key in styleobj){  arr.push(key+":"+styleobj[key])  } arr=arr.join(";"); el.style.cssText=arr; }, bind(el,binding) { //指令綁定在元素上時候執行，只執行一次 }}); new Vue({　　 el:'#app', data:{  show:true }, directives:{ focus:{  inserted(el,binding){  //el綁定的元素本身  //binding就是css指令里面的的對象元素  el.focus();  }  } } });

在js里面我們可以看到

Vue.directive("css",{}）

我們在 new Vue外部定義了這樣一段代碼,這就是我們全局自定義指令的模板方式