《Vue入門》| 一記敲門磚，敲近你我它！

大家好，我是小菜，
一個希望能夠成為 吹著牛X談架構 的男人！如果你也想成為我想成為的人，不然點個關注做個伴，讓小菜不再孤單！

本文主要介紹 Vue 入門介紹

如有需要，可以參考

如有幫助，不忘 點贊 ?

微信公眾號已開啟，小菜良記，沒關注的同學們記得關注哦！

上篇我們已經將 webpack 的基本使用介紹過一遍了，也相當于是為了接下來的 Vue 作鋪墊！還沒看過的小伙伴記得跳轉查缺補漏~！

后端視野學 Webpack ，文武雙全？

Vue 認知

什么是Vue，它是一套用于構建用戶界面的漸進式框架，一句簡單的介紹中，我們需要重點理解兩個詞 構建用戶界面 和 漸進式框架，它的特性體現在兩個方面

• 資料驅動視圖

使用 vue 的頁面中，vue 會自動監聽資料的變化，從而自行渲染頁面的結構，在vue中，無需手動操作 DOM 節點，它會通過一些特殊的 HTML 語法，將 DOM 和資料系結起來，一旦創建了系結，DOM 將和資料保持同步，每當變更了資料，DOM 也會相應的更新

• 雙向資料系結

上面說到的資料驅動是 單向系結的，但 vue 也支持 雙向系結 的特性，當頁面結構的資料發生的時候，可以在不操作 DOM 的條件下，自動把頁面的資訊同步到 vue 資料中，

MVVM 模型

上面說到兩種 vue 的特性其核心原理便是 MVVM

• M： Model ，表示當前頁面渲染時做依賴的資料源
• V： View，表示當前頁面所渲染的 DOM 結構
• VM： ViewModel，表示 vue 的實體，即 MVVM 的核心

通過上圖我們解釋下 MVVM 的作業原理，其中 viewModel 作為 MVVM 的核心，相當于一個連接的 橋梁，兩頭連接的分別是 Model(資料源) 和 View(頁面結構)，其中 View 就是瀏覽器上可以看到的結構，Model 通常指的就是通過Api 呼叫獲取的資料，

• 當資料源發生變化時候，會被 ViewModel 監聽到，便會根據最新的資料源自動更新頁面的結構
• 當頁面元素的值發生變化的時候，也會被 ViewModel 監聽到，便會把變化后的最新值同步到 Model 資料源中

這個是一個非常簡單的 Vue 例子，但里面已經包含了 View - ViewModel - Model 三部分的結構

基本使用

Ⅰ、指令

我們先來認識一下什么是 指令，指令是 vue 為開發者提供的模板語法，用來輔助開發者渲染頁面的基本結構

vue 中的指令按照不同的用途可以分為 6 大類，如下：

1）內容渲染指令

內容渲染指令，就是用來 渲染 DOM 元素中的文本內容，

1、v-text

兩個 h1 標簽，一個有默認值，一個無默認值，我們都使用了 v-text 指令，來看結果

值得高興的是，v-text 如我們所愿生效了，但是又有些許不對勁，第二個 h1 有自己的默認值，卻被 v-text 指令替換了，而這也便成為了 v-text 缺點~！

v-text 指令會覆寫元素內默認的值

{{ }}

這個是 vue 提供的語法，專門用來解決 v-text 覆寫默認文本內容值的問題，這種 {{ }} 語法的專業名稱叫做 插值運算式，下面來看使用方法：

我們可以通過簡單的語法 {{ 值key }} 來獲取資料源的值，不會干擾到標簽中原有的值，因此 插值運算式 在我們日常開發中會更加常用一點，同時它還支持在指令中使用簡單的 Java Script 語法：

但是如果資料源中的某個值，不是常規意義上的value，而是一段 html 片段，那么通過 {{}} 能否成功識別渲染呢？

很遺憾，插值運算式并沒有幫我們渲染出 html 片段，那這個時候該如何處理？就需要用到我們接下來要說的指令了~！

v-html

該指令一看就知道是和 html 沾邊的，由于 v-text 和 插值運算式 只能幫助我們渲染純文本內容，如果要把包含 HTML 標簽的字串渲染為頁面 HTML 元素，就需要用到這個v-html指令

2）屬性系結指令

v-bind

如果需要為 元素的屬性 動態系結值，我們就需要用到 v-bind 屬性系結指令

由于 v-bind 在日常開發中使用的頻率非常高，因此，vue 官方也提供了簡寫形式（英文符號的 :）

同樣在 v-bind 中也支持簡單的 JS 語法

3）事件系結指令

vue 中還提供了 v-on 事件系結指令，用來為 DOM 階段系結事件監聽，簡單語法如下

我們在 data 中定義了資料源，在 methods 中定義了方法，通過 v-on 指令來系結事件，整體結構清晰明了，當然處理 onclick 事件除外，我們還可以使用 oninput、onkeyup 等原生事件

同樣由于 v-on 指令在開發中使用頻率非常高，因此，vue 官方同樣提供了簡寫形式 （@）

我們在上面方法函式中出現了 e 這個引數，不知道細心的小伙伴有沒有注意到~

在原生的 DOM 事件系結中，可以在事件處理函式的形參處，接收事件引數物件 event，同樣，在 v-on 指令所系結的事件處理函式中，我們一樣可以通過上述方式獲取到 事件引數物件 event

這個時候如果呼叫函式沒有形參還好，但是在存在形參的情況下我們又該如何解決？我們先試一試

可以發現這種方法不得行，我們的事件引數物件被覆寫了！那這就可以說到 vue 為我們提供的一個 特殊變數 $event，該變數用來表示原生的事件引數物件 event，$event 可以解決事件引數物件 event 被覆寫的問題，

可以看出，該特殊變數已經解決了我們上述遇到的問題！

㈠ 事件修飾符

在 DOM 事件中，有一種經典的問題，那就是事件冒泡，什么是事件冒泡呢？

我們要解決這個問題也很簡單，可以利用上面說到的事件物件阻止冒泡行為：

通過函式 stopPropagation() 便可以解決事件冒泡問題，但是 Vue 中提供了更加優雅的解決方案~

這種方式在 vue 中稱之為 事件修飾符，用來更加方便的對事件的觸發進行控制，以下我們列舉 5 個常見的事件修飾符：

用法皆是通過 @click.名稱的方式

㈡ 按鍵修飾符

我們在監聽 鍵盤事件 的時候，經常需要判斷詳細的按鍵，用來對應不同的按鍵動作行為，當然 vue 中也為 鍵盤相關的事件 添加 按鍵修飾符，例如監聽回車鍵：（其他按鍵按需替換 enter 名稱即可）

4）雙向系結指令

我們前面已經認識了v-bind / v-text / v-html / {{ }}等指令，但這些都是 單向系結指令，頁面元素可以從資料源中獲取資料，但是資料源無法從頁面元素中獲取資料，因此，我們這里就說到了 vue 提供的 v-model 雙向系結指令~！

雙向系結指令 的好處便是 不用操作DOM 元素的情況下，可以快速獲取表單的資料

我們可以在 input 輸入框中更改 username 的值，相應的，頁面上{{ username }} 值也會發生變化~！

當我們使用雙向系結處理的時候，為了減少一些不必要的多余操作，如trim, number轉換... ，在vue 也已經為我們提供了相應的處理修飾符：

5）條件渲染指令

條件渲染指令 是用來控制 DOM節點 的顯示與隱藏

• v-if
• v-show

以上兩個指令都是屬于條件渲染指令，使用方式如下：

當滿足條件的情況下，兩者都會正常顯示，當不滿足條件的情況下我們來看看兩者有什么區別：

我們可以通過 F12 控制臺查看頁面元素，發現頁面元素缺失了 v-if 修飾的 span 元素，因此我們得出結論：

實作原理層面

• v-if 指令會動態地創建或移除 DOM 元素，從而控制元素在頁面上的顯示或隱藏
• v-show 指令會動態為元素添加或移除style='display: none;' 樣式，從而控制元素在頁面上的顯示或隱藏

性能消耗層面

v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷

1. 如果需要頻繁的切換，則使用 v-show
2. 如果在運行時條件很少改變，則使用 v-if

有 v-if 標簽，自然有 v-else-if 和 v-else 標簽了~

6）串列渲染指令

前面我們系結的都是單值元素，當我們遇到陣列元素的時候就得使用上 vue 提供的 v-for 標簽，該標簽是用來 基于一個陣列來回圈渲染一個串列結構，v-for 指令需要使用 item in items 形式的特殊語法

• items：待回圈的陣列
• item： 被回圈的每一項

除了 item in items 語法，還支持傳入 index 作為索引 -> (item, index) in items

這個指令通常搭配的還有一個關鍵指令 :key，vue 中使用 key 來維護串列的狀態，當串列的資料發生變化時，默認情況下，vue 會盡可能復用已存在的 DOM 元素，從而提升渲染的性能，但這種默認的性能優化策略，會導致有狀態的串列無法備正確更新，

為了給 vue 一個提示，以便它能跟蹤每個節點的身份，從而在保證有狀態的串列被正確更新的前提下，提升渲染的性能，此時，需要為每項提供一個唯一的 key 屬性！

關于key 我們需要注意以下幾點：

• key 的值只能是字串或者數字型別
• key 的值必須具有 唯一性（通常取ID）
• 使用 index 作為 key 的值沒有任何意義（index 的值不具有唯一性）
• 建議使用 v-for 指令的是哦戶一定要指定 key 的值

Ⅱ、過濾器

上面我們說完了vue 中的 六大類指令，接下來繼續聊聊 vue 中的過濾器（Filters），

過濾器（Filters） 常用于 文本的格式化，可以用來 插值運算式 {{ }} 和 v-bind 中，使用方式如下：

我們以 | 作為 管道符 進行過濾器方法的呼叫，其中 過濾器方法 寫在 filters 節點下，

這種用法可以聯想到 Linux 的管道符操作，和 Java 8中的 stream.map 操作

我們上面定義的過濾器是屬于 私有過濾器，何為 私有？那就是這個過濾器只能在當前的 vm 實體所控制的 el 區域內使用，如果想要在多個 vm 實體之間共享過濾器，則需要定義全域過濾器~！

并且過濾器還支持連續呼叫多個

同時過濾器還支持傳遞引數

注意：過濾器僅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了過濾器相關的功能，

Ⅲ、偵聽器

什么是偵聽器？watch 偵聽器可以用來監聽資料的變化，從而針對資料的變化做出特定的動作！以下便是簡單使用例子：

我們通過監聽 data 中的資料源 username，可以獲取 username 的最新值，該方式也常用于判斷引數值是否可用，快速反饋給使用者提示~！使用偵聽器需要注意幾點

• 所有的偵聽器都應該定義到 watch 節點下
• 偵聽器本質上是一個函式，要監聽哪個資料發生變化，就把對應資料的名稱作為方法名即可

㈠ immediate

在默認情況下，組件在初次加載完畢后不會呼叫 watch 偵聽器，如果想讓 watch 偵聽器立即被呼叫，則需要使用 immediate 選項，簡而言之，immediate 的作用便是：控制偵聽器是否自動觸發一次！

使用方式如下：

其中 handler() 是固定寫法，當監聽值發生變化時，就會自動呼叫 handler 函式，immediate 表示當頁面除此渲染好之后，就立即觸發當前 watch 偵聽器

這個時候在控制臺就可以發現，當初次系結值的時候就已經觸發了偵聽器

㈡ deep

當我們監聽的值變成一個物件的時候，我們利用以上寫法是否還可以監聽的到物件的屬性值發生改變？

通過控制臺我們發現，處理首次監聽之外，后面做出的更改都沒有觸發偵聽器！那這個時候就需要用上我們的 deep 屬性：

通過加上 deep: true 注解，我們成功監聽到了物件屬性的變化，如果我們想要通過簡寫偵聽器的方式就需要按照以下寫法：

注意：如果要偵聽的是物件的子屬性的變化，則必須包裹一層單引號

Ⅳ、計算屬性

看完了偵聽器的使用，我們趁火打劫，呸~ 趁熱打鐵來了解一下 vue 中的計算屬性！
什么是計算屬性？計算屬性是指通過一系列運算之后，最終得到一個屬性值，這個動態計算出來的屬性值，可以被模板結構或 methods 使用，簡單示例如下：

計算屬性本身使用并不復雜，我們需要了解它的幾個特點

• 雖然計算屬性在宣告的時候被定義為方法，但是計算屬性的本質是一個屬性，使用的時候當成普通屬性使用即可
• 計算屬性會快取計算的結果，只有計算屬性依賴的資料變化時，才會重新進行計算

Ⅴ、總結

咱們這篇簡單介紹了 Vue 的基本用法，當然想要掌握 Vue 還有很長的路要走，后續還會持續更新 Vue相關文章！

不要空談，不要貪懶，和小菜一起做個吹著牛X做架構的程式猿吧~點個關注做個伴，讓小菜不再孤單，咱們下文見！

今天的你多努力一點，明天的你就能少說一句求人的話！
我是小菜，一個和你一起變強的男人， 💋
微信公眾號已開啟，小菜良記，沒關注的同學們記得關注哦！