碼雲實時更新學習demo地址：https://gitee.com/dxl96/vuexuexi
VUE基礎篇（循環遍歷）
1、v-for
v-for 是vue標籤中指定for循環的指令，標籤對應的值的也就是類似python中for循環或者java中foreach的寫法
在vue中遍歷可以分爲三個部分：
1）遍歷數組
2）遍歷對象
3）數字迭代
1.1 遍歷數組
遍歷數組可以分爲兩種：
1）遍歷元素 ，格式 ： 元素 in 數組
2）遍歷元素和索引 ， 格式：(元素,索引) in 數組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環指令</title>
</head>
<body>
<div id="app">
<!-- ■【遍歷數組】-->
<!-- v-for是vue標籤中指定for循環的標籤，標籤對應的值的也就是類似python中for循環或者java中foreach的寫法
除了直接獲取到每個數組的元素，還可以獲得元素和索引值，(item,index) 對應 (元素,索引)-->
<li v-for="item in movies">{{item}}</li>
<hr>
<li v-for="(item,index) in movies">{{index}}-{{item}}</li>
<hr>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
movies: ['海王', '海爾兄弟', '火影忍者', '進擊的巨人'],
}
});
</script>
</body>
</html>
效果
1.2遍歷對象
遍歷對象可以分爲三種：
1）遍歷對象屬性值 ，格式 ： 屬性值 in 對象
2）遍歷對象屬性值和屬性名 ， 格式：(屬性值,屬性名) in 對象
3）遍歷對象屬性值和屬性名和索引， 格式：(屬性值,屬性名,索引值) in 對象 ，索引值按對象屬性順序默認從0開始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環指令</title>
</head>
<body>
<div id="app">
<!-- ■【遍歷對象】-->
<!-- v-for在遍歷對象時，如果只獲取一個值，那麼獲取到的是對象屬性值value-->
<li v-for="item in user">{{item}}</li>
<hr>
<!-- v-for在遍歷對象時，獲取兩個值，那麼獲取到的是對象屬性值value和屬性的名稱key-->
<li v-for="(item,key) in user">{{item}}-{{key}}</li>
<hr>
<!-- v-for在遍歷對象時，獲取三個值，那麼獲取到的是對象屬性值value和屬性的名稱key和屬性的順序索引index，索引默認從0開始-->
<li v-for="(item,key,index) in user">{{item}}-{{key}}-{{index}}</li>
<hr>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
user: {
name: "kobe",
age: 43,
height: 196
}
}
});
</script>
</body>
</html>
效果
1.3 數字迭代
數字迭代就是根據一個數字number的大小，默認循環number次，循環取出的元素值默認從1開始
格式：元素值 in 數字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環指令</title>
</head>
<body>
<div id="app">
<!-- ■【數字迭代】-->
<!-- 迭代數字，默認從1開始，這裏是循環5次，從1開始遞增-->
<li v-for="i in 5">這是第{{i}}次迭代</li>
<hr>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {}
});
</script>
</body>
</html>
效果
2、v-bind:key
●官方推薦我們在使用v-for時,給對應的元素或組件添加上一個key屬性。
爲什麼需要這個key屬性呢(瞭解) ?
口這個其實和Vue的虛擬DOM的Diff算法有關係
口這裏我們借用數組的插入數據時的方式來說明：
數組的插入就是需要插入的點更改爲插入的值，後面的元素依次後移
比如：當某一層有很多相同的節點時,也就是列表節點時,我們希望插入一個新的節點，我們希望可以在B和C之間加一個F, 默認執行起來是這樣的.即把C更新成F, D更新成C , E更新成D,最後再插入E,是不是很沒有效率？所以我們需要使用key來給每個節點做一個唯一標識，Diff算法就可以正確的識別此節點，找到正確的位置區插入新的節點。
所以一句話, key的作用主要是爲了高效的更新虛擬DOM，可以簡單理解爲數組和鏈表之間的插入效率對比
如圖（默認插入操作）：
v-bind:key 綁定的值要保證唯一性不可變化性，可以理解成sql中的主鍵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>循環指令</title>
</head>
<body>
<div id="app">
<!--
■【v-bind:key 的使用】：
●官方推薦我們在使用v-for時,給對應的元素或組件添加上一個key屬性。
口爲什麼需要這個key屬性呢(瞭解) ?
口這個其實和Vue的虛擬DOM的Diff算法有關係
口這裏我們借用React' s diff algorithm中的一張圖來簡單說明一下:
口當某一層有很多相同的節點時,也就是列表節點時,我們希望插入一個新的節點
口我們希望可以在B和C之間加一個F, Diff默認執行起來是這樣的.
口即把C更新成F, D更新成C , E更新成D,最後再插入E,是不是很沒有效率？
口所以我們需要使用key來給每個節點做一個唯一標識
口Diff算法就可以正確的識別此節點
口找到正確的位置區插入新的節點。
口所以一句話, key的作用主要是爲了高效的更新虛擬DOM，可以簡單理解爲數組和鏈表之間的插入效率對比
-->
<!-- ●綁定key最好和元素保持一致，而不是用索引index來綁定key,原因是索引會變化，因爲我們在數組中間插入一個元素，元素的索引也會相應的變化，
就沒有保證key的唯一性，爲了保證key的唯一性，用元素值來綁定，其實通過元素值來綁定的話必須是數組中元素不等，不然key也有可能相等，如果元素是對象，
應該用對象中能保證唯一性的屬性作爲key。總結一句話，key要保證唯一性不可變化性，可以理解成sql中的主鍵 -->
<li v-for="(item,index) in chars" :key="item">{{item}}-{{index}}</li>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
chars: ['A', 'B', 'C', 'D', 'E']
}
});
</script>
</body>
</html>
效果
