---

theme: vue-pro highlight: a11y-dark

---

嗨！~ 大家好，我是YK菌 🐷 ，一個微系前端 ✨，愛思考，愛總結，愛記錄，愛分享 🏹，歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012，微信公眾號：ykyk2012]

「這是我參與11月更文挑戰的第16天，活動詳情檢視：2021最後一次更文挑戰」

今天學習Vue基礎知識...從頭開始學，學的還是Vue2, Vue3之前博文裡介紹過了，其實本文是我剛學Vue時的筆記，參考的是B站尚矽谷的影片....

1. 模板的理解

1. 動態html頁面

2. 包含了一些==js語法程式碼==

3. 【插值語法】雙大括號表示式 （“Mustache”語法）【一個】

4. 【指令語法】指令（以v-開頭的自定義標籤屬性）【很多】

5. 插值語法： 功能：用於解析標籤體內容 寫法：{{xxx}}，xxx是js表示式，且可以直接讀取到data中的所有屬性

6. 指令語法： 功能：用於解析標籤（包括：標籤屬性、標籤體內容、繫結事件.....） 舉例：v-bind:href="xxx" 或 簡寫為 :href="xxx"，xxx同樣要寫js表示式，且可以直接讀取到data中的所有屬性 備註：Vue中有很多的指令，且形式都是：v-????

2. 插值語法：雙大括號表示式

1. 語法: {{exp}}
2. 功能: 向頁面輸出資料
3. 可以呼叫物件的方法

裡面寫js表示式：有返回值的js程式碼，而不是js語句

3. 指令語法：強制資料繫結 v-bind:

功能：指定變化的屬性值

完整寫法 javascript v-bind:xxx='yyy' // yyy會作為表示式解析執行

簡潔寫法 javascript :xxx='yyy'

單向資料繫結

1. 語法：v-bind:href ="xxx" 或簡寫為 :href ="xxx"
2. 特點：資料只能從 data 流向頁面

雙向資料繫結 指令 v-model

1. 語法：v-mode:value="xxx" 或簡寫為 v-model="xxx"
2. 特點：資料不僅能從 data 流向頁面，還能從頁面流向 data

4. 指令語法：繫結事件監聽 v-on:

功能：繫結指定事件名的回撥函式

完整寫法

javascript v-on:click='xxx' v-on:keyup='xxx(引數)' v-on:keyup.enter='xxx'

簡潔寫法 javascript @click='xxx' @keyup='xxx' @keyup.enter='xxx'

5. 示例

v-text 1. 作用：向其所在的節點中渲染文字內容。 2. 與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會。

v-html 1. 作用：向指定節點中渲染包含html結構的內容。 2. 與插值語法的區別： (1).v-html會替換掉節點中所有的內容，{{xx}}則不會。 (2).v-html可以識別html結構。 3. 嚴重注意：v-html有安全性問題！！！！ (1).在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊。 (2).一定要在可信的內容上使用v-html，永不要用在使用者提交的內容上！

```html

```

6. 條件渲染指令

移除標籤刪除

• v-if
• v-else

寫法： 1. v-if="表示式" 2. v-else-if="表示式" 3. v-else="表示式"

適用於：切換頻率較低的場景。 特點：不展示的DOM元素直接被移除。 注意：v-if可以和:v-else-if、v-else一起使用，但要求結構不能被“打斷”。

新增樣式隱藏（display: none）

• v-show

寫法：v-show="表示式" 適用於：切換頻率較高的場景。 特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉

【備註】使用v-if的時候，元素可能無法獲取到，而使用v-show一定可以獲取到。

7. 比較v-if與v-show

• 如果需要頻繁切換 v-show 較好
• 當條件不成立時, v-if 的所有子節點不會解析

```html

```

最後，歡迎關注我的專欄，和YK菌做好朋友