『壹』 Vue3基礎-模板語法
如果我們希望把數據顯示到模板（template）中，使用最多的語法是 「Mustache」語法 (雙大括弧) 的文本插值。
並且我們前端提到過，data返回的對象是有添加到Vue的響應式系統 中，當data中的數據發生改變時，對應的內容也會發生更新。
當然，Mustache中不僅僅可以是data中的屬性，也可以是一個JavaScript的表達式：
下面這種寫法是語句不是表達式，所以是錯誤的：
v-once用於指定元素或者組件只渲染一次，當數據發生變化時，元素或者組件以及其所有的子元素將視為靜態內容並且跳過，該指令可以用於性能優化。
如果添加到父節點，那麼所有的子節點也是只會渲染一次：
用於更新元素的 textContent，等價於"Mustache"語法，而且"Mustache"語法更靈活。
默認情況下，如果我們展示的內容本身是 html 的，那麼vue並不會對其進行特殊的解析。如果我們希望這個內容被Vue可以解析出來，那麼可以使用 v-html 來展示。
效果如下：
v-pre用於跳過元素和它的子元素的編譯過程，顯示原始的Mustache標簽。
跳過不需要編譯的節點，加快編譯的速度。
效果如下：
這個指令保持在元素上直到關聯組件實例結束編譯。
v-cloak 和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標簽直到組件實例准備完畢，主要用於解決閃動問題，現在Vue3一般不會出現這個問題了。
<div> 不會顯示，直到編譯結束。
前面講的一系列指令，主要是將值插入到模板內容中。但是，除了內容需要動態來決定外，某些屬性我們也希望動態來綁定。比如動態綁定a元素的href屬性，動態綁定img元素的src屬性。
綁定屬性我們使用 v-bind: ，縮寫 : ，用於動態地綁定一個或多個 attribute，或一個組件 prop 到表達式。
v-bind用於綁定一個或多個屬性值，或者向另一個組件傳遞props值（這個學到組件時再介紹），在開發中，有哪些屬性需要動態進行綁定呢？還是有很多的，比如圖片的鏈接src、網站的鏈接href、動態綁定一些類、樣式等等。
v-bind有一個對應的語法糖，也就是簡寫方式，在開發中，我們通常會使用語法糖的形式，因為更簡潔。
注意 ：Vue2 template模板中只能有一個根元素，Vue3 template模板中允許有多個根元素。
在開發中，有時候我們的元素class也是動態的，比如：當數據為某個狀態時，字體顯示紅色，當數據另一個狀態時，字體顯示黑色。
綁定class有兩種方式：對象語法，數組語法。
① 對象語法：我們可以傳給 :class (v-bind:class 的簡寫) 一個對象，以動態地切換 class。
② 數組語法：我們可以把一個數組傳給 :class，以應用一個 class 列表；
我們可以利用v-bind:style來綁定一些CSS內聯樣式，這是因為某些樣式我們需要根據數據動態來決定，比如某段文字的顏色，大小等等。
CSS屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名。
綁定style有兩種方式：對象語法，數組語法。
① 對象語法：
② 數組語法： :style 的數組語法可以將多個樣式對象應用到同一個元素上
在某些情況下，我們屬性的名稱可能也不是固定的。
前面我們無論綁定src、href、class、style，屬性名稱都是固定的，如果屬性名稱不是固定的，我們可以使用 :[屬性名]=「值」 的格式來定義，這種綁定的方式，我們稱之為動態綁定屬性。
如果我們希望將一個對象的所有屬性，綁定到元素上的所有屬性，應該怎麼做呢？非常簡單，我們可以直接使用 v-bind 綁定一個對象。
如下：info對象會被拆解成div的各個屬性。
前面我們綁定了元素的內容和屬性，在前端開發中另外一個非常重要的特性就是交互。
在前端開發中，我們需要經常和用戶進行各種各樣的交互，這個時候，我們就必須監聽用戶發生的事件，比如點擊、拖拽、鍵盤事件等等。
在Vue中如何監聽事件呢？使用v-on指令。接下來我們來看一下v-on的用法：
我們可以使用v-on來監聽一下點擊的事件：
v-on:click可以寫成@click，是它的語法糖寫法：
當然，我們也可以綁定其他的事件：
如果我們希望一個元素綁定多個事件，這個時候可以傳入一個對象：
當通過methods中定義方法，以供@click調用時，需要注意參數問題：
情況一：如果該方法不需要額外參數，那麼方法後的()可以不添加，並且方法的實現不用參數，直接就可以列印event。
情況二：如果需要同時傳入某個參數和event時，可以通過$event傳入事件，並且方法的實現必須按順序寫明參數。
@keyup.enter 代表enter鍵彈起的時候會調用onEnter方法，我們一般在方法裡面獲取輸入的值：
在某些情況下，我們需要根據當前的條件決定某些元素或組件是否渲染，這個時候我們就需要進行條件判斷了。
Vue提供了下面的指令來進行條件判斷：
下面我們來對它們進行學習。
v-if、v-else、v-else-if 用於根據條件來渲染某一塊的內容，這些內容只有在條件為true時，才會被渲染出來，這三個指令與JavaScript的條件語句 if、else、else if 類似。
v-if 的渲染原理：v-if是惰性的，當條件為false時，其判斷的內容完全不會被渲染或者會被銷毀掉，當條件為true時，才會真正渲染條件塊中的內容。
因為v-if是一個指令，所以必須將其添加到一個元素上，但是如果我們希望切換的是多個元素呢？
如果此時我們使用div包裹，div會被渲染到界面上來，但是我們並不希望div被渲染，這個時候，我們可以選擇使用template，template元素可以當做不可見的包裹元素，並且 v-if 可以添加到 template 上，但是最終template不會被渲染出來，類似於小程序中的block。
v-show和v-if的用法看起來是一致的，也是根據一個條件決定是否顯示元素或者組件。
首先，在用法上的區別：
其次，本質的區別：
開發中如何進行選擇呢？
在真實開發中，我們往往會從伺服器拿到一組數據，並且需要對其進行渲染。這個時候我們可以使用v-for來完成，v-for類似於JavaScript的for循環，可以用於遍歷一組數據。
v-for的基本格式是 "item in 數組" ，數組通常是來自data或者prop，也可以是其他方式，item是我們給每項元素起的一個別名，這個別名可以自定來定義。
我們知道，在遍歷一個數組的時候會經常需要拿到數組的索引，如果我們需要索引，可以使用格式 "(item, index) in 數組" ，注意順序，數組元素項item在前面，索引項index在後面。
類似於v-if，你可以使用 template 元素來循環渲染一段包含多個元素的內容。
我們使用template來對多個元素進行包裹，而不是使用div來完成，因為div會被渲染，template不會被渲染。而且如果有ul，ul裡面不推薦放div，只推薦放li。
Vue 將被偵聽的數組的變更方法進行了包裹，所以它們也將會觸發視圖更新，這些被包裹過的方法包括：
上面的方法會直接修改原來的數組，所以視圖會跟著更新。但是某些方法不會替換原來的數組，而是會生成新的數組，比如 filter()、concat() 和 slice()，這時候我們可以通過重新賦值的方式觸發視圖更新，如下：
在使用v-for進行列表渲染時，我們通常會給元素或者組件綁定一個key屬性。
這個key屬性有什麼作用呢？
我們先來看一下官方的解釋：key屬性主要用在Vue的虛擬DOM演算法，在新舊nodes對比時辨識VNodes。如果不使用key，Vue會使用一種最大限度減少動態元素並且盡可能的嘗試就地修改/復用相同類型元素的演算法，而使用key時，它會基於key的變化重新排列元素順序，並且會移除/銷毀key不存在的元素。
官方的解釋對於初學者來說並不好理解，比如下面的問題：
什麼是新舊nodes，什麼是VNode？
沒有key的時候，如何嘗試修改和復用的？
有key的時候，如何基於key重新排列的？
我們先來解釋一下VNode的概念：
VNode的全稱是Virtual Node，也就是虛擬節點。事實上，無論是組件還是元素，它們最終在Vue中表示出來的都是一個個VNode。VNode的本質是一個JavaScript的對象。
如果我們不只是一個簡單的div，而是有一大堆的元素，那麼它們應該會形成一個VNode Tree。
我們先來看一個案例：這個案例是當我們點擊按鈕時會在li中間插入一個f。
我們可以確定的是，這次更新對於ul和button是不需要進行更新，需要更新的是我們li的列表。在Vue中，對於相同父元素的子元素節點並不會重新渲染整個列表，因為對於列表中 a、b、c、d它們都是沒有變化的。在操作真實DOM的時候，我們只需要在中間插入一個f的li即可。
那麼Vue中對於列表的更新究竟是如何操作的呢？
Vue事實上會對於有key和沒有key會調用兩個不同的方法，有key，那麼就調用 patchKeyedChildren方法，沒有key，那麼就調用 patchUnkeyedChildren方法。
沒有key的diff演算法：
我們會發現上面的diff演算法效率並不高，c和d來說它們事實上並不需要有任何的改動，但是因為我們的c被f所使用了，所有後續所有的內容都要一次進行改動，並且最後進行新增。
有key的diff演算法：
所以我們可以發現，Vue在進行diff演算法的時候，會盡量利用我們的key來進行優化操作，在沒有key的時候我們的效率是非常低效的，在進行插入或者重置順序的時候，保持相同的key可以讓diff演算法更加的高效。