學習内容：
（1）如何去編寫 Vue 裡面自定義的指令
自定義的指令我們把它叫做directive。
比如說在Vue裡面我寫一個input标簽，
比如說我希望在頁面一加載的時候，input标簽就能處于一個focus的狀态，我們可以怎麼寫呢？
我們可以這麼去寫：
我們可以寫個mounted，
然後在這裡我們要給它加一個 ref 巴拉巴拉，
在 Vue 裡面，如果我們對 dom 做一些簡單的處理操作的時候，我們可以用refs去寫這樣的代碼，這是沒問題的，
可是如果這麼寫代碼，這種自動的聚焦的邏輯其實沒法被複用，比如對 dom 的一些操作，其實我們可以通過封裝一些自定義指令來實作dom 的邏輯的一些複用，
比如說我再寫一個input框 叫input1：
那麼其實你要再去寫一個refs點input1點focus，把這個邏輯再寫一遍，
但是如果我們用指令可能就不需要這麼去寫了，【指令能解決代碼複用】
我們去寫一個指令，怎麼寫？
我們來定義一個全局指令
app.directive("fouc")
。
然後指令的名字，我們把它叫做focus，這裡面我們可以接一些東西，這裡可以寫一些生命周期函數，比如說mounted，
mounted這個函數可以接受一個el元素，在這裡我可以讓el點focus一下就可以了：
其實通過這種文法我們定義了一個focus指令，那麼我在input框上，如果想用這個focus指令，我就可以非常簡單的去寫我們的代碼了，直接v-focus就可以了:
我們先不管這個邏輯到底是怎麼一回事，我們先把 v-focus，我們自定義的 Vue 的指令寫好了之後到浏覽器打開，
然後我們重新整理一下頁面，大家會發現同樣的一個自動聚焦的效果也出現了:
這個自定義指令是怎麼實作的？
首先我定義了一個叫做focus 這樣的自定義指令，我如果想用它怎麼用?
v-focus 就可以了。v-focus 就是使用我自定義的 focus指令，它會幹一件事情，它會有一個生命周期函數叫做mounted，
指的是當我指令挂載到某一個dom 元素上的時候，當這個元素被挂載到頁面之後，mounted 生命周期函數會自動的執行，執行的時候會接收第一個參數叫做el，就是目前的 input元素，
我等它挂載之後它自動的執行，我就把el點focus執行一下。那麼input框就自己實作了一個聚焦的效果，是以這就是自定義指定的基礎的實作。
當然這種自定義指令的定義它是一個全局的自定義指令：
也就是說如果你這麼去定義在任何地方都可以使用v-focus，你也可以定義一個局部的自定義指令，我們可以寫一下。
在這裡我定義一個常量叫做directives，然後讓ta等于一個花括号{}，
裡面我們寫一個focus這樣的指令：
我定義了一個局部的定義指令，但是我在 app 裡面并沒有使用局部的 app 指令，是以現在v-focus應該是不好用的。我們刷一下:
說created of undefined，因為什麼呢？
因為你v-focus指令，現在你并沒有去使用局部指令，但如果你想使用局部指令，你怎麼去使用？
很簡單，你隻要在這寫一個directives，讓它等于誰？等于你上面定義的 directives 就行了：
如果兩個鍵和值都一樣，直接寫一個directives就可以了：
這樣定義的指令我們把它叫做一個局部指令，如果你想用這個指令的話，在一個元件或者一個執行個體裡面，你需要通過directives冒号指定你對應的指令來去使用:
如果你不指定的話，你是沒法用v-focus的。
它和局部元件以及我們之前講的局部 mixin 的邏輯基本上是一緻的。
在指令裡面，我們除了有mounted這樣的生命周期函數，其實還有很多其他的生命周期函數，
比如說beforeMounted，beforeMounted指的是當你這個元素即将挂載到頁面的時候，還沒有挂載的時候，這個時候會執行beforeMounted這樣的内容，比如說我可以列印一下:
然後還有beforeUpdate。我們在這寫一個beforeUpdate，還有一個updated，它指的是當你 input元素重新去更新渲染的時候，還沒有渲染之前，我這塊會輸出beforeUpdate，
如果已經重新渲染了，我會輸出updated:
這塊我們做一個實驗:
我在外層比如說包一個div 巴拉巴拉，
然後我們刷一下頁面：
它說我不能直接去這麼用的，
這個時候頁面會更新，頁面更新的話，你的剛才顯示的input它會隐藏，會重新的去渲染，那麼在重新渲染的時候beforeUpdate，也就是說在重新渲染之前，beforeUpdate會先執行，updated會後執行。
當然還有的時候，你會把這樣的一個 dom 直接銷毀對吧，
或者說直接的手動的對這些div元素或者input元素做一些銷毀。
那麼當這個元素即将被銷毀的時候，有一個生命周期函數叫做beforeUnmount 會執行:
beforeUnmount 當它真正的被銷毀之後，有一個unmounted這樣的生命周期函數會被自動的執行:
我們怎麼去試驗一下，我們可以把v-show改成為v-if:
如果是v-if，input框應該會在它等于false的時候直接被銷毀。
那麼理論上 beforeUnmount 它應該會被執行，我們試驗一下，重新整理頁面，
然後我去調vm點巴拉巴拉：