一、Vue簡介

• Vue.js 是一個用于創(chuàng)建 Web 交互界面的庫。它讓你通過簡單而靈活的 API 創(chuàng)建由數(shù)據(jù)驅(qū)動的 UI 組件误窖。
• Vue.js是一款輕量級的、以數(shù)據(jù)驅(qū)動構(gòu)建web界面的前端JS框架秩贰，它在架構(gòu)設計上采用了MVVM（Model-View-ViewModel）模式霹俺，其中ViewModel是Vue.js的核心，它是一個Vue的實例毒费，而這個實例又作用域頁面上的某個HTML元素丙唧。
• 其核心在于通過數(shù)據(jù)驅(qū)動界面的更新和展示而非JS中通過操作DOM來改變頁面的顯示。

image

image

   上圖的DOM Listeners和Data Bindings是數(shù)據(jù)驅(qū)動中實現(xiàn)數(shù)據(jù)雙向綁定的關鍵蝗罗，實際的 DOM 封裝和輸出格式都被抽象為了 Directives 和 Filters; 這也是Vue.js事件驅(qū)動的原理所在艇棕。

    對于View而言，ViewModel中的DOM Listeners工具會幫助我們監(jiān)聽頁面上DOM元素的變化串塑，一旦有變化沼琉，Model中的數(shù)據(jù)也會發(fā)生改變；

   對于Model而言桩匪，當我們操縱Model中的數(shù)據(jù)時打瘪，Data Bindings工具會幫助我們更改View中的DOM元素。

image

   此外傻昙，頁面組件化也是Vue.js的核心闺骚，它提供了一種抽象，讓我們可以用獨立可服用的小組件來構(gòu)建大型應用妆档。

image

   所以僻爽，我們搭建的任何一個界面你可以把其抽象成為一個組件樹，充分的去復用它贾惦。

思考： Vue.js和React胸梆、Angularjs、Knockout须板、AvalonJS的區(qū)別在哪碰镜？

Knockout：微軟出品，可以說是MVVM的模型領域內(nèi)的先驅(qū)习瑰，使用函數(shù)偷龍轉(zhuǎn)鳳绪颖，最短編輯長度算法實現(xiàn)DOM的同步，兼容IE6甜奄，實現(xiàn)高超柠横，但源碼極其難讀窃款，最近幾年發(fā)展緩慢。

Vue：是最近幾年出來的一個開源Javascript框架滓鸠，語法精簡雁乡，實現(xiàn)精致第喳，但對瀏覽器的支持受限糜俗，最低只能支持IE9。

AvalonJS：是一個簡單易用迷你的MVVM框架曲饱，由大神司徒正美研發(fā)悠抹。使用簡單，實現(xiàn)明快扩淀。

React：React并不屬于MVVM架構(gòu)楔敌，但是它帶來virtual dom的革命性概念，受限于視圖的規(guī)模驻谆。

Angularjs：Google出品卵凑，已經(jīng)被用于Google的多款產(chǎn)品當中。AngularJS有著諸多特性胜臊，最為核心的是：MVC勺卢、模塊化、自動化雙向數(shù)據(jù)綁定象对、語義化標簽黑忱、依賴注入等等。入門容易上手難勒魔，大量避不開的概念也是很頭疼的甫煞。

補充：MVC和MVVM的區(qū)別？

1) MVC

image

M(Model)是指業(yè)務模型冠绢，V(View)是指用戶界面抚吠，C(controller)則是控制器。MVC架構(gòu)主要用于后臺管理系統(tǒng)等中大型項目的分層開發(fā) 弟胀。

M既數(shù)據(jù)模型楷力；V即View視圖, 視圖層, 是指用戶看到并與之交互的界面。比如由html元素組成的網(wǎng)頁界面邮利，或者軟件的客戶端界面弥雹。C即controller控制器, 控制器層，它是 Model 和 View 之間的膠水或者說是中間人延届。

運作流程

Model和View是完全隔離的剪勿，由C作為中間人來負責二者的交互； 同時三者是獨立分開的方庭。這樣可以保證M和V的可測試性和復用性厕吉，但是一般由于C都是為特別的應用場景下的M和V做中介者酱固，所以很難復用。

優(yōu)缺點

優(yōu)點：耦合性低头朱、重用性高运悲、部署快，生命周期成本低项钮、可維護性高班眯；

缺點：不適合小型，中等規(guī)模的應用程序烁巫，視圖與控制器間的過于緊密的連接并且降低了視圖對模型數(shù)據(jù)的訪問署隘。

2) MVVM

image

Model既每個頁面的單獨數(shù)據(jù)，View既每個頁面中的HTML結(jié)構(gòu)亚隙，VM既調(diào)度者磁餐；相比于MVC主要做了如下圖示的調(diào)整：

image

優(yōu)缺點

優(yōu)點：數(shù)據(jù)驅(qū)動，調(diào)度均勻阿弃；缺點：不適合大型項目的架構(gòu)設計诊霹。

二、Vue快速入門

2.1 Hello渣淳，拇指哥

代碼如下：

image

    在上面代碼中脾还，我們通過new Vue()構(gòu)建了一個Vue的實例。

    在實例化 Vue 時水由，需要傳入一個選項對象荠呐，它可以包含數(shù)據(jù)、模板砂客、掛載元素泥张、方法、生命周期鉤子等選項鞠值。比如：掛載元素（el）和數(shù)據(jù)（data）媚创，我們可以操縱數(shù)據(jù)改變視圖。

   el表示Vue要操作哪一個元素下面的區(qū)域彤恶，比如：#app則表示操作id為app的元素下面的區(qū)域钞钙；

   data表示Vue實例的數(shù)據(jù)對象，data的屬性能夠響應數(shù)據(jù)的變化声离；每個 Vue 實例都會代理其 data 對象里所有的屬性芒炼。

    我們打開瀏覽器的控制臺輸入 app.message = '大家好，我是旋之華术徊！'本刽，你會發(fā)現(xiàn)對應的HTML已經(jīng)發(fā)生了改變，如下圖所示：

image

    用 MVVM 的角度，來從新看待這個問題子寓，我們會發(fā)現(xiàn): Model就是data變量暗挑，ViewModel就是這里的new Vue()得到的對象。 

2.2 Vue中雙向數(shù)據(jù)綁定

    MVVM模式其自身是實現(xiàn)了數(shù)據(jù)的雙向綁定的斜友，在Vue.js中我們可以通過指令v-model來實現(xiàn)數(shù)據(jù)雙向綁定炸裆。

代碼如下：

image

運行結(jié)果：

image

    新東西v-model，在Vue中這被稱為指令鲜屏，指令帶有前綴v-表示它們是Vue.js提供的特殊屬性烹看。它們會在渲染過的DOM上應用特殊的響應式行為。當然墙歪，我們就把這指令當做是特殊的HTML特性(attribute)听系。

三、Vue中常用的指令(Directives)

帶特殊前綴的 HTML 特性虹菲，可以讓 Vue.js 對一個 DOM 元素做各種處理。比如：<div v-text="message"></div>掉瞳；這里的 div 元素有一個 v-text 指令毕源，其值為 message；Vue.js 會讓該 div 的文本內(nèi)容與 Vue 實例中的 message 屬性值保持一致陕习。

Directives 可以封裝任何 DOM 操作霎褐。比如 v-attr 會操作一個元素的特性；v-repeat 會基于數(shù)組來復制一個元素该镣；v-on會綁定事件等冻璃。

Vue.js提供了不少常用的內(nèi)置指令，接下來我們快速搞定它們损合，這對我們接下來的開發(fā)幫助很大省艳。主要有：

v-once指令

v-if指令

v-show指令

v-else指令

v-for指令

v-on指令

v-bind指令

v-text指令

v-html指令

如果需要了解其它指令，可以進入官網(wǎng): https://cn.vuejs.org/v2/api/#v-text

3.1 v-once指令

執(zhí)行一次性地插值嫁审，當數(shù)據(jù)改變時跋炕，插值處的內(nèi)容不會更新。

image

3.2 v-if指令

條件渲染指令律适，根據(jù)表達式的真假來添加或刪除元素辐烂。其語法結(jié)構(gòu)是：v-if="expression"，其中expression是一個返回bool值的表達式捂贿，其結(jié)果可以是true或false纠修，也可以是返回true或false的表達式。

代碼如下：

image

我們也可以打開控制臺厂僧，做出如下輸入扣草，進一步體會數(shù)據(jù)驅(qū)動思想：

在上述案例中，Vue.js進行數(shù)據(jù)綁定也完全支持JavaScript表達式支持，這些表達式會在Vue實例的數(shù)據(jù)作用域下作為JavaScript被解析德召。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

   有個限制就是白魂，每個綁定都只能包含單個表達式，以下則不會生效：

{{ var a = 1 }}

{{ if (ok) { return message } }}

3.3 v-show指令

也是條件渲染指令上岗，不同的是有 v-show 的元素會始終渲染并保持在 DOM 中福荸。和v-if指令不同點在于：v-show是根據(jù)表達式之真假值，切換元素的 display CSS 屬性肴掷，當條件變化時該指令觸發(fā)過渡效果敬锐。

代碼如下：

image

元素渲染情況：

image

v-show和v-if的區(qū)別：

• v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當?shù)劁N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件呆瞻； v-show 則只是簡單地基于 CSS 切換台夺。
• v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此痴脾，如果需要頻繁切換使用 v-show 較好颤介，如果在運行時條件不大可能改變則使用 v-if 較好。

3.4 v-else指令

可以用v-else指令為v-if或v-show添加一個“else塊”赞赖。注意：v-else前一兄弟元素必須有 v-if 或 v-else-if滚朵。

代碼如下：

（1）v-if和v-else結(jié)合

image

（2）v-else-if 和 v-else 結(jié)合

image

3.5 v-for指令

• 基于數(shù)據(jù)渲染一個列表，類似于JS中的遍歷前域。其數(shù)據(jù)類型可以是 Array | Object | number | string辕近。
• 該指令之值，必須使用特定的語法(item, index) in items, 為當前遍歷元素提供別名匿垄。 v-for的優(yōu)先級別高于v-if之類的其他指令

代碼如下：

image

image

image

運行結(jié)果如下：

image

另外v-for也可以為數(shù)組索引指定別名（或者用于對象的鍵）：

<div v-for="(item, index) in items"></div>

<div v-for="(val, key) in object"></div>

<div v-for="(val, key, index) in object"></div>

v-for 默認行為試著不改變整體移宅，而是替換元素。迫使其重新排序的元素,您需要提供一個 key 的特殊屬性:

   <div v-for="item in items" :key="item.id">
          {{ item.text }}
   </div>

3.5-1 v-text,v-html

動態(tài)添加
區(qū)別：

• {{message}}：將數(shù)據(jù)解析為純文本椿疗，不能輸出真正的html漏峰，在頁面加載時顯示{{}}，所以通常使用v-html和v-text代替变丧，且花括號方式在以后可能被取消
• v-html="html"：輸出真正的html
• v-text="text"：將數(shù)據(jù)解析為純文本芽狗，不能輸出真正的html，與花括號的區(qū)別是在頁面加載時不顯示{{}}

3.6 v-bind指令

動態(tài)地綁定一個或多個特性痒蓬，或一個組件 prop 到表達式童擎。v-bind指令可以在其名稱后面帶一個參數(shù)，中間用一個冒號隔開攻晒。這個參數(shù)通常是HTML元素的特性（attribute）顾复，比如：

v-bind:src="imageSrc" 可以縮寫： :src="imgaeSrc"

:class="{ red: isRed }" 或 :class="[classA, classB]" ...

:style="{ fontSize: size + 'px' }" 或 :style="[styleObjectA, styleObjectB]" ...

綁定一個有屬性的對象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"

...

語法結(jié)構(gòu)：v-bind:argument="expression"

因為 Mustache 不能在 HTML 屬性中使用鲁捏，應使用 v-bind 指令芯砸，Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優(yōu)勢在于可以應用在 Javascript、PHP假丧、Python双揪、Perl 等多種編程語言中。

案例實操：讓HTML5學院在各大學院中處于選中狀態(tài)

image

image

運行結(jié)果

image

3.7 v-on指令

動態(tài)地綁定一個或多個特性包帚，或一個組件 prop 到表達式渔期；其作用和v-bind類似。注意：如果用在普通元素上時渴邦，只能監(jiān)聽 原生 DOM 事件疯趟；但是如果用在自定義元素組件上時，也可以監(jiān)聽子組件觸發(fā)的自定義事件谋梭。

常用的修飾符包括：

.stop - 調(diào)用 event.stopPropagation()信峻；停止冒泡。

.prevent - 調(diào)用 event.preventDefault(); 停止監(jiān)聽原生事件瓮床。

.capture - 添加事件偵聽器時使用 capture 模式盹舞。

.self - 只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)。

.{keyCode | keyAlias} - 只當事件是從偵聽器綁定的元素本身觸發(fā)時才觸發(fā)回調(diào)纤垂。

.once - 觸發(fā)一次矾策。

使用手法：

<button v-on:click="doThis"></button>

<button v-on:click="doThat('hello', $event)"></button>

<button @click="doThis"></button>

<button @click.stop="doThis"></button>

<button @click.prevent="doThis"></button>

<form @submit.prevent></form>

<button @click.stop.prevent="doThis"></button>

<input @keyup.enter="onEnter">

<input @keyup.13="onEnter">

<button v-on:click.once="doThis"></button>

案例實操：

image

運行結(jié)果:

image

我們在上面案例中接觸到了新的methods方法，通過這個方法可以直接通過 app 實例訪問這些方法峭沦，或者在指令表達式中使用,方法中的 this 自動綁定為 Vue 實例。這在后面的章節(jié)中我們還會介紹逃糟。

四吼鱼、Vue指令篇—綜合演練

結(jié)合上述指令，完成小碼哥學生信息錄入绰咽。主要功能有動態(tài)添加學生信息菇肃，動態(tài)刪除學生信息，空值校驗取募。

案例效果圖如下：

image

案例代碼如下：

image

image

image

image

4.1 數(shù)據(jù)持久化

在開發(fā)中, 數(shù)據(jù)持久化主要是兩種方式: 本地存儲和網(wǎng)絡存儲琐谤，我們先來看下本地存儲，主要sessionStorage和 localStorage兩種方式玩敏。此處我們先用后者：

localStorage

localStorage生命周期是永久斗忌，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在旺聚。

存放數(shù)據(jù)大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中保存织阳，不參與和服務器的通信。

常用API

1）localStorage.setItem("key","value");

以“key”為名稱存儲一個值“value”

2）localStorage.getItem("key");

獲取名稱為“key”的值

3）localStorage.removeItem("key");

刪除名稱為“key”的信息

4）localStorage.clear()

清空localStorage中所有信息

核心代碼：

image