二、自定義指令的鉤子函式
vue 提供了自定義指令的5個鉤子函式：
注意：
除 update 與 componentupdated 鉤子函式之外，每個鉤子函式都含有 el、binding、vnode 這三個引數
在每個函式中，第乙個引數永遠是 el， 表示被繫結了指令的那個 dom 元素，這個el 引數，是乙個原生的 js 物件，所以vue 自定義指令可以用來直接和 dom 打交道
binding 是乙個物件，它包含以下屬性：name、value、oldvalue、expression、arg、modifiers
oldvnode 只有在 update 與 componentupdated 鉤子中生效
除了 el 之外，binding、vnode 屬性都是唯讀的
鉤子函式說白了也就是生命週期，即當乙個指令繫結到乙個元素上時，這個指令內部有5個生命週期事件函式。接下來建立乙個案例來看看這幾個鉤子函式的觸發情況：
這是一段文字結果：export default ,
inserted () ,
update () ,
componentupdated () ,
unbind () }}
}
頁面渲染時，觸發了bind和inserted函式。那麼另外三個鉤子函式什麼時候會觸發呢？
關於 update 的官方解釋：
update：所在元件的 vnode 更新時呼叫，但是可能發生在其子 vnode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。
update呢？如下通過 v-show 來切換元素顯示隱藏：
這是另外一段文字預設還是觸發toggle
export default
}}
bind和inserted，當點選按鈕切換元素的 display 時，結果如下：
即：改變元素的樣式的時候觸發了update和componentupdated函式。如果使用 v-if 會觸發哪個事件呢？
這是另外一段文字結果：toggle
發現unbind被觸發，因為 v-if 是刪除或者重建 dom 元素，當指令繫結的元素被銷毀時，會觸發指令的unbind事件，新建顯示仍是觸發bind和inserted。
總結：
舉幾個應用場景的栗子
（1、輸入框自動獲取焦點(官方示例)。
（2、點選下拉列表以外的區域隱藏選單。
（3、輸入的郵箱、**的校驗。
上面這幾個場合，在做專案的時候可以用其他方法代替，但是 vue 自定義指令能做到一處定義，全域性呼叫，使得**簡潔高效，更便於維護。
指令的註冊方式和「過濾器」「混入」「元件」註冊的方式一樣都分為兩種：一是全域性註冊，二是區域性註冊。
三、全域性指令
// 給元素新增隨機背景注意：在定義的時候，指令的名稱前面不需要加 v- 字首，在呼叫的時候，必須在指定的名稱前加上 v-字首來進行呼叫vue.directive('bgcolor',
})
四、區域性指令
// 和data, methods同級我個人更傾向於使用全域性註冊的方式，因為既然已經使用了自定義指令，應該是通用的可復用的。所以提供整個專案使用的指令才更有價值，而不僅僅只限於某個元件內部。如果單一地方使用直接把功能摟出來就行了，何必費這力氣。methods: {},
directives: }}
五、帶引數的自定義指令
vue.directive('bgcolor',
})
六、函式簡寫
如果想在 bind 和 update 時觸發相同行為，而不關心其它的鉤子，可以這樣寫:
// 全域性七、應用例項vue.directive('bgcolor', function (el, binding) )
// 區域性
directives:
}
熟悉指令的建立方式與引數之後，我們就用它來建立兩個實際案例。
通過指令來實現點選空白處子選單隱藏的功能，具體**如下：
// clickoutside.js在元件中使用：export default // 定義乙個私有變數，方便在unbind中可以解除事件監聽
self.documenthandler = (e) =>
if (binding.value)
return true
}document.addeventlistener('click', self.documenthandler)
},unbind (el)
}
子選單 ...自定義指令來優化的載入：在載入過程中，未載入完成時使用灰色背景佔位，載入完後直接顯示
// 全域性註冊vue.directive('imgurl', function (el, binding)
})
Vue框架 Vue指令
v cloak 避免螢幕閃爍 class屬性 重點 style屬性 了解 案例 123 data methods 12 3 事件處理 3 v if有家族 v if v else if v else if控制顯隱 你是第1個p 你是第2個p 你是第3個p 案例綠 藍 注意 v for遍歷要依賴於乙個所...
scrapy使用自動義引數的方法
關於scrapy使用自定義引數主要是在命令上用crawl控制spider的同時加上 a，從而做到自定義引數，例如 scrapy crawl spidername a symbol symbol在spider中加入以下部分 def init self,symbol args,kwargs super ...
Vue 回顧之指令（關於input自動聚焦的問題）
用了vue也一年多了，雖然對大部分內容都比較熟悉，但有些用法可能會起到意想不到的作用。今天在做乙個關於 的需求，要求是每次點選編輯按鈕顯示編輯框，要求自動聚焦。一開始想到了autofocus屬性，結果發現每次只有重新整理頁面的第一次會生效，之後無論怎麼點選都不能自動聚焦，於是網上查了很多資料，最終問...