什麼時候會用到自定義指令？除了原本的默認內置指令，雖然 Vue 的元件是可以複用的，但有時候我們仍然需要對普通 DOM 元素進行不同效果的操作，這時候就會用到自定義指令。在 Vue 內建的指令無法滿足需求或需要一個特別的功能時，就可以自己攥寫自定義指令，好處是可以重複使用。
自定義指定有兩種：全域自定義指令與局部的自定義指令。有時候我們在一個頁面裡可能會引入或增加好幾個 Vue 的實例，如果是全域的自定義指令，表示所有的 Vue 實例都可使用這個指令，但如果是局部自定義指令，需要指定能使用這組指令的 Vue 實例。
之前的幾篇都有介紹此表前半段的 Vue 內建指令用法，這裡要介紹最後面的兩個內建指令ref和v-cloak
先來 codepen 看看：Vue.Js ref 唯一識別 與 v-cloak 隱藏表達式
| 指令 | 作用 | Vue |
|---|---|---|
| v-if | 如果為 true, 當下的標籤元素才會輸出渲染到頁面 |
|
| v-html | 更新元素的 innerHTML |
|
| v-else | 如果為 false, 當前標籤才會輸出到頁面 |
|
| v-show | 通過控制 display 樣式來達到控制顯示和隱藏效果 |
|
| v-for | 遍歷陣列或物件，渲染出列表 | |
| v-text | 更新元素的 textContent |
|
| v-on | 綁定事件監聽, 一般簡寫為@ |
|
| v-bind | 強制綁定解析表達式, 可以省略 v-bind 一般簡寫為: |
|
| v-model | 雙向資料綁定 | |
| ref | 為某個元素註冊一個唯一標識, vue 物件通過 $refs 屬性訪問這個元素物件 |
|
| v-cloak | 使用它防止閃現表達式, 與 css 配合: [v-cloak] { display: none } |
有時我們拿到一包資料，需要透過過濾器來拿到我們想要的資料格式。例如我們可以透過一些外來的函式庫，拿到一些資料，但如果想依照我們想要的格式顯示，就必須過濾我們要的資訊，再依我們用的函式庫規則，寫成想要顯示的格式。
先來 Codepen 看一下效果 Vue.Js Filters 過濾器
過濾器的功能是要對顯示的資料進行特定的格式化後再顯示，且過濾器並不會去改變原本的資料，而是產生一個新的對應的資料格式。
原本在一般頁面要製造一些簡單的動畫效果，只要掌控 class 和 Css 就好了，但是如果要在框架內做這些動態效果，如何做？
在 Vue 裡有它的特殊做法，必須把享有動態效果的元素，以<transition>的標籤包起來，並給予一個name的屬性，然後在 CSS 裡，以這個name來作為 class 的名稱，並加上動畫不同時期的後綴，來達到動態效果。
先來看一下 Codepen VueJs Transitioning Single Elements/Component 過渡與動畫效果
在 Vue 所使用到的整個生命週期方法，可以想像成是一齣戲要上演，哪一個主角需要在哪個時候上場、哪個配角需要在哪個時刻退場，都需要有邏輯才可以讓故事產生連貫性與流暢。
Vue 的生命週期方法雖然共有八個，但並不是每個都需要用到，就像在戲裡，有些橋段不出現、配角不出現也不會影響整齣性的故事性。
把 Vue 的生命週期分為三個大階段會比較容易理解：第一階段的「初始化顯示」、第二階段「更新狀態顯示」、第三階段「死亡、銷毀 Vue 實例」，每個階段都有對應的生命週期 callback 方法，這些生命週期的方法也稱為「生命週期鉤子」掛載在不同時期。 Vue 的生命週期比 React 還要複雜一些。
為了避免 this 的混淆，這些生命週期的方法都是回調方法(callback)，所以最好一律都寫成箭頭函式，讓 this 直接指向父級，也就是 vue 實例本身。
使用 Vue 資料雙向綁定的特性，做表單資料的自動收集。
先去 codepen 看看：Vue.js Form Input Bindings 表單輸入綁定
通常在處理表單的時候，在填完表單時，通常以<from>標籤內的action屬性來傳送，但在 Vue 裡，可以先把<from>的預設submit動作取消，並以監聽的方式(v-on)處理：@submit.prevent(方法)。當我們按下送出表單鍵時，就會去執行handleSubmit這個方法，在方法裡在指定我們希望如何處理表單內的資料就可以了。
主要以v-model來做資料的雙向綁定，達到自動收集填入資料的目的。
表單裡有單純的輸入(text/textarea)、單選項(radio)、複選項(checkbox)和選單(select)，實例中我們必須先在data裡初始化我們會用到的值，這些初始值則是對應到 HTML 表單標籤裡的value，例如，如果我們希望預設的radio選項是 female，在data裡的sex初始，給female就可以了，以此類推。
事件處理在網頁上的應用非常廣，無論是我們滑鼠移動、按鍵輸入、或是在網頁上點擊某一個區塊，都可以因為這個互動，讓網頁做些事。但在程式裡，其實就是瀏覽者做了某些事(事件監聽)
，然後我們要給出什麼反應(事件觸發)，例如，點一下按鍵，我們要程式去做某些事，例如呼叫某支函式要它做些什麼，或者，我們希望能取到瀏覽者所點擊到的值。
Codepen : Vue.js Event Handling 事件處理
如何把現有的陣列，在做完過濾後存在另一個新的陣列裡？如何讓頁面即時顯示這個新的陣列列表？要產生新陣列的條件有哪些？原本的陣列、輸入框輸入了什麼資料？只要拿得到這兩個資料，就可產生新的過濾後的陣列。
我們來看一下，該如何進行？ 或是先來看一下完整的原始碼
輸入框先以v-model綁定資料，這個資料是過濾的條件searchName，需要去實例初始化它。
過濾條件後所產生的新陣列filterPersons則是透過searchName和persons陣列所計算產生出來的，所以我們需要一個在實例中的計算屬性 computed 的方法，去產生新的陣列filterPersons。這個方法的回傳值即是顯示的結果。
將原本的陣列persons套用filter()方法，再以indexOf()方法，用searchName !== -1ˋ 這個條件去查找的結果，存入新陣列fPersons中。
如果要把一個陣列或物件渲染到畫面，在原生的 JS 我們可以用迴圈或 forEach 以遍歷的方式將陣列的資料顯示，如果用 ES6 就可用 for…of 循環語句。
在 Vue 裡要遍歷陣列的方法並不難，只是遍歷陣列和物件的方式稍有不同。
去 codepen 看看效果
陣列列表顯示的方法是使用v-for指令，在遍歷的時候語法為<li v-for="(p, index) in persons" :key="index"></li>
在使用v-for時要記得加上:key 讓單筆的屬性有唯一值，這個陣列的唯一值是 index。
在上面的語法範例，可以想成是<li v-for="(單個陣列, index索引值) in 陣列" :key="index唯一索引值"></li>。