Vue基礎指令

"msg"
>
<
/span>
<
!-- 和下面的一樣 --
>
}<
/span>

相當於 innerhtml ，可以識別元素。有點元件的感覺

>
"message"
>
<
/h2>
<
/div>
"vue.js"
>
<
/script>
newvue(}
)<
/script>

根據表示式，例如index!=0，即當index！=0時顯示，根據真假值，切換元素的 display css 屬性。

條件渲染。模擬原生的js。當滿足條件時觸發。值得注意的是，盡量用v-show。因為if是直接頁面沒有渲染的，即檢視源**的時候也是沒有的，當改變條件時再渲染。v-show 的元素始終會被渲染並保留在 dom 中。

使用v-show會更加節省效能上的開銷

"type === 'a'"
>
//當滿足type是a時渲染此標籤
a<
/div>
else-if
="type === 'b'"
>
b<
/div>
else-if
="type === 'c'"
>
c<
/div>
else
>
not a/b
/c<
/div>

當我們有一組資料需要進行渲染時，我們就可以使用v-for來完成

如果在遍歷的過程中不需要使用索引值

v-for=「movie in movies」

依次從movies中取出movie，並且在元素的內容中，我們可以使用mustache語法，來使用movie.

此時輸出為：

遍歷物件；

>
for=
"(value, key, index) in info"
>}++
+++}++
+++}<
/p>
<
/div>
"vue.js"
>
<
/script>
newvue(}
,    methods:}}
)<
/script>

順序是：value，key，index

渲染為：

而如果是物件形式的陣列：

>
for=
"item in arr"
>
}<
/p>
<
/div>
"vue.js"
>
<
/script>
newvue(,
,,]}
,    methods:}}
)<
/script>

顯示如下：

官方推薦我們在使用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屬性，那麼更新dom的方式為：在虛擬dom裡找到不一樣的，如下圖：讓c變成f，後面的一步一步變成上乙個。然後最後再建立乙個元素作為最後乙個元素。

**如果加上key，但是注意一定key要繫結元素，而不是繫結序列號index。**因為如果我們繫結index，如果繫結多個的話，因為序列號也會隨之更變，後面繫結的key的index順序混亂了，就會查詢不出來。但是item是不會變的。

找到指定的元素後：利用splice函式：splice() 方法向/從陣列中新增/刪除專案，然後返回被刪除的專案。（下標從0開始）

比如：splice（2,2）//在2下標的位置下刪除後面2個元素

splice(1, 3, 『m』, 『n』, 『l』, 『x』)// 替換元素: 第二個引數, 表示我們要替換幾個元素, 後面是用於替換前面的元素。1下標的』m』元素替換成』n』。2下標的』l』替換成』x』元素

如果第二個引數為0：splice（2，0，『new』）在2下標位置下新增乙個』new』元素

描述index

必需。整數，規定新增/刪除專案的位置，使用負數可從陣列結尾處規定位置。

howmany

必需。要刪除的專案數量。如果設定為 0，則不會刪除專案。

item1, …, itemx

可選。向陣列新增的新專案。可以按順序新增多個