1. 目標

通過本文，讀者可以掌握以下的相關技能：

能夠說出 Vue 的 基本用法
能夠說出 Vue 的 模板語法
能夠說出 Vue 的 常用特性
能夠基於 Vue 實現 案例效果

2. Vue概述

優秀的一款 國產 框架，接下來我們就滿懷敬意的去了解一下 Vue 的作者。

尤雨溪，著名漸進式 JavaScript 框架 vuejs.org 的創造者，飽含我們程序員的特有氣質 😏😏😏。Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的 漸進式框架 (聲明式渲染–>組件系統–>客戶端路由–>集中式狀態管理–>項目構建)。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動。看看下面這張漂亮的 Logo. Vue官網

特點：

易用：熟悉HTML、CSS、 JavaScript知識後，可快速上手Vue。
靈活：不斷繁榮的生態系統，可以在一個庫和一套完整框架之間自如伸縮。
高效：20kB min+gzip 運行大小超快虛擬DOM 最省心的優化

3. Vue基本使用

接下來和筆者開始 Vue 的基本使用，無論我們學習什麼框架，一般都是從最簡單的一個案例 (Hello World) 入手，即在頁面上顯示輸出一句 Hello World，案例雖然簡單，但是有句話是這麼說的 麻雀雖小，五臟俱全. 接下來我們通過這個簡單的案例去熟悉 Vue 的基本語法步驟和代碼整體的語法結構，另外可以先用傳統的方式去實現，接着用 Vue 去重構，體會會更加深刻一點。原生 JS 實現如下圖所示：

jQuery 實現如下圖所示：

因爲考慮到有些讀者不會使用 ES6，所以本文會在某些地方採取ES5 的寫法。儘管 jQuery 已經大大地提高了我們的編程體驗，但是程序員嘛，對吧就是 懶.

所以纔有了更加高級的框架誕生，接下來請讀者穿上你的滑板鞋，跟着筆者在 Vue 知識的海洋裏，摩擦摩擦又摩擦。使用 Vue 開發 Hello World 的基本步驟如下：

需要提供標籤用於填充數據
引入 vue.js 庫文件
可以使用 vue 的語法做功能了
把 vue 提供的數據填充到標籤中

完整的使用 Vue 將 HelloWorld 渲染到頁面上示例代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue之Hello World</title>
</head>

<body>

    <!-- 
        div: 提供標籤
        {{}}: 插值表達式用法 作用:
            1.將數據填充到HTML標籤中
            2.插值表達式支持基本的計算操作
    -->
    <div id="app">
        <div>{{msg}}</div>
        <div>{{1+2}}</div>
        <div>{{"Amo " + "So " + "Cool~~~"}}</div>
    </div>

</body>

</html>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app", // el: 元素的掛載位置(值可以是CSS選擇器或者DOM元素)
        data: { // data: 模型數據(值是一個對象)
            msg: "Hello World"
        }
    });
</script>

上述代碼執行結果爲：

Vue 代碼運行原理分析：

4. Vue模板語法

在學習模板語法之前，我們需要對 前端渲染 有一定的瞭解。前端渲染：把數據填充到HTML標籤中。如下圖所示：

前端渲染 的方式大致有以下幾種：

原生 js 拼接字符串基本上就是將數據以字符串的方式拼接到HTML標籤中，前端代碼風格大體上如下圖所示。

缺點: 不同開發人員的代碼風格差別很大，隨着業務的複雜，後期的維護變得逐漸困難起來。
使用前端模板引擎下方代碼是基於模板引擎 art-template 的一段代碼，與拼接字符串相比，代碼明顯規範了很多，它擁有自己的一套模板語法規則。

優點: 大家都遵循同樣的規則寫代碼，代碼可讀性明顯提高了，方便後期的維護。 缺點: 沒有專門提供事件機制。
使用 Vue 特有的模板語法：
- 插值表達式
- 指令
- 事件綁定
- 屬性綁定
- 樣式綁定
- 分支循環結構

4.1 指令

指令的本質就是 自定義屬性，指令的格式：以 v- 開始(如v-cloak)

4.1.1 v-cloak指令用法

插值表達式存在的問題 閃動
如何解決該問題：使用 v-cloak 指令
解決該問題的原理：先隱藏，替換好值之後再顯示最終的值，示例代碼如下：

4.1.2 數據填充的三個指令

v-text 指令用於將數據填充到標籤中，作用於插值表達式類似，但是沒有閃動問題。如果數據中有 HTML 標籤會將 HTML 標籤一併輸出(即填充純文本)。注意：此處爲單向綁定，數據對象上的值改變，插值會發生變化，但是當插值發生變化並不會影響數據對象的值。示例代碼如下：
v-html 用法和 v-text 相似，但是它可以將 HTML 片段填充到標籤中。在網站上動態渲染任意 HTML 是非常危險的，因爲容易導致 XSS 攻擊。只在可信內容上使用 v-html，永不用在用戶提交的內容上。它與 v-text 區別在於 v-text 輸出的是純文本，瀏覽器不會對其再進行 HTML 解析，但 v-html 會將其當 HTML 標籤解析後輸出。示例代碼如下：
v-pre 顯示原始信息跳過編譯過程，跳過這個元素和它的子元素的編譯過程。一些靜態的內容不需要編譯加這個指令可以加快渲染。示例代碼如下：
上述三個指令的所有代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>數據填充的三個指令</title>
</head>

<body>
    <div id="app">
        <!-- 插值表達式有閃動問題 -->
        <div>{{msg}}</div>
        <!-- v-text填充純文本 沒有閃動問題 -->
        <div v-text="msg1"></div>
        <div v-html="msg1"></div>
        <div>{{msg}}</div>
        <div v-pre>{{msg}}</div>
    </div>
</body>

</html>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "<h3>amo so cool~~~</h3>",
            msg1: "<h1>amo so cool~~~</h1>"
        }
    });
</script>

4.1.3 v-once指令的使用

在學習 v-once 之前，我們需要了解一下數據的響應式。那麼如何理解數據的響應式呢? HTML5 中的響應式(屏幕尺寸的變化導致樣式的變化) 。數據 的響應式(數據的變化導致頁面內容的變化)。數據綁定指的是將數據填充到標籤中，例如在 4.1.2 中學習的三個指令，v-once 只編譯一次，顯示內容之後不再具有響應式功能。示例代碼如下：

即 v-once 執行 一次性 的插值，當數據改變時，插值處的內容不會繼續更新。視頻講解如下：

v-once指令講解

4.1.4 雙向數據綁定指令

什麼是雙向數據綁定? 如下圖所示：

雙向數據綁定分析，需要使用到 v-model 指令，用法如下：

關於雙向數據綁定，還有一個非常重要的概念與之相關，其實就是所謂的 MVVM 設計思想，也是 Vue 比較核心的思想。簡單理解是 分而治之，就是將不同功能的代碼放到不同的模塊中，在以特定的方式讓它們建立起關聯。如下圖所示：

4.1.5 事件綁定

Vue 如何處理事件? 語法格式如下：

<!-- v-on指令用法 -->
<input type="button" v-on:click="num++" value="點擊">
<!-- 簡寫的方式 -->
<input type="button" @click="num++" value="點擊1">

事件函數的調用方式，如下：

<!-- 直接綁定函數名稱 -->
<input type="button" @click="handle1" value="點擊2">
<!-- 調用函數 -->
<input type="button" @click="handle1()" value="點擊3">

完整示例代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件基本用法</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <input type="button" v-on:click="num++" value="點擊">
        <!-- 簡寫的方式 -->
        <input type="button" @click="num++" value="點擊1">
        <!-- 上面這兩種寫法用於邏輯簡單的時候還可以，一旦邏輯複雜我們還是要使用函數調用的方式 -->
        <!-- 直接綁定函數名稱 -->
        <input type="button" @click="handle1" value="點擊2">
        <!-- 調用函數 -->
        <input type="button" @click="handle1()" value="點擊3">
    </div>
</body>

</html>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            handle1: function() {
                //注意這裏要寫上this 否則是沒有效果的
                this.num++;
            }
        }
    });
</script>

事件函數參數傳遞，普通參數和事件對象，示例代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件函數傳參</title>
</head>

<body>
    <div id="app">
        <div>{{num}}</div>
        <!-- 如果事件直接綁定函數名稱，
            那麼默認會傳遞事件對象作爲事件函數的第一個參數 -->
        <button @click="handle1">傳參1</button>
        <!-- 如果事件綁定函數調用，那麼事件對象必須作爲最後一個參數顯示傳遞，
            並且事件對象的名稱必須是$event -->
        <button @click="handle2(1,2,3,$event)">傳參2</button>
    </div>
</body>

</html>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            handle1: function(event) {
                this.num++;
                //輸出打印標籤名字
                console.log(event.target.tagName);
                //輸出標籤中的內容
                console.log(event.target.innerHTML);
            },
            handle2: function(p, p1, p2, event) {
                console.log(p, p1, p2);
                console.log(event.target.tagName);
            }
        }
    });
</script>

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。儘管我們可以在方法中輕鬆實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

爲了解決這個問題，Vue.js 爲 v-on 提供了事件修飾符。修飾符是由點開頭的指令後綴來表示的。

stop
prevent
capture
self
once
passive

<!-- 阻止單擊事件繼續傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即內部元素觸發的事件先在此處理，然後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->

使用修飾符時，順序很重要，相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。在 2.1.4 中新增了：

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能對原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。

按鍵修飾符: 在監聽鍵盤事件時，我們經常需要檢查詳細的按鍵。Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 `key` 是 `Enter` 時調用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你可以直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換爲 kebab-case 來作爲修飾符。

<input v-on:keyup.page-down="onPageDown">

在上述示例中，處理函數只會在 $event.key 等於 PageDown 時被調用。使用 keyCode attribute 也是允許的：

<input v-on:keyup.13="submit">

keyCode 的事件用法已經被廢棄了並可能不會被最新的瀏覽器支持。爲了在必要的情況下支持舊瀏覽器，Vue 提供了絕大多數常用的按鍵碼的別名：

enter
tab
delete (捕獲 刪除 和 退格 鍵)
esc
space
up
down
left
right

有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，這些內置的別名應該是首選。你還可以通過全局 config.keyCodes 對象 自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

按鍵修飾符的案例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按鍵修飾符</title>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                用戶名:
                <input type="text" v-model="uname" v-on:keyup.delete="clearContent">
            </div>
            <div>
                密碼:
                <input type="text" v-model="upsd" v-on:keyup.enter="handleSubmit">
                <!-- <input type="text" v-model="upsd" v-on:keyup.aaa="handleSubmit"> -->
                <!-- <input type="text" v-model="upsd" v-on:keyup.13="handleSubmit"> -->
            </div>
            <div>
                <input type="button" value="提交" v-on:click="handleSubmit">
            </div>
            <div>
                <input type="text" v-on:keyup="handle">
            </div>
        </form>
    </div>
</body>

</html>
<script src="js/vue.js"></script>
<script>
    Vue.config.keyCodes.aaa = 13; //自定義鍵位別名
    let vm = new Vue({
        el: "#app",
        data: {
            uname: "",
            upsd: ""
        },
        methods: {
            //按delete鍵位的時候 清空用戶名
            clearContent: function() {
                this.uname = "";
            },
            handleSubmit: function() {
                console.log(this.uname, this.upsd);
            },
            handle: function(event) {
                console.log(event.keyCode);
            }
        }
    });
</script>

在學習了上面的知識之後，我們可以去做一個關於加法計算器的小案例，請看下面視頻講解：

加法計算器小案例.mp4

爲什麼在 HTML 中監聽事件？ 你可能注意到這種事件監聽的方式違背了關注點分離(separation of concern) 這個長期以來的優良傳統。但不必擔心，因爲所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
因爲你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
當一個 ViewModel 被銷燬時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。

4.1.6 屬性綁定

基本用法： 如綁定 a 標籤中的 href 屬性，通過點擊 button 切換 url 的地址，實現不同的跳轉，示例代碼如下：

在學習了基本的屬性綁定使用之後，我們大致就能夠知道 v-model 的實現原理了，html 結構如下：

<body>
    <div id="app">
        <div>
            <div>{{msg}}</div>
            <input type="text" v-bind:value="msg" v-on:input="handle">
            <input type="text" v-bind:value="msg" v-on:input="msg=$event.target.value">
            <input type="text" v-model="msg">
        </div>
    </div>
</body>

js 代碼如下：

<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg: "HelloWorld"
        },
        methods: {
            handle: function(event) {
                //使用輸入域中最新的數據覆蓋原來的數據
                this.msg = event.target.value;
            }
        }
    });
</script>

操作元素的 class 列表和 內聯樣式 是數據綁定的一個常見需求。因爲它們都是 attribute，所以我們可以用 v-bind 處理它們：只需要通過表達式計算出字符串結果即可。不過，字符串拼接麻煩且易錯。因此，在將 v-bind 用於 class 和 style 時，Vue.js 做了專門的增強。表達式結果的類型除了字符串之外，還可以是 對象 或 數組。

對象語法： 我們可以傳給 v-bind:class 一個對象，以動態地切換 class：

<div v-bind:class="{ active: isActive }"></div>

你可以在對象中傳入更多字段來動態切換多個 class。此外，v-bind:class 指令也可以與普通的 class attribute 共存。當有如下模板：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

結果渲染爲：

<div class="static active"></div>

當 isActive 或者 hasError 變化時，class 列表將相應地更新。例如，如果 hasError 的值爲 true，class 列表將變爲 "static active text-danger"。綁定的數據對象不必內聯定義在模板裏：

渲染的結果和上面一樣。
數組語法：我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：

渲染爲：

<div class="active text-danger"></div>

如果你也想根據條件切換列表中的 class，可以用三元表達式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

這樣寫將始終添加 errorClass，但是只有在 isActive 是 truthy 時才添加 activeClass。不過，當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法：

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

4.1.7 綁定內聯樣式

v-bind:style 的對象語法十分直觀——看着非常像 CSS，但其實是一個 JavaScript 對象。CSS property 名可以用 駝峯式(camelCase) 或 短橫線 分隔 (kebab-case，記得用引號 括起來) 來命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

直接綁定到一個樣式對象通常更好，這會讓模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

v-bind:style 的數組語法可以將多個樣式對象應用到同一個元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

當 v-bind:style 使用需要添加瀏覽器引擎前綴的 CSS property 時，如 transform，Vue.js 會自動偵測並添加相應的前綴。

4.1.8 分支結構

v-if 指令用於 條件性 地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。示例代碼如下：

因爲 v-if 是一個指令，所以必須將它添加到一個元素上。但是如果想切換多個元素呢？此時可以把一個 <template> 元素當做不可見的包裹元素，並在上面使用 v-if。最終的渲染結果將不包含 <template> 元素。html 結構如下所示：

<template v-if="ok">
   <h1>Title</h1>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</template>

js 代碼如下：

<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            ok: true
        }
    });
</script>

v-else-if，顧名思義，充當 v-if 的 else-if 塊，可以連續使用，html 結構如下所示：

<div id="app">
	<div v-if="score>90">優秀</div>
	<div v-else-if="score>80&&score<=90">良好</div>
	<div v-else-if="score>70&&score<=80">一般</div>
</div>

js 代碼如下：

<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            score: 73
        }
    });
</script>

也可以用 v-else 添加一個 else 塊，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。如下所示：

Vue 會儘可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：

<template v-if="loginType === 'username'">
	<label>Username</label>
	<input placeholder="Enter your username">
</template>
<template v-else>
	<label>Email</label>
	<input placeholder="Enter your email address">
</template>
</br>
<button v-on:click="handle0">Toggle login type</button>

js 代碼如下：

<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            loginType: "username",
        },
        methods: {
            handle0: function() {
                this.loginType = (this.loginType) ? "" : "username";
            }
        }
    });
</script>

這樣也不總是符合實際需求，所以 Vue 爲你提供了一種方式來表達 這兩個元素是完全獨立的，不要複用它們。只需添加一個具有唯一值的 key attribute 即可：

注意，<label> 元素仍然會被高效地複用，因爲它們沒有添加 key attribute。另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：

不同的是帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 只是簡單地切換元素的 CSS property display。

v-if 是 真正 的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做—直到條件第一次變爲真時，纔會開始渲染條件塊。
相比之下，v-show 就簡單得多–不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好。如果在運行時條件很少改變，則使用 v-if 較好。

4.1.9 循環結構

我們可以用 v-for 指令基於一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。html 示例代碼如下：

<body>
    <ul id="example-1">
        <li v-for="item in items" :key="item.message">
            {{ item.message }}
        </li>
    </ul>
</body>

js 示例代碼如下：

<script src="js/vue.js"></script>
<script>
    let example1 = new Vue({
        el: '#example-1',
        data: {
            items: [{
                message: 'Foo'
            }, {
                message: 'Bar'
            }]
        }
    })
</script>

結果如下：

在 v-for 塊中，我們可以訪問所有父作用域的 property。v-for 還支持一個可選的第二個參數，即當前項的索引。html 示例代碼如下：

<body>
    <ul id="example-2">
        <li v-for="(item, index) in items">
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
    </ul>
</body>

js 示例代碼如下：

<script src="js/vue.js"></script>
<script>
    let example2 = new Vue({
        el: '#example-2',
        data: {
            parentMessage: 'Parent',
            items: [{
                message: 'Foo'
            }, {
                message: 'Bar'
            }]
        }
    })
</script>

結果如下：

你也可以用 of 替代 in 作爲分隔符，因爲它更接近 JavaScript 迭代器 的語法：

你也可以用 v-for 來遍歷一個對象的 property。html 示例代碼如下：

<body>
    <ul id="v-for-object" class="demo">
        <li v-for="value in object">
            {{ value }}
        </li>
    </ul>
</body>

js 示例代碼如下：

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#v-for-object',
        data: {
            object: {
                title: 'Vue全家桶之Vue基礎',
                author: 'Amo',
                publishedAt: '2020-05-23 20:20:15'
            }
        }
    })
</script>

結果如下：

你也可以提供第二個的參數爲 property 名稱 (也就是鍵名)：

結果如下：

還可以用第三個參數作爲索引：

結果如下：

爲了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要爲每項提供一個唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 內容 -->
</div>

建議儘可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行爲以獲取性能上的提升。因爲它是 Vue 識別節點的一個通用機制，key 並不僅與 v-for 特別關聯。不要使用對象或數組之類的非基本類型值作爲 v-for 的 key。請用字符串或數值類型的值。

v-for 與 v-if 一同使用(注意我們不推薦在同一元素上使用 v-if 和 v-for)，當它們處於同一節點，v-for 的優先級比 v-if 更高，這意味着 v-if 將分別重複運行於每個 v-for 循環中。當你只想爲部分項渲染節點時，這種優先級的機制會十分有用，如下：

上面的代碼將只渲染數據等於18的。

5. 基礎案例

5.1 Tab選項欄演示效果

5.2 案例: 實現步驟

實現靜態 UI 效果
用傳統的方式實現標籤結構和樣式
基於數據重構 UI 效果
2.1 將靜態的結構和樣式重構爲基於 Vue模板語法 的形式
2.2 處理事件綁定和 js 控制邏輯
聲明式編程
模板的結構和最終顯示的效果基本一致

5.3 示例代碼

html 模板如下：

js 代碼如下：

<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: ".tab",
        data: {
            currentIndex: 0,
            list: [{
                id: 1,
                title: "陳瑤",
                path: "images/陳瑤.jpeg"
            }, {
                id: 2,
                title: "宋妍霏",
                path: "images/宋妍霏.jpeg"
            }, {
                id: 3,
                title: "林允兒",
                path: "images/林允兒.jpeg"
            }, {
                id: 4,
                title: "李智恩",
                path: "images/李智恩.jpg"
            }, {
                id: 5,
                title: "迪麗熱巴",
                path: "images/迪麗熱巴.jpeg"
            }, ]
        },
        methods: {
            change: function(index) {
                this.currentIndex = index;
            }
        }
    });
</script>

Vue全家桶之Vue基礎(1)

目錄

1. 目標

2. Vue概述

3. Vue基本使用

4. Vue模板語法

4.1 指令

4.1.1 v-cloak指令用法

4.1.2 數據填充的三個指令

4.1.3 v-once指令的使用

4.1.4 雙向數據綁定指令

4.1.5 事件綁定

4.1.6 屬性綁定

4.1.7 綁定內聯樣式

4.1.8 分支結構

4.1.9 循環結構

5. 基礎案例

5.1 Tab選項欄演示效果

5.2 案例: 實現步驟

5.3 示例代碼

System.Object未被引用的程序集中定義

【面試準備】項目經驗——接口自動化項目

Python每日一練(9)-批量爬取B站小視頻

Python數據挖掘基礎(四)：Pandas高級處理

Python每日一練(18)-抓取小說目錄和全文

Python爬蟲數據抽取(三)：正則表達式

簡易五子棋遊戲(控制檯版)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結