[Vue學習筆記]（三）Vue指令（上） — v-text, v-html, v-if, v-show, v-for
指令是vue中的精髓，透過指令我們可以更方便去操作頁面中的元素，在本篇將會介紹基本vue的指令， v-text, v-html, v-if, v-show, v-for的使用方法。
ㄧ、基本指令
（一） v-text / v-html
- v-text
v-text用來「直接」顯示data中資料的內容，與內插{{}}的功能是ㄧ樣的，只不過v-text會更新整塊標籤的內容（包含本身），而{{}}則能更新標籤內的局部內容，這邊比較複雜，透過下面範例可以看到差別。
- v-html
v-html與v-text的差別是，v-text是將內容原封不動地顯示出來，v-html則是可以渲染文本中Html的內容。但我們會盡量避免使用v-html，因為如果使用者將v-html的內容改成js的檔案，就能藉而去操作系統的資料，可能會帶來XSS攻擊。
如下列程式碼，我們新增了三種標籤，v-html，v-text和內插表示。
上面可以看到，
- v-html將note的內容直接渲染出來
- v-text將note的內容原封不動顯示出來，並直接忽略<i>標籤
- {{}}與v-text不同的是，他有保留<i>標籤，因此字體為斜體
（二） v-cloak
v-cloak算是一個讓用戶體驗更好的指令，當我們網路很慢時，或者頁面加載完畢但沒有初始化得到 vue 實例時，DOM中的{{}}會顯示出來，這樣就很難看了，因此v-cloak + css能幫助我們在Vue實例化之前先給元素新增一個樣式，常常會使用none這個樣式。
<div id="app" v-cloak>
{{ message }}
</div><script>
var app = new Vue({
el:'#app',
data:{
message: 'HelloWorld'
}
</script>
這樣我們就加上了v-cloak指令，但其實尚未有任何作用，此時只要增加一句CSS就可以解決這個問題。
[v-cloak]{
display: none;
}如此一來，在Vue尚未被實例化之前，#app這塊區域並不會顯示出來。
（三） v-once
v-once與v-cloakㄧ樣都不需要運算式，功能是：
加了v-once的元素、標籤或節點只會被渲染一次，之後就變成靜態內容，並不會隨著data的變動而改變。
<div id="app" v-once>
{{ message }}
</div><script>
var app = new Vue({
el:'#app',
data:{
message: 'HelloWorld'
}
</script>
二、 條件繪製指令
（ㄧ）v-if , v-else-if, v-else
Vue的條件指令可以根據運算式的值在DOM中繪製或銷毀元素，例如：
<div id="app">
<p v-if="status === 1">當status為1時顯示此行</p>
<p v-else-if="status === 2">當status為2時顯示此行</p>
<p v-else>否則顯示這行</p>
</div><script>
var app = new Vue({
el:'#app',
data:{
status: 1
}
</script>
由於data中的status為1，所以只會顯示「當status為1時顯示此行」這段訊息。
v-if = “JS運算式”，雙引號的內部是放js的運算式，可以放入：
- status > 1
- status < 1
- status != 1
等等運算式，使用方法很直覺就不多敘述，值得注意的是，若v-if裡面的內容有很多行，則可以添加vue內建的標籤template來使用：
則顯示：
ㄧ二三
（二）v-show
v-show的功能跟v-if很相似，不過它是改變元素的CSS的display屬性，當v-show的值為false，元素則會隱藏，檢視DOM結構會看到元素上嵌入了display:none;
例如下列程式碼：
<div id="app">
<p v-show="status === 1">當status為1時顯示此行</p>
</div><script>
var app = new Vue({
el:'#app',
data:{
status: 2
}
</script>
結果為：
<p style="display: none;"> 當status為1時顯示此行</p>v-if vs v-show
雖然這兩者的功能類似，但v-if才是真正的條件繪製，它會真的去銷毀或重建元素及綁定的事件，如果運算式為false，一開始元素就不會被繪製，但v-show都會將元素編譯，只是加了CSS的屬性。
使用時機：
- 如果元件會頻繁被切換-> v-show
- 不經常變換的場景-> v-if （負擔較大）
三、 清單指令 v-for
v-for能將一個陣列或物件的每個元素做循環顯示，可以結合in來使用：
（一）v-for 渲染陣列
<div id="app">
<ul>
<li v-for="(val,key) in arr">{{val}}---{{key}}</li>
</ul>
</div><script>
var app = new Vue({
el:'#app',
data:{
arr: ['a', 'b', 'c']
}});
</script>
結果如下：
語法為
v-for = "(值 , key) in 所屬陣列或物件"（二）v-for 渲染物件
<div id="app">
<ul>
<li v-for="(val,key) in ">{{val}}---{{key}}</li>
</ul>
</div><script>
var app = new Vue({
el:'#app',
data:{
obj: { id: 1, name: 'Jessica', sex: 'F' }
}});
</script>
(三）渲染物件+陣列
這個用法比較常使用，渲染一個物件陣列中的所有物件。
<div id="app">
<ul>
<li v-for="(brand,key) in brands">{{brand.name}}---{{key}}</li>
</ul>
</div><script>
var app = new Vue({
el:'#app',
data:{
brands:[ { name: 'addidas'},
{ name: 'nike'},
{ name: 'nubalance' }]
}
});
</script>
本篇文章就介紹到這邊，下一篇文章會介紹稍微難一點的Vue指令，也是比較重要的指令，大家加油～
我是Andy，謝謝你看完這篇文章，如果文章有幫助到你的話，希望不吝於幫我拍手 🙌🙌
