Vue.js-內建指令
學習筆記：內建指令
內建指令
基本指令
v-cloak
v-cloak
不需要表示式，它會在Vue例項結束編譯時從繫結的HTML元素上移除，經常和CSS的display: none;
配合使用：
<div id="app" v-cloak>
{{message}}
</div>
當網速較慢、Vue.js檔案還沒載入完時，在頁面上會顯示{{message}}
的字樣，直到Vue建立例項、編譯模板時，DOM才會被替換，所以這個過程螢幕有閃。只要加一句CSS就可以解決這個問題：
[v-cloak] {
display: none;
}
v-cloak是一個解決初始化慢導致頁面閃動的最佳實踐，對於簡單的專案很實用。
在工程化的專案中，專案的HTML結構只有一個空的div
元素，剩下的內容都由路由掛載不同元件完成，這時不再需要v-cloak
。
v-once
v-once
是一個不需要表示式的指令，作用是定義它的元素或者元件只渲染一次，包括元素或元件的所有子節點。首次渲染後，不再隨資料的變化重新渲染，將被視為靜態內容。
v-once
在業務中很少使用，如果需要進一步優化效能時，可能會用到。
條件渲染指令
v-if
、v-else-if
、v-else
Vue.js的條件指令可以根據表示式的值在DOM中渲染或銷燬元素/元件。
v-else-if
要緊跟v-if
，v-else
要緊跟v-else-if
或v-if
，表示式的值為真時，當前元素/元件及所有子節點將被渲染，為假時被移除。
如果一次判斷的是多個元素，可以在Vue.js內建的<template>
元素上使用條件指令，最終渲染的結果不會包含該元素。
Vue在渲染元素時，處於效率考慮，會盡可能地複用已有的元素，而非重新渲染。
<p data-height="265" data-theme-id="0" data-slug-hash="KewYmd" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="條件渲染指令" class="codepen">See the Pen條件渲染指令 by whjin (@whjin ) onCodePen .</p>
<script async src="https://static.codepen.io/ass... ;></script>
示例中鍵入內容後，點選切換按鈕，雖然DOM改變了，但是之前在輸入框鍵入的內容並沒有改變，只是替換了placeholder
的內容，說明<input>
元素被複用了。
使用Vue.js提供的key
屬性，可以讓你自己決定是否要複用元素，key
的值必須是唯一的。
<input type="text" placeholder="輸入使用者名稱" key="name-input">
給兩個<input>
元素都增加了key
後，就不會複用了。切換型別時鍵入的內容也會被刪除，不過<label>
元素仍然會被複用，因為沒有新增key
屬性。
v-show
v-show
的用法與v-if
基本一致，只不過v-show
是改變元素的CSS屬性display
。
當v-show
表示式的值為false
時元素會隱藏，DOM結構元素上載入了內聯樣式display:none;
。
v-show不能在<template>上使用。
v-if
與v-show
的選擇
v-if
和v-show
具有類似的功能，不過v-if
才是真正的條件渲染，它會根據表示式適當地銷燬或重建
元素及繫結的事件或子元件。
若表示式初始值為false
，則一開始元素/元件並不會渲染，只有當條件第一次變為真時才開始編譯。
而v-show
只是簡單的CSS屬性切換，無論條件真與否，都會被編譯。
相比之下，v-if
更適合條件不經常改變的場景，因為它的切換開銷相對較大，而v-show
適用於頻繁切換條件。
列表渲染指令v-for
基本用法
當需要將一個數組遍歷或列舉一個物件迴圈顯示時，就會用到列表渲染指令v-for
。它的表示式需結合in
來使用，類似item in items
的形式。
列表渲染也支援用of
代替in
作為分隔符，它更接近JavaScript迭代器的語法：
<li v-for="book of books">{{book.name}}</li>
v-for
的表示式支援一個可選引數作為當前項的索引。
<li v-for="(book,index) of books">{{index}} - {{book.name}}</li>
分隔符in
前的語句使用括號，第二項就是books
當前項的索引。
與v-if
一樣，v-for
也可以用在內建標籤<template>
上，將多個元素進行渲染。
除了陣列外，物件的屬性也是可以遍歷的。
遍歷物件屬性時，有兩個可選引數，分別是鍵名和索引：
<div id="app">
<ul>
<li v-for="(value,key,index) of users">
{{index}} - {{key}} - {{value}}
</li>
</ul>
</div>
v-for
還可以迭代整數：
<div id="app">
<span v-for="n in 10">{{n}}</span>
</div>
陣列更新
Vue的核心是資料與檢視的雙向繫結，包含了一組觀察陣列變化的方法，使用它們改變陣列也會觸發檢視更新：
push() pop() shift() unshift() splice() sort() reverse()
使用以上方法會改變被這些方法呼叫的原始陣列。
以下方法不會改變原陣列：
filter() concat() slice()
它們返回的是一個新陣列，在使用這些非變異方法時，可以用新陣列來替換元素組。
Vue在檢測到陣列變化時，並不是直接重新渲染整個列表，而是最大化地複用DOM元素。替換的陣列中，含有相同元素的項不會被重新渲染，因此可以大膽地用新陣列來替換舊陣列，不用擔心效能問題。
需要注意的是，以下變動的陣列中，Vue時不能檢測到的，也不會觸發檢視更新：
app.books[3]={}
app.books.length=1
解決第一個問題可以用兩種方法實現同樣的效果，第一種是使用Vue內建的set
方法：
Vue.set(app.books, 3, {
name: '《CSS祕密花園》',
author: '無名氏'
});
如果是在webpack中使用元件化的方式，預設是沒有匯入Vue的，這時可以使用this.$set
。
另一種方法：app.books.splice(3,1,{})
過濾與排序
如果不希望改變原陣列，想通過一個數組的副本來做過濾或排序的顯示時，可以使用計算屬性返回過濾或排序後的陣列。