初識Vue技術（vue的技術介紹）

第一章 vue初識

vue是當前前端知識體系中炙手可熱的技術，無論是企業級開發還是面試過程中vue都尤為重要。本章節作為vue的入門，通過本章節的學習，我們可以了解到什么是vue，什么是mvvm模式，并且可以開始使用代碼完成第一個vue的案例，從中體會vue的特點與優點，掌握vue最基本的語法習慣，比如插值，屬性計算，偵聽器等。

1.1 vue.js介紹

在學習vue如何使用之前，我們需要需要知道什么是vue，vue有什么優勢，以及它的優缺點是什么，通過本小結的學習我們可以對Vue有一個大概的認識。

1.1.1 什么是Vue

首先我們來看一下官方對自己的介紹：

Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

官方介紹已經很詳細了，簡單來說Vue適合一個前端框架，使用場景類似JQuery，但是它與傳統的JQuery的語法習慣和思想有所不同，具體有哪些不同，通過本書接下來的學習相信大家會有一個深刻的理解。

1.1.2 漸進式

vue官方介紹言簡意賅，其中有一個名詞叫做漸進式框架，這里我們解釋下什么是漸進式。如圖1.2所示，描述了漸進式的含義：開發者可以根據實際需求，逐漸遞增所要的方式，但每個方式之間并沒有特別強的依賴性。

圖1.2 什么是漸進式

上圖中也列舉了Vue的提供功能模板，從左到右的順序也是本書的一個大致學習路線，分別是Vue核心聲明式渲染，為了實現代碼重復而提供的組件，方便單頁面構建的路由模塊，狀態管理模塊，以及快速搭建Vue項目的腳手架工具。

在學習和使用Vue時我們可以只使用vue提供的聲明式渲染這一個單獨的功能，后續根據需求逐步引入和使用更多的技術到自己的項目中，而不是一次性強制要求使用到所有功能模塊。

1.1.3 Vue的優點

Vue作為當前如此火熱的前端框架，之所以這么受歡迎證明其擁有眾多的優點，其具有的優點有易用，靈活，高效的特點，這里提供一個表格，列舉了Vue的優點。

表1.1 vue優點說明

優點

說 明

易用

掌握了html,css和javascript的知識后，配合文檔的說明可以快速上手vue。

靈活

開發者可以選擇使用vue作為項目的框架完成大部分功能，也可以將vue作為某個模塊的工具庫進行使用，可以和其他框架和庫配合使用。

高效

小巧的體積，快速的虛擬dom操作

1.1.4 Vue特點

作為了解過前端開發的開發者來說，jquery是再熟悉不過的前端框架，jquery被大量的項目使用，jquery擁有和原生js類似的dom操作思想。Vue可以實現和jquery相同的功能，但是Vue的思想具有獨特性，所有這里我們需要將vue和jquery進行區別對比，來快速了解vue的特點。

jQuery操作dom的思想：jQuery是使用選擇器（$）選取DOM對象，然后通過對應的函數對其進行賦值、取值、事件綁定等操作。與原生的js操作思想是一樣的，都是數據和標簽在代碼編寫上在一起的，比如需要獲取label標簽的內容：$("selector").action();。

Vue操作dom的思想：Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。

1.2 MVVM

上一小節中我們提到，Vue是一個基于WVVM思想的框架，那么到底什么是WVVM，本小節會為大家揭曉答案。簡單的說MVVM是一種設計模式，是對 MVC和 MVP的進一步改進，所以學習MVVM之前我們需要介紹一些基本概念。

1.2.1 MVVM MVC MVP的區別

MVVM MVC MVP分別是三種模式，也可以說是三種思想，他們的目的都是為了將業務邏輯和頁面展示分離，這樣有利于開發中的分工，并且有利于代碼的重用。

三種模式的區別：MVC表示模型-視圖-控制器，MVP表示模型-視圖-演示者，MVVM表示模型-視圖-視圖模型；MVP、MVVM都是由MVC衍生出的。MVC中，View會直接從Model中讀取數據；MVP中，View并不直接使用Model。

當然以上只是簡單的介紹MVVM，MVC，MVP的名詞解釋，接下來我們要分別探討什么是MVVM，MVC，MVP。

1.2.2 MVC

MVC最初生根于服務器端的Web開發，后來漸漸能夠勝任客戶端Web開發，MVC模式將應用程序劃分為三個部分：View,Controller,Model,他們的關系如圖1.2所示。

圖1.2 MVC模型示意圖

MVC模式的特點在于實現關注點分離，即應用程序中的數據模型與業務和展示邏輯解耦。在客戶端web開發中，就是將模型(M-數據、操作數據)、視圖(V-顯示數據的HTML元素)之間實現代碼分離，松散耦合，使之成為一個更容易開發、維護和測試的客戶端應用程序。

1.2.3 MVP

MVP和MVC很類似，本質上是在MVC基礎上的一次進化，也是為了實現業務邏輯和展示的分離。只不過MVP和MVC的區別在于MVP是把MVC中的Controller換成了Presenter（呈現），目的就是為了完全切斷View跟Model之間的聯系，由Presenter充當橋梁，做到View-Model之間通信的完全隔離方向。如圖1.3所示。

圖1.3 MVP模型示意圖

MVP特點在于　M、V、P之間雙向通信，View 與 Model之間不通信，都通過 Presenter 傳遞。Presenter完全把Model和View進行了分離，主要的程序邏輯在Presenter里實現。

1.2.4 MVVM

MVVM 模式將 Presenter 改名為 ViewModel，基本上與 MVP 模式完全一致。如果說MVP是對MVC的進一步改進，那么MVVM則是思想的完全變革。它是將“數據模型數據雙向綁定”的思想作為核心，因此在View和Model之間沒有聯系，通過ViewModel進行交互，而且Model和ViewModel之間的交互是雙向的，因此視圖的數據的變化會同時修改數據源，而數據源數據的變化也會立即反應到View上。MVVM示意圖如圖1.4所示。

Vue就是MVVM 模式的前端框架，數據雙向綁定，減少了 DOM 操作，將更多精力放在數據和業務邏輯上。所以學習Vue需要先掌握MVVM思想模式。

圖1.4 MVVM模型示意圖

1.3 Vue起步

我們已經對Vue有了一個基本的了解，并且學習了WVVM模式，我們還了解到Vue可以類似Jquery實現對dom操作，也就是完成模型和dom元素的動態綁定，并且Vue的語法習慣區別與傳統的JQuery，那么Vue應用如何編寫呢？本小節我們開始著手完成第一個vue案例，了解vue的語法習慣。建議在代碼編寫過程中提柜Vue的特點以及優點。

起步案例中為了能夠快速上手，這里并不使用vue-cli工具。

1.3.1 安裝

從官網(https://cn.vuejs.org)下載vue.js,我們這里使用開發版，包含完整的警告和調試模式。下載流程如圖1.5所示。

圖1.5 vue.js下載

Vue.js文件下載完成之后，開始我們的項目。

本身中我們使用Visual Studio Code作為我們的開發工具，準備工作操作步驟如下：

? 首先在計算機本地文件夾中新建一個文件夾作為我們第一個案例的項目，取名為demo1。

? 在demo1目錄下創建index.html文件，用于第一個應用的代碼編寫。

? 在demo1目錄下新建js文件夾，專門用于保存js文件。

? 將剛剛下載完成的vue.js文件賦值到js文件夾下。

? 然后使用Vscode打開本地的demo1文件夾。

vscode打開本地文件夾之后的效果如圖1.6所示：

圖1.6 vscode打開本地文件夾

1.3.2 第一個案例

我們在第一個案例很簡單，html頁面中有一個div標簽，我們要實現使用Vue對div標簽中的文字進行動態綁定，也就是使用Vue為元素的內容賦值，實現對里div內容動態綁定數據模型的效果。

編輯index.html文件，內容如1-1所示：

例1-1 index.html

1

2

3

4

5

6

7

8

21

22

例5-1是一個基本入門案例。vue的使用基本步驟分為三個部分，分別是1.引入vue環境，2.在掛載點（vue和div的綁定關系）中編寫模板(綁定的標簽里面的內容)，3以及js中聲明的實例(實例就是vue實例，將模板的內容交給vue來管)并且為模板中的屬性賦值。

1.引入Vue環境

2. 在掛載點編寫模板，{{msg}}是模板語法，外層的雙大括號為固定，括號內的msg表示變量名，與js中數據屬性名保持一致。

3. js聲明實例，在js中初始化了一個Vue實例，并且指定了選項屬性，這些屬性用于Vue的初始化。其中el的值通過選擇器語法綁定模板語法出現在的div。data中定義屬性名和屬性值，data中定義的屬性可以在模板語法中通過屬性名取得值。

Var app = new Vue({

el: "#app",

data: {

msg: "hello world" //將data屬性找那個msg屬性的值綁定渲染到html中{{msg}}位置

}

})

1.2.3 運行結果

在瀏覽器運行index.html，在瀏覽器窗口中顯示文字“hello world”。運行結果如圖1.7所示。

圖1.7 運行結果

我們已經成功創建了第一個 Vue 應用！看起來這跟渲染一個字符串模板非常類似，但是 Vue 在背后做了大量工作，隨著后續的學習，我們可以了解更多。

1.2.4 代碼解釋

Vue和JQuery語法習慣的最大區別在于Vue的初始化，每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例開始的，語法如下：

1 var vm = new Vue({

2 // 選項

3 ???????? el: "#app",

4 data: {

5 msg: "hello world" //將data屬性找那個msg屬性的值綁定渲染到html中{{msg}}位置

6 }

7

8 })

其中的選項也就是vue實例的屬性，比如我們目前已經了解過的el和data,當創建一個 Vue 實例時，你可以傳入一個選項對象，這些選項來創建你想要的行為，比如el是element的縮寫，表示html中的掛載點的id，data中的屬性用于為模板中的同名屬性賦值，除以以外還有多種選項屬性，后續我們會繼續學習。

1.4 插值概述

第一個Vue案例中使用到了{{msg}}語法，我們了解到msg是取得Vue實例中data選項的msg屬性的值，大括號中除了可以寫屬性名以外還有其他寫法嗎，本小節我們將學習模板語法已經插值概述，對應的就是大括號已經大括號內部的語法。

1.4.1 模板語法

模板語法也叫雙大括號語法，Mustache語法，Vue.js 使用了基于 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規范的瀏覽器和 HTML 解析器解析。簡單的說{{msg}}就是模板，在模板中書寫的語法叫做模板語法，模板的目的用于將數據模型和dom元素進行綁定。

1.4.2 插值表達式

{{msg}}實現了讀取data中msg屬性的值，有些場景下我們需要對數據進行額外的計算，而不是直接使用原本的值，這個時候我們就可以使用插值表達式。使用雙大括號來包裹 js 代碼構成插值表達式，用于將雙大括號中的數據替換成對應屬性值進行展示，插值表達式中可以寫入JSON數字，字符串，數字，js表達式。比如{{msg+’你好’}}，表示取得msg的值之后再與/你好’字符串進行拼接展。

1.4.3 案例

接下來我們使用一個案例來列舉插值表達式中都可以使用什么樣的語法。其中包含了字符串的拼接，數值的計算，對象和數組的操作已經三木表達式的使用。創建index2.html，進行演示模板語法以及插值表達式，注意查看案例5-2中的注釋對應的寫法，以及運行效果。

例1-2 index2.html

1

2

3

4

5

6

7

60

61

62

接下來我們通過各個數據類型的操作插值表達式以及對應的運行效果來學習其用法。

? 字符串操作

代碼：

{{ str }}

{{ num + 'aaa'}}

{{ str.length }}

運行效果：

hello

1aaa

3

代碼解釋：

{{str}}是模板語法的最基本使用，獲取vue實例中data里str屬性的值,也就是”hello”并且渲染到html展示中。

{ num + 'aaa'}表示模板語法中數字和字符之間的使用“+”運算符表示數值轉成字符串再與字符串拼接得到新的字符串渲染到html頁面中。

{{ str.length }}表明模板語法中針對字符串類型的數據可以使用字符串函數屬性，length返回字符串的長度的數值。

? 數值操作

代碼：

{{ num }}

{{ num+num1 }}

{{ num > num1 }}

{{ num.toFixed(2) }}

運行效果：

1

101

false

1.00

代碼解釋：

{{ num }}獲取data里num屬性的值,也就是數字1并且渲染到html展示中。

{{num+num1}}表示模板語法中數字和數字之間的使用“+”運算符表示數值進行加法的數學運算得到新的數值渲染到html頁面中。

{{ num > num1}}表明模板語法中對兩個數值進行大小的比較，返回布爾值并且渲染在頁面中。

{{ num.toFixed(2) }}表示模板表達式中的數值支持使用js提供的數學函數，期中toFixed表示方法可把 num四舍五入為指定2位小數位數的數字。

? 布爾操作

代碼：

{{ flag }}

運行效果：

true

代碼解釋：

{{ flag}}獲取data里flag屬性的值,也就是布爾值true并且渲染到html展示中。

? 數組操作

代碼：

{{ arr }}

{{ arr[3] }}

運行效果：

[ 1, 2, 3, 4 ]

4

代碼解釋：

{{ arr}}獲取data里arr屬性的值，arr是一個數組，js中中括號表示數組，并且將數組的值[ 1, 2, 3, 4 ]渲染到html展示中。

{{arr[3]}}表示模板語法中針對數組類型的數據獲取其下標為3的數值并渲染到html頁面中。

? 對象操作

代碼：

{{ obj }}

{{ obj.name }}

運行效果：

{ "name": "aaa", "age": 20 }

aaa

代碼解釋：

{{ obj}}獲取data里obj屬性的值，obj是一個對象，并且將數組的值{ "name": "aaa", "age": 20 }渲染到html展示中。

{{obj.name]}}表示模板語法中針對對象類型的數據獲取其指定的name屬性的值并渲染到html頁面中。

? 空數據操作

js中有三種類型比較特殊，null表示空，undefined表示未定義，Nan表示非數字。那么如果data選項里的某個屬性的值是這三種類型中的一個時，頁面如何渲染呢？

代碼：

{{ param1 }}

{{ param2 }}

{{ param3 }}

運行效果：注意前兩行為空字符串

NaN

代碼解釋：

{{ param1 }}獲取data里param1屬性的值，值為null,如果值為null時vue會渲染空字符串到html展示中。

{{ param2}}獲取data里param2屬性的值，值為undefined,如果值為undefined時vue會渲染空字符串到html展示中。

{{param3]}}獲取data里para32屬性的值，值為Nan,如果值為NaN時vue會渲染字符串“NaN”到html展示中。

? 三目表達式操作

模板表達式中不支持直接使用if等分支語句，如果想要根據判斷顯示不同的數據時可以采用三目表達式語法。

代碼：

{{ num > num1 ? "是" : "否" }}

運行效果：

否

代碼解釋：

{{ num > num1 ? "是" : "否"}}先進行num和num1的大小判斷，判斷結果為false，根據三目表達式語法，當條件判斷為false時取冒號之前的值也就是”否”并且渲染到html展示中。

1.5 屬性計算

上一小結我們學習了插值表達式，語法允許在模板中使用模表達式，這樣非常便利。但是同時也具有一定的局限性。設計它們的初衷是用于簡單運算的。但是在模板中放入太多的邏輯會讓模板過重且難以維護。例如以下代碼：

1

4 class Dog{

其中這里的表達式包含3個鏈式操作，并不是很清晰，此時遇到復雜邏輯時建議使用Vue特帶的計算屬性computed來進行處理，在一個計算屬性里可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果。

接下來我們就一起來探究computed的使用。需求，將以上直接使用插值表達式的寫法使用屬性計算進行重寫，代碼如1-3所示。

例1-3 index3.html

1

2

3

4

5

6

7

29

30

最終的運行效果，在瀏覽器中展示：

worldhello

以上案例實現了使用屬性計算完成對數據的計算，注意體會使用屬性計算之后代碼上比直接使用插入表達式更加精簡，并且業務邏輯和數據展示進一步實現了分離，因為涉及到對字符串操作時不再需要修改模板語法，而是修改業務邏輯中的屬性計算函數。

1.6 偵聽器

在vue實例選項中，有一個屬性叫做watch，也就是偵聽器的意思，就像起名字的意思一樣，偵聽器用于當數據發生變化時，及時做出響應處理，當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的，比如需求要檢測某個data中數據的值發生了改變，代碼如1-4所示。

例1-4 index4.html

1

2

3

4

5

6

7

36

37

打開瀏覽器訪問index4.html，輸入框顯示默認文字，狀態顯示“修改前”，運行結果如圖1.8所示

圖1.8 修改前運行結果

當修改了輸入框中的內容后，狀態文字從“修改前”變成了“修改后”，證明偵聽器生效，檢測到了data中msg數據的變化，接著修改了state的值。修改后運行結果如圖1.9

圖19. 修改后運行結果

我們發現通過修改文本輸入框的內容，從而改變了狀態文字，其運行流程就是偵聽器對文本數據框中的內容進行了監聽，大概文字發生改變之后執行了偵聽器，改變了state 的值，最終改變了瀏覽器窗口顯示的文字。

1.7 本章小結

? Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。

? Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和View是分離的，他們通過Vue對象這個vm實現相互的綁定。

? MVC表示“模型-視圖-控制器”，MVP表示“模型-視圖-演示者”，MVVM表示“模型-視圖-視圖模型”。

? 使用雙大括號來包裹 js 代碼構成插值表達式，用于將雙大括號中的數據替換成對應屬性值進行展示，插值表達式中可以寫入JSON數字，字符串，數字，js表達式。

? 遇到復雜邏輯時建議使用Vue特帶的計算屬性computed來進行處理，在一個計算屬性里可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果。

? 偵聽器用于當數據發生變化時，及時做出響應處理，當需要在數據變化時執行異步或開銷較大的操作時

1.8 理論習題與實踐練

1.思考題

1.1 請簡述vue的優點。

1.2 請簡述vue和jQuery的區別。

1.3 請簡述vue起步的操作流程。

1.4 請簡述什么是MVC，MVVM？

2.編程題

? 2.1 回顧vue起步的操作流程，獨自完成vue環境搭建，并要求練習使用到插值，屬性計算以及偵聽器。

MVC Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。