Vue 的 v-if龄捡，v-show卓嫂，v-for 指令
文檔警告 Warning：
由于做筆記沒有注意到 Vue 官方文檔中的提示、書寫規(guī)范聘殖，之前在 Vue 實(shí)例對(duì)象中晨雳，data 的寫法是有誤的。
從本頁文檔開始將使用通行寫法奸腺。
When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is
created we can call it to return a fresh copy of the initial data.
v-if 與 v-show
按照慣例餐禁，我們依然從一個(gè)需求引入我們的知識(shí)點(diǎn)：
頁面上有一個(gè)按鈕，我想讓他控制某個(gè)內(nèi)容元素是否顯示洋机，在 Vue 我該怎么做呢？
<div id="root">
<div>Hello world</div>
<button > show or hide </button>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
show: true
}
},
methods: {
// ...About button action
}
})
</script>
- 我們定義了一個(gè)布爾變量洋魂，用于表示是否顯示內(nèi)容的布爾邏輯狀態(tài) 即 true or false
- v-if 指令 和 v-show 指令正需要一個(gè)這樣的布爾值绷旗，它們可以將邏輯值的真假綁定在元素上，以此決定元素是否顯示副砍。
- 還記得我們的 button 點(diǎn)擊事件怎么寫么衔肢？
<button @click="handleClick"> </button>
<!-- 此處簡(jiǎn)寫 Vue 實(shí)例對(duì)象中的 method 部分 -->
<script>
methods:{
handleClick: function(){
this.show = !this.show //取反
}
}
</script>
那 v-if 和 v-show 有什么區(qū)別呢 ？我們按下 F12豁翎，打開集成查看器一探究竟吧角骤！
當(dāng)我們使用 v-if 時(shí)：
<div v-if="show">Hello world</div>
<button @click="handleClick"> show or hide </button>
當(dāng)我們點(diǎn)擊按鈕后：
- 由此可見，v-if 直接改變了文檔內(nèi)容心剥，將該元素從 DOM 中去除掉了邦尊。
而當(dāng)我們使用 v-show 時(shí)：
<div v-show="show">Hello world</div>
<button @click="handleClick"> show or hide </button>
當(dāng)我們點(diǎn)擊按鈕后：
- 由此可見，v-show 是通過添加了 CSS 屬性 display: none; 來隱藏元素的优烧。
根據(jù)情況而定：
- 如果元素?cái)?shù)量非常多時(shí)蝉揍，那么頻繁地操作 DOM 增刪顯然不是一個(gè)好的選擇，所以更多選擇 v-show
- 如果顯示和隱藏并不那么頻繁畦娄，那么 v-if 也是可以的又沾。
v-for
學(xué)過一個(gè)或多個(gè)編程語言后弊仪，對(duì) for 一定不陌生，應(yīng)該幾乎是所有的編程語言都把 for 定為了一個(gè)和循環(huán)相關(guān)的關(guān)鍵字杖刷，當(dāng)然在 Vue 中也沿用了這種標(biāo)示励饵。
比如我有一組數(shù)據(jù)想要羅列展示，顯然手打一行一行地敲成 HTML 文檔內(nèi)容是一個(gè)非常麻煩低效的選擇滑燃。
那么學(xué)習(xí)了 Vue 役听，我們可以這樣做：
<div id="root">
<ul>
<li v-for="item of list"> {{ item }}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data() {
return {
show: true,
list: ['Head title', 'Main context', 'End message']
}
}
})
</script>
語法解析：類同與 Python 的 for 循環(huán)，除開 in 變成了 of 以外不瓶，仍然是 for 取出的單項(xiàng) in 項(xiàng)目總集合 的形式禾嫉， 取出的單項(xiàng)是可以作為 插值表達(dá)式 中的數(shù)據(jù)使用的哦！
顯而易見蚊丐，data 中對(duì)應(yīng) list 的數(shù)據(jù)總集合一定要是某種可迭代的數(shù)據(jù)集合類熙参，比如數(shù)組、字典等麦备。
Attention 1： 當(dāng)我們使用了 v-for 孽椰，為了盡可能地提升渲染效率，我們都應(yīng)該加上 :key 指令凛篙，:key 指令必須和一個(gè)永不重復(fù)的值綁定黍匾，一般不使用 item，因?yàn)?item 很可能重復(fù)呛梆。
-
Attention 2：大多數(shù)情況下會(huì)使用循環(huán)次數(shù)下標(biāo)锐涯，寫成：
<div v-for="(item, index) of list" :key="index"> {{ item }} </div>但這并不是最終的完美選擇，但是當(dāng)需要做排序等這類頻繁改變列表元素位置的操作時(shí)填物，index 作為 key 值會(huì)被打亂纹腌。
思考題： 那么請(qǐng)問這個(gè)最終解決方案應(yīng)該是什么呢？
