Vue 回顧之指令（關於input自動聚焦的問題）

用了vue也一年多了，雖然對大部分內容都比較熟悉，但有些用法可能會起到意想不到的作用。

今天在做乙個關於**的需求，要求是每次點選編輯按鈕顯示編輯框，要求自動聚焦。

一開始想到了autofocus屬性，結果發現每次只有重新整理頁面的第一次會生效，之後無論怎麼點選都不能自動聚焦，於是網上查了很多資料，

最終問題指向了vue的指令，因此先回過頭看看vue的指令部分。

vue指令

除了核心功能缺省內置的指令 (v-model和v-show)，vue 也允許註冊自定義指令。注意，在 vue2.0 中，**復用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 dom 元素進行底層操作，這時候就會用到自定義指令。舉個聚焦輸入框的例子，如下：

當頁面載入時，該元素將獲得焦點 (注意：autofocus在移動版 safari 上不工作)。事實上，只要你在開啟這個頁面後還沒點選過任何內容，這個輸入框就應當還是處於聚焦狀態。現在讓我們用指令來實現這個功能：

// 註冊乙個全域性自定義指令 `v-focus`
vue.directive('focus', 
})

如果想註冊區域性指令，元件中也接受乙個directives的選項：

directives: }}

然後你可以在模板中任何元素上使用新的v-focus屬性，如下：

好了，問題看似得到了解決。但在具體的專案中，我們在inserted中拿到的el可能不是input節點（比如直接使用了第三方元件庫），這時就需要遍歷el的childnode屬性，獲得我們

想要的input元素引用，從而呼叫focus方法。

至此，問題圓滿解決。