Vue.js基礎(chǔ)知識(shí)及應(yīng)用時(shí)間：匯報(bào)人：JavaScript+Vue.js前端開發(fā)任務(wù)驅(qū)動(dòng)式教程1.Vue.js概述2.下載、安裝與引入Vue.js3.Vue.js應(yīng)用入門4.Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)5.Vue.js的DOM選項(xiàng)6.Vue.js的實(shí)例屬性7.Vue.js的實(shí)例方法8.認(rèn)知MVVM模式目錄1．什么是VueVue（讀音為/vju?/，類似于view）是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，采用MVVM（Model-View-ViewModel，模型-視圖-視圖模型）設(shè)計(jì)模式，支持?jǐn)?shù)據(jù)驅(qū)動(dòng)和組件化開發(fā)。Vue采用自底向上增量開發(fā)的設(shè)計(jì)，核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另外，當(dāng)與單文件組件和Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時(shí)，Vue完全能夠?yàn)閺?fù)雜的SPA提供驅(qū)動(dòng)。Vue.js概述2．如何理解Vue是漸進(jìn)式框架簡(jiǎn)單理解漸進(jìn)式框架，就是用戶想用或者能用的功能特性先使用，用戶不想用的部分功能特性可以先不使用。Vue不強(qiáng)求用戶一次性接受并使用它的全部功能特性。漸進(jìn)式JavaScript框架可以控制一個(gè)頁面的一個(gè)標(biāo)簽，也可以控制一系列標(biāo)簽，還可以控制整個(gè)頁面，甚至可以控制整個(gè)前端項(xiàng)目。用戶想用它的哪個(gè)組件就用哪個(gè)組件，沒有強(qiáng)主張。如果只使用Vue最基礎(chǔ)的聲明式渲染的功能，則完全可以把Vue當(dāng)作一個(gè)模板引擎來使用；如果想以組件化開發(fā)方式進(jìn)行開發(fā)，則可以進(jìn)一步使用Vue的組件系統(tǒng)；如果要制作單頁應(yīng)用，則使用Vue的客戶端路由功能；如果組件越來越多，需要共享一些數(shù)據(jù)，則可以使用Vue的狀態(tài)管理功能；如果想在團(tuán)隊(duì)里執(zhí)行統(tǒng)一的開發(fā)流程或規(guī)范，則可以使用構(gòu)建工具。所以，可以根據(jù)項(xiàng)目的復(fù)雜度來自主選擇使用Vue的功能。Vue的核心功能是一個(gè)視圖模板引擎，但這不是說Vue不能成為一個(gè)框架。在聲明式渲染（視圖模板引擎）的基礎(chǔ)上，用戶可以通過添加組件系統(tǒng)、客戶端路由、大規(guī)模狀態(tài)管理來構(gòu)建一個(gè)完整的框架。更重要的是，這些功能相互獨(dú)立，開發(fā)人員可以在核心功能的基礎(chǔ)上任意選用其他組件，不一定要全部整合在一起?？梢钥吹?，所謂的“漸進(jìn)式”其實(shí)就是Vue的使用方式，同時(shí)體現(xiàn)了Vue的設(shè)計(jì)理念。Vue.js概述3．什么是單頁應(yīng)用單頁應(yīng)用一般只有一個(gè)HTML頁面，客戶端頁面通過與服務(wù)器的交互動(dòng)態(tài)更新頁面中的內(nèi)容，通過前端路由實(shí)現(xiàn)無刷新跳轉(zhuǎn)。Vue應(yīng)用是單頁應(yīng)用的一員。單頁應(yīng)用的工作原理：通過JavaScript感知到URL的變化，可以使用JavaScript動(dòng)態(tài)地將當(dāng)前頁面的內(nèi)容清除，并將下一個(gè)頁面的內(nèi)容掛載到當(dāng)前頁面上，此時(shí)的路由不是由后端來處理，而是由前端來處理，判斷頁面到底顯示哪個(gè)組件，清除不需要的組件。Vue.js概述（1）優(yōu)點(diǎn)①改善用戶體驗(yàn)。②符合前后端分離工作模式，單頁應(yīng)用可以結(jié)合RESTful（一種網(wǎng)絡(luò)應(yīng)用程序的設(shè)計(jì)風(fēng)格和開發(fā)方式），通過AJAX異步請(qǐng)求數(shù)據(jù)接口獲取數(shù)據(jù)，后端只需要負(fù)責(zé)數(shù)據(jù)處理，不用考慮渲染，前端使用Vue等MVVM框架渲染數(shù)據(jù)非常合適。③良好的用戶體驗(yàn)，應(yīng)用沒有頁面跳轉(zhuǎn)，無須刷新切換內(nèi)容，整體頁面更流暢。④減輕服務(wù)器壓力，展示邏輯和數(shù)據(jù)渲染在前端完成，服務(wù)器任務(wù)更明確，局部刷新對(duì)服務(wù)器的壓力更小。⑤多平臺(tái)共享，無論是移動(dòng)端，還是PC（PersonalComputer，個(gè)人計(jì)算機(jī)）端都可以共享服務(wù)端接口。⑥后端數(shù)據(jù)接口可復(fù)用，設(shè)計(jì)的JSON格式的數(shù)據(jù)可以在PC端和移動(dòng)端通用。（2）缺點(diǎn)①SEO（SearchEngineOptimization，搜索引擎優(yōu)化）難度大，由于應(yīng)用數(shù)據(jù)是通過請(qǐng)求接口動(dòng)態(tài)渲染的，因此在進(jìn)行SEO搜索時(shí)，搜索引擎可能無法抓取到動(dòng)態(tài)生成的內(nèi)容，在頁面中會(huì)顯示為空的<div>。②首頁加載慢，首頁需要一次加載多個(gè)請(qǐng)求，渲染時(shí)間可能會(huì)比較長(zhǎng)。單頁應(yīng)用下大部分的資源需要在首頁加載，會(huì)造成首頁白屏等問題。Vue.js概述4．什么是多頁應(yīng)用多頁應(yīng)用（MultiplePageApplication，MPA）指有多個(gè)獨(dú)立頁面（多個(gè)HTML頁面）的應(yīng)用，每個(gè)頁面必須重復(fù)加載JavaScript、CSS相關(guān)資源。多頁應(yīng)用跳轉(zhuǎn)時(shí)，需要刷新整頁資源。每一次頁面跳轉(zhuǎn)的時(shí)候，后端服務(wù)器都會(huì)返回一個(gè)新的HTML文件。多頁應(yīng)用的優(yōu)點(diǎn)之一是首頁時(shí)間短，首頁時(shí)間是指首個(gè)頁面內(nèi)容展示的時(shí)間。當(dāng)用戶訪問頁面的時(shí)候，服務(wù)器會(huì)返回一個(gè)HTML文件，頁面就會(huì)展示出來，這個(gè)過程只處理了一個(gè)HTTP請(qǐng)求，所以頁面展示的速度非常快。多頁應(yīng)用還有一個(gè)優(yōu)點(diǎn)——SEO效果好，搜索引擎在對(duì)網(wǎng)頁進(jìn)行排名的時(shí)候，要根據(jù)網(wǎng)頁內(nèi)容給予網(wǎng)頁權(quán)值。搜索引擎是可以識(shí)別HTML文件內(nèi)容的，而每個(gè)頁面所有的內(nèi)容都放在HTML文件中，所以多頁應(yīng)用的SEO排名效果好。但是多頁應(yīng)用也有缺點(diǎn)，即切換速度慢，因?yàn)槊看翁D(zhuǎn)都需要發(fā)出一個(gè)HTTP請(qǐng)求。如果網(wǎng)速比較慢，在頁面之間來回跳轉(zhuǎn)時(shí)，就會(huì)出現(xiàn)明顯的卡頓現(xiàn)象。Vue.js概述5．區(qū)分多頁應(yīng)用模式與單頁應(yīng)用模式多頁應(yīng)用模式與單頁應(yīng)用模式在應(yīng)用構(gòu)成用戶體驗(yàn)等方面各有特點(diǎn)，其比較如表8-1所示。Vue.js概述6．區(qū)分前端開發(fā)與后端開發(fā)（1）什么是前端開發(fā)構(gòu)建用戶界面屬于前端開發(fā)范疇，前端開發(fā)主要涉及網(wǎng)站和App的開發(fā)，簡(jiǎn)單地說，用戶能夠在App和瀏覽器上看到的東西都屬于前端。以正在瀏覽的網(wǎng)頁為例，網(wǎng)頁上的內(nèi)容、圖片、段落之間的空隙、左上角的圖標(biāo)、右下角的通知按鈕等都屬于前端。移動(dòng)App的前端和網(wǎng)站的前端是一樣的。例如，用戶所看到的內(nèi)容、按鈕、圖片都屬于前端。另外，因?yàn)橐苿?dòng)設(shè)備的屏幕是可以觸摸的，所以應(yīng)用程序?qū)Ω鞣N觸控手勢(shì)（如放大/縮小、雙擊、滑動(dòng)等）做出的響應(yīng)也屬于前端，它們屬于前端的活動(dòng)部分。前端開發(fā)用到的技術(shù)包括但不限于HTML5、CSS3、JavaScript、jQuery、BootStrap、Vue.js、Node.js、webpack、Angular、React、Ionic、Swift、Kotlin等。Vue.js概述（2）什么是后端開發(fā)后端開發(fā)即服務(wù)器端開發(fā)，主要涉及軟件系統(tǒng)“后端”的內(nèi)容。例如，用于托管網(wǎng)站和App數(shù)據(jù)的服務(wù)器、放置在后端服務(wù)器與瀏覽器及App之間的中間件，它們都屬于后端。簡(jiǎn)單地說，用戶在屏幕上看不到但又被用來為前端提供支持的內(nèi)容屬于后端。網(wǎng)站的后端涉及搭建服務(wù)器、保存和獲取數(shù)據(jù)，以及用于連接前端的接口。如果說前端開發(fā)人員關(guān)心的是網(wǎng)站外觀，那么后端開發(fā)人員關(guān)心的是如何通過代碼、API和數(shù)據(jù)庫集成來提升網(wǎng)站的加載速度、性能和響應(yīng)性。與前端類似，移動(dòng)App的后端與網(wǎng)站的后端是一樣的。為移動(dòng)App搭建后端有以下選擇：云平臺(tái)（AWS、Firebase）、用戶自己的服務(wù)器或MBaaS（MobileBackendasaService，移動(dòng)后端即服務(wù)）。后端開發(fā)用到的技術(shù)包括但不限于Apache、PHP、Ruby、nginx、MySQL、MongoDB等。Vue.js概述7．區(qū)分前后端不分離模式與前后端分離模式（1）前后端不分離模式在前后端不分離模式中，前端頁面顯示的效果都是由后端控制的，由后端渲染頁面或重定向，即后端需要控制前端的展示，前端與后端的耦合度很高。（2）前后端分離模式在前后端分離模式中，后端僅返回前端所需要的數(shù)據(jù)，不渲染HTML頁面，也不控制前端效果。至于前端用戶看到什么樣的效果、從后端請(qǐng)求的數(shù)據(jù)如何加載到前端，都由前端自己決定。由于不同前端所需的后端數(shù)據(jù)基本相同，因此后端僅需開發(fā)一套邏輯對(duì)外提供數(shù)據(jù)即可。Vue.js概述8．區(qū)分框架和庫Vue是目前流行的Web前端應(yīng)用開發(fā)框架之一，其特點(diǎn)之一就是具有較強(qiáng)的靈活性，其生態(tài)系統(tǒng)十分繁榮。Vue可以根據(jù)項(xiàng)目的需求和復(fù)雜程度，靈活選擇和使用不同的功能和模塊，既可以作為簡(jiǎn)單的庫集成到項(xiàng)目中，又可以作為一個(gè)完整框架構(gòu)建復(fù)雜的單頁應(yīng)用。（1）什么是框架框架是一套架構(gòu)，會(huì)基于自身特性向用戶提供一套相當(dāng)完整的解決方案，控制權(quán)在框架本身，使用者需要按照框架所規(guī)定的某種特定規(guī)范進(jìn)行開發(fā)。目前流行的前端框架主要有Vue、Angular。（2）什么是庫庫是一種插件，是一種封裝好的特定方法的集合，提供給開發(fā)人員使用，控制權(quán)在使用者手里。目前流行的庫包括jQuery、Zepto、axios等。Vue.js概述例：使用HTML代碼編輯器Dreamweaver創(chuàng)建網(wǎng)頁demo0801.html，在該網(wǎng)頁中使用document.

getElementById(id)方法訪問網(wǎng)頁中的HTML元素，使用id屬性標(biāo)識(shí)HTML元素，并使用innerHTML屬性來獲取或插入元素內(nèi)容，并在網(wǎng)頁中輸出文本內(nèi)容“HelloVue”。<!doctypehtml><html><head><metacharset="utf-8"><title>借助JavaScript訪問HTML元素</title></head><body><divid="app"><pid="demo"></p></div><script>varmessage='HelloVue';document.getElementById("demo").innerHTML=message;</script></body></html>Vue.js概述在上述代碼中，<script>標(biāo)簽中的JavaScript語句可以在Web瀏覽器中執(zhí)行，document.getElementById("demo")是使用id屬性來查找HTML元素的JavaScript代碼，通過innerHTML屬性修改元素的HTML內(nèi)容。1．下載VueVue可以從官網(wǎng)直接下載，Vue分為開發(fā)版本（vue.js）和生產(chǎn)版本（vue.min.js），開發(fā)版本包含完整的警告信息和調(diào)試模式，生產(chǎn)版本刪除了警告信息，是壓縮后的文件。建議選擇開發(fā)版本，在開發(fā)環(huán)境下不要使用生產(chǎn)版本，否則會(huì)失去與所有常見錯(cuò)誤相關(guān)的警告信息。2．使用npm安裝Vue在使用Vue構(gòu)建大型應(yīng)用時(shí)推薦使用npm安裝最新穩(wěn)定版Vue。npm能很好地和諸如webpack或Browserify模塊打包器配合使用。同時(shí)Vue可提供配套工具來開發(fā)單文件組件。（1）打開Windows（以Window10為例）的命令提示符窗口打開如圖8-2所示的Windows的命令提示符窗口。（2）執(zhí)行安裝Vue的命令在提示符“>”后輸入以下安裝Vue的命令。npminstallvue按【Enter】鍵即可開始安裝Vue。下載、安裝與引入Vue.js下載與安裝Vue.js3．使用淘寶npm鏡像安裝Vue直接使用npm官方鏡像安裝Vue有點(diǎn)兒慢，這里推薦使用淘寶npm鏡像。淘寶npm鏡像是一個(gè)完整的鏡像，可以以此鏡像代替npm官方鏡像。執(zhí)行以下命令可以切換到淘寶npm鏡像服務(wù)器。npmconfigsetregistry還可以使用淘寶定制的cnpm（gzip壓縮支持)）命令行工具代替默認(rèn)的npm。執(zhí)行以下命令，即可使用cnpm命令來安裝Vue。npminstall-gcnpm--registry=使用cnpm安裝Vue的命令如下。cnpminstallvuenpm版本需要高于3.0，如果低于此版本，則需要使用以下命令將其升級(jí)。升級(jí)npm的命令如下。cnpminstallnpm-g升級(jí)或安裝cnpm的命令如下。npminstallcnpm-g下載、安裝與引入Vue.js1．直接使用<script>標(biāo)簽引入將Vue下載到本地計(jì)算機(jī)后，直接使用<script>標(biāo)簽引入后，Vue會(huì)被注冊(cè)為一個(gè)全局變量。直接使用<script>標(biāo)簽引入Vue的代碼如下。<scriptsrc="vue.js"></script>上述代碼表示引入當(dāng)前路徑下的Vue文件。2．使用在線CDN方法引入常用的引入方法如下。<scriptsrc="/vue"></script><scriptsrc="/vue/dist/vue.js"></script><scriptsrc="/npm/vue/dist/vue.js"></script>其中，/vue/dist/vue.js會(huì)保持引入的版本和npm發(fā)布的最新版本一致。下載、安裝與引入Vue.js引入Vue.js【示例8-2】demo0802.html使用HTML代碼編輯器Dreamweaver創(chuàng)建網(wǎng)頁demo0802.html，編寫代碼的具體要求如下。（1）引入Vue。（2）定義唯一根元素<div>。（3）使用兩對(duì)花括號(hào)“{{}}”綁定Vue對(duì)象中的變量，在網(wǎng)頁中輸出Vue變量message的值，其值為字符串“HelloVue”。（4）創(chuàng)建Vue的對(duì)象，并把數(shù)據(jù)綁定到創(chuàng)建好的根元素<div>上。（5）創(chuàng)建Vue對(duì)象，通過el與<div>元素綁定。（6）定義data屬性，在該屬性中定義message變量，在該變量中存放Vue對(duì)象中綁定的數(shù)據(jù)。（7）在網(wǎng)頁中輸出文本內(nèi)容“HelloVue”，該網(wǎng)頁的代碼如下。Vue.js應(yīng)用入門<!doctypehtml><html><head><metacharset="utf-8"><title>網(wǎng)頁中輸出Vue變量的值</title><!--引入Vue--><scriptsrc="vue.js"></script></head><body><!--定義唯一根元素<div>--><divid="app"><!--Vue模板綁定數(shù)據(jù)的方法，使用兩對(duì)花括號(hào)“{{}}”綁定Vue對(duì)象中的變量--><p>{{message}}</p></div><script>Vue.js應(yīng)用入門//創(chuàng)建Vue的對(duì)象，并把數(shù)據(jù)綁定到前面創(chuàng)建好的根元素<div>上varvm=newVue({ //創(chuàng)建Vue對(duì)象el:'#app', //el屬性：通過el與<div>元素綁定，#app是id選擇器data:{ //data屬性：Vue對(duì)象中綁定的數(shù)據(jù)message:'HelloVue' //message是自定義的變量}})</script></body></html>網(wǎng)頁demo0802.html的輸出內(nèi)容與網(wǎng)頁demo0801.html的輸出內(nèi)容相同，但實(shí)現(xiàn)方式不同，網(wǎng)頁demo0801.html使用JavaScript實(shí)現(xiàn)，網(wǎng)頁demo0802.html使用Vue實(shí)現(xiàn)。從網(wǎng)頁demo0802.html的代碼中可以看出，應(yīng)用Vue技術(shù)輸出變量message的值時(shí)，會(huì)涉及以下3個(gè)步驟，并且這3個(gè)步驟缺一不可。1．引入Vue<scriptsrc="vue.js"></script>引入Vue文件后，會(huì)得到一個(gè)構(gòu)造函數(shù)Vue()，用來創(chuàng)建Vue實(shí)例。2．定義唯一根元素<div><divid="app"><p>{{message}}</p></div>其中，id值為app的元素是Vue實(shí)例控制的元素。3．創(chuàng)建Vue實(shí)例并把數(shù)據(jù)綁定到前面創(chuàng)建好的根元素<div>上<script>varvm=newVue({el:'#app',data:{message:'HelloVue'}})</script>Vue.js應(yīng)用入門其中，vm表示Vue實(shí)例；el表示當(dāng)前vm實(shí)例要控制的頁面區(qū)域，即id為app的元素；data屬性用來存放el中要用到的數(shù)據(jù)；message變量存儲(chǔ)的數(shù)據(jù)為“HelloVue”，該變量存儲(chǔ)的數(shù)據(jù)通過“{{}}”插值表達(dá)式渲染到頁面，對(duì)應(yīng)的代碼如下。<divid="app"><p>{{message}}</p></div>Vue.js應(yīng)用入門Vue最簡(jiǎn)單的應(yīng)用之一就是將其當(dāng)作一個(gè)頁面模板引擎，也就是采用模板語法把數(shù)據(jù)渲染到頁面。Vue使用雙花括號(hào)“{{}}”來進(jìn)行頁面模板插值，以下message相當(dāng)于一個(gè)變量或占位符，最終會(huì)表示為真正的文本內(nèi)容。<divid="app"><p>{{message}}</p></div>Vue.js應(yīng)用入門頁面模板插值每個(gè)

Vue

應(yīng)用都是通過構(gòu)造函數(shù)

Vue()創(chuàng)建一個(gè)

Vue

的根實(shí)例來啟動(dòng)的，經(jīng)常使用變量名

vm（ViewModel的縮寫）表示Vue實(shí)例。例如：varvm=newVue({//選項(xiàng)對(duì)象})在實(shí)例化Vue時(shí)，需要傳入一個(gè)選項(xiàng)對(duì)象，它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。例如：varvm=newVue({el:'#app',data:{message:'HelloVue'}})上述代碼為Vue()構(gòu)造函數(shù)傳入了一個(gè)對(duì)象，對(duì)象中包括el和data這兩個(gè)參數(shù)，參數(shù)說明如下。Vue.js應(yīng)用入門創(chuàng)建Vue.js實(shí)例（1）參數(shù)elel是element的縮寫，該參數(shù)用于提供一個(gè)在頁面上已存在的DOM元素作為Vue實(shí)例的掛載目標(biāo)，參數(shù)值有兩種類型，包括string和HTMLElement。el:"#app"表示掛載目標(biāo)是id為"app"的元素，也可以寫為“el:document.getElementById('app’)”。（2）參數(shù)data參數(shù)data表示Vue實(shí)例的數(shù)據(jù)對(duì)象。data:{message:'HelloVue'}表示變量message所代表的真實(shí)值為“HelloVue”?？雌饋恚鲜鍪纠c渲染一個(gè)字符串模板非常類似，但是Vue在背后做了大量工作，其數(shù)據(jù)和DOM已經(jīng)被綁定在一起，并且所有的元素都是響應(yīng)式的。Vue.js應(yīng)用入門創(chuàng)建Vue.js實(shí)例在Chrome瀏覽器中瀏覽網(wǎng)頁demo0802.html。打開瀏覽器控制臺(tái)界面，這里以Chrome瀏覽器為例予以說明。按【F12】快捷鍵，打開瀏覽器控制臺(tái)界面，上方切換到“Elements”選項(xiàng)卡，下方切換到“Console”選項(xiàng)卡，在標(biāo)識(shí)符“>”后輸入vm.message，下方可以看該屬性值為“HelloVue”，如圖8-4所示。在瀏覽器控制臺(tái)中手動(dòng)輸入并執(zhí)行代碼vm.message='Happyeveryday'，將vm.message的值修改為“Happyeveryday”，可看到DOM元素相應(yīng)的更新，如圖8-5所示。Vue.js應(yīng)用入門瀏覽網(wǎng)頁demo0802.html與查看數(shù)據(jù)一般情況下，當(dāng)模板內(nèi)容較簡(jiǎn)單時(shí)，使用data選項(xiàng)配合表達(dá)式進(jìn)行簡(jiǎn)單的數(shù)據(jù)展示和操作即可。涉及復(fù)雜邏輯時(shí)，需要用到computed、methods、watch等處理復(fù)雜的邏輯和響應(yīng)式數(shù)據(jù)。1．datadata是Vue實(shí)例的數(shù)據(jù)對(duì)象，Vue會(huì)遞歸地將data屬性轉(zhuǎn)換為getter和setter，從而使data屬性能響應(yīng)數(shù)據(jù)變化。其中，getter用于獲取屬性的值，setter用于設(shè)置屬性的值。對(duì)象必須是純粹的對(duì)象（含有0個(gè)、1個(gè)或多個(gè)鍵值對(duì)）：瀏覽器API創(chuàng)建的原生對(duì)象，原型（Prototype）上的屬性會(huì)被忽略。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)例：創(chuàng)建網(wǎng)頁demo0803.html，在該網(wǎng)頁中編寫代碼，創(chuàng)建Vue實(shí)例，通過vm.$data訪問Vue實(shí)例的數(shù)據(jù)對(duì)象，并使用其他方法訪問Vue實(shí)例的數(shù)據(jù)對(duì)象。<divid="app">{{message}}</div><script>varvm=newVue({el:'#app',data:{message:'請(qǐng)登錄!'}})console.log(vm.$data);console.log(vm.message);console.log(vm.$data.message);</script>在Chrome瀏覽器中瀏覽網(wǎng)頁demo0803.html，打開瀏覽器控制臺(tái)，切換到“Console”選項(xiàng)卡，可以看到如圖8-6所示的輸出結(jié)果。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)創(chuàng)建Vue實(shí)例之后，可以通過vm.$data訪問原始數(shù)據(jù)對(duì)象。Vue實(shí)例代理了data對(duì)象上的所有屬性，因此訪問vm.message等價(jià)于訪問vm.$data.message。例：代碼如下。<divid="app">{{message}}</div><script>varvalue={message:'請(qǐng)登錄!'}varvm=newVue({el:'#app',data:value})console.log(vm.$data===value);//true</script>在Vue中，被代理的屬性是響應(yīng)式的，也就是說，值的任何改變都會(huì)觸發(fā)視圖的重新渲染。不僅如此，這種響應(yīng)式的特點(diǎn)還會(huì)確保對(duì)代理屬性的修改會(huì)直接影響到原始數(shù)據(jù)對(duì)象，對(duì)原始數(shù)據(jù)對(duì)象的修改也會(huì)反映到代理屬性上。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)但是，以_或$開頭的屬性不會(huì)被Vue實(shí)例代理，因?yàn)樗鼈兛赡芎蚔ue內(nèi)置的屬性、API方法產(chǎn)生沖突。用戶可以使用諸如vm.$data._property的方式訪問這些屬性。例：代碼如下。<divid="app">{{message}}</div><script>varvm=newVue({el:'#app',data:{message:'請(qǐng)登錄!',_userName:'admin',$password:'123456'}})console.log(vm.message); //請(qǐng)登錄!console.log(vm._userName); //undefinedconsole.log(vm.$data._userName); //'admin'console.log(vm.$password); //undefinedconsole.log(vm.$data.$password); //'123456'</script>Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)當(dāng)定義一個(gè)組件時(shí)，data必須聲明為返回一個(gè)初始數(shù)據(jù)對(duì)象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個(gè)實(shí)例。如果data仍然是一個(gè)純粹的對(duì)象，則所有的實(shí)例將共同引用同一個(gè)數(shù)據(jù)對(duì)象。而通過提供data函數(shù)，每次創(chuàng)建一個(gè)新實(shí)例后，用戶能夠調(diào)用data函數(shù)，從而返回初始數(shù)據(jù)的一個(gè)全新副本數(shù)據(jù)對(duì)象。例如：//Vue.extend()中的data必須是函數(shù)varComponent=Vue.extend({data:function(){return{x:1}}不應(yīng)該對(duì)data屬性使用箭頭函數(shù)。如果對(duì)data屬性使用了箭頭函數(shù)，則this不會(huì)指向這個(gè)組件的實(shí)例，但仍然可以將其實(shí)例作為函數(shù)的第一個(gè)參數(shù)來訪問。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)2．propsprops可以是數(shù)組或?qū)ο?，用于定義組件可以接收的外部屬性；prop是通過props定義的單個(gè)屬性，用于接收來自父組件的數(shù)據(jù)。例如：Vponent('props-demo-simple',{props:['size','myMessage']})props可以是對(duì)象，對(duì)象允許配置高級(jí)選項(xiàng)，用于進(jìn)行類型檢測(cè)、自定義驗(yàn)證和設(shè)置默認(rèn)值等。用戶可以基于對(duì)象的語法使用以下選項(xiàng)。（1）type：可以是下列函數(shù)中的一種——String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定義構(gòu)造函數(shù)或者上述內(nèi)容組成的數(shù)組。其可檢查一個(gè)prop是否為給定的類型，否則拋出警告。（2）default：為prop指定默認(rèn)值。如果prop沒有被傳入值，則換用這個(gè)默認(rèn)值。對(duì)象或數(shù)組的默認(rèn)值必須從一個(gè)工廠函數(shù)返回。（3）required：定義prop是否為必填項(xiàng)。在非生產(chǎn)環(huán)境中，如果這個(gè)值為true且prop沒有被傳入值，則將會(huì)拋出一個(gè)控制臺(tái)警告。（4）validator：自定義驗(yàn)證函數(shù)會(huì)將prop的值作為唯一的參數(shù)代入。在非生產(chǎn)環(huán)境中，如果該函數(shù)返回一個(gè)false（即驗(yàn)證失?。?，則會(huì)拋出一個(gè)控制臺(tái)警告。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)例如：//對(duì)象語法，提供驗(yàn)證Vponent('props-demo-advanced',{props:{//檢測(cè)類型

height:Number,//檢測(cè)類型+其他驗(yàn)證

age:{type:Number,default:0,required:true,validator:function(value){returnvalue>=0}}}})Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)3．propsData創(chuàng)建實(shí)例時(shí)，propsData用于傳遞props，主要作用是方便測(cè)試，只用于new創(chuàng)建的實(shí)例中。例如：varComp=Vue.extend({props:['msg'],template:'<div>{{msg}}</div>'})varvm=newComp({propsData:{msg:'hello'}})Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)4．computedVue項(xiàng)目中有的數(shù)據(jù)經(jīng)常會(huì)發(fā)生變化，可以使用computed來實(shí)現(xiàn)其變化，Vue的computed屬性是Vue實(shí)例中的一個(gè)配置選項(xiàng)。通常computed屬性中是與計(jì)算相關(guān)的函數(shù)，在函數(shù)內(nèi)實(shí)現(xiàn)需要的邏輯功能，最后返回計(jì)算出來的值，即可以把復(fù)雜計(jì)算過程寫到一個(gè)計(jì)算屬性中，使其實(shí)現(xiàn)動(dòng)態(tài)計(jì)算。computed屬性一般用來通過其他數(shù)據(jù)計(jì)算出一個(gè)新數(shù)據(jù)，其優(yōu)點(diǎn)之一是將新的數(shù)據(jù)緩存下來，當(dāng)其他的依賴數(shù)據(jù)沒有發(fā)生改變時(shí)，它調(diào)用的是緩存的數(shù)據(jù)，這就極大地提高了程序的性能。computed屬性將被混入Vue實(shí)例中，所有g(shù)etter和setter的this自動(dòng)地指向Vue實(shí)例。計(jì)算屬性默認(rèn)只有g(shù)etter，但在需要時(shí)也可以提供setter。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)創(chuàng)建網(wǎng)頁demo0806.html，在該網(wǎng)頁中編寫代碼，在Vue的computed屬性中定義讀取和設(shè)置數(shù)據(jù)的方法，在瀏覽器控制臺(tái)中輸出屬性值。varvm=newVue({data:{x:1},computed:{//僅讀取xDouble:function(){returnthis.x*2},//讀取和設(shè)置xPlus:{get:function(){returnthis.x+2},set:function(v){this.x=v-1}}}})Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)console.log(vm.xPlus); //3console.log(vm.xPlus=4); //4console.log(vm.x); //3console.log(vm.xDouble); //6不應(yīng)該使用箭頭函數(shù)來定義computed屬性，如果對(duì)computed屬性使用了箭頭函數(shù)，則this不會(huì)指向Vue實(shí)例，但仍然可以將該實(shí)例作為函數(shù)的第一個(gè)參數(shù)來訪問。

computed屬性的結(jié)果會(huì)被緩存，依賴的響應(yīng)式屬性才會(huì)重新計(jì)算。如果某個(gè)依賴（如非響應(yīng)式屬性）在該實(shí)例范疇之外，則computed屬性是不會(huì)被更新的。5．methodsmethods是Vue實(shí)例中的一個(gè)配置選項(xiàng)，methods選項(xiàng)用于定義方法，可以直接通過Vue實(shí)例訪問這些方法，或者在指令表達(dá)式中使用這些方法。方法中的this自動(dòng)綁定為Vue實(shí)例。定義在methods選項(xiàng)中的方法可以作為頁面中的事件處理方法使用，當(dāng)事件觸發(fā)后，可執(zhí)行相應(yīng)的事件處理方法。不應(yīng)該使用箭頭函數(shù)來定義methods選項(xiàng)（如plus:()=>this.x++），其原因是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以this將不會(huì)按照期望指向Vue實(shí)例，this.x將是undefined。例：代碼如下。varvm=newVue({data:{x:2},methods:{plus:function(){this.x++}}})vm.plus()console.log(vm.x)//3Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)例：創(chuàng)建網(wǎng)頁demo0808.html，在該網(wǎng)頁中編寫代碼，分別使用computed屬性與methods選項(xiàng)輸出當(dāng)前時(shí)間。<divid="app"><p>computed計(jì)算屬性："{{time1}}"</p><p>methods方法："{{time2()}}"</p></div><script>varvm=newVue({el:'#app',computed:{time1:function(){return(newDate()).toLocaleTimeString()}},methods:{time2:function(){return(newDate()).toLocaleTimeString()}}})</script>Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)假設(shè)有一個(gè)性能開銷比較大的計(jì)算屬性W，它需要遍歷一個(gè)極大的數(shù)組并做大量的計(jì)算，可能還有其他的計(jì)算屬性依賴于W。如果沒有緩存，則將不可避免地多次執(zhí)行W的getter。如果不希望有緩存，則可使用methods。6．watchVue提供了一種通用的方式（watch方法）來觀察和響應(yīng)Vue實(shí)例上的一個(gè)表達(dá)式或者一個(gè)函數(shù)計(jì)算結(jié)果的變化，回調(diào)函數(shù)得到的參數(shù)為新值和原值。表達(dá)式只接受簡(jiǎn)單的鍵路徑，對(duì)于更復(fù)雜的表達(dá)式，可用一個(gè)函數(shù)取代。watch方法是一個(gè)對(duì)象，其鍵是需要觀察的表達(dá)式或函數(shù)，值是對(duì)應(yīng)的回調(diào)函數(shù)，值也可以是方法名，或者包含選項(xiàng)的對(duì)象。Vue實(shí)例將會(huì)在實(shí)例化時(shí)調(diào)用$watch()，遍歷watch對(duì)象的每一個(gè)屬性。在變更（不是替換）對(duì)象或數(shù)組時(shí)，原值將與新值相同，因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對(duì)象或數(shù)組。Vue不會(huì)保留變更之前值的副本。不應(yīng)該使用箭頭函數(shù)來定義watch方法，如searchQuery:newValue=>this.updateAutocomplete(newValue)。原因是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以this將不會(huì)按照期望指向Vue實(shí)例，this.updateAutocomplete將是undefined。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)7．比較computed、methods和watchcomputed與methods、watch最大的區(qū)別在于，只有在當(dāng)前屬性發(fā)生變化后，computed才會(huì)被觸發(fā)，大大提升了優(yōu)化程度。computed和watch都是用于觀察頁面的數(shù)據(jù)變化的。computed只有當(dāng)頁面數(shù)據(jù)變化時(shí)才會(huì)計(jì)算，當(dāng)數(shù)據(jù)沒有變化時(shí)，它會(huì)讀取緩存。而watch每次都需要執(zhí)行函數(shù)，methods也是每次都需要執(zhí)行函數(shù)。如果數(shù)據(jù)變化時(shí)執(zhí)行異步操作，則使用watch更合適。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)創(chuàng)建網(wǎng)頁demo0809.html，在該網(wǎng)頁中，編寫代碼，應(yīng)用Vue的watch方法輸出與觀察變量的新值與原值。<divid="app"><button@click="x++">x加1</button><p>{{message}}</p></div><script>varvm=newVue({el:'#app',data:{x:1,message:''},watch:{x:function(newVal,oldVal){this.message='x的原值為'+oldVal+'，x的新值為'+newVal;}}})</script>運(yùn)行以上代碼，當(dāng)變量x的值發(fā)生變化時(shí)，通過watch的監(jiān)控，使用message輸出變量x的新值和原值。Vue.js實(shí)例的數(shù)據(jù)選項(xiàng)DOM是W3C組織推薦的處理XML的標(biāo)準(zhǔn)編程接口，它是一種與平臺(tái)和語言無關(guān)的API，它可以動(dòng)態(tài)地訪問程序和腳本，更新其內(nèi)容、結(jié)構(gòu)和WWW（WorldWideWeb，萬維網(wǎng)）文檔的風(fēng)格。DOM是一種基于樹的用于操作頁面元素的API，它要求在處理過程中整個(gè)文檔都加載在存儲(chǔ)器中。DOM可以把HTML文檔看作文檔樹，通過DOM提供的API可以對(duì)樹上的節(jié)點(diǎn)進(jìn)行操作。DOM又稱為文檔樹模型，一個(gè)網(wǎng)頁可以稱為文檔，網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)，網(wǎng)頁中的標(biāo)簽也稱為元素，屬性是指標(biāo)簽的屬性。1．elel用于提供一個(gè)在頁面上已存在的DOM元素作為Vue實(shí)例的掛載目標(biāo)，目標(biāo)可以是CSS選擇器，也可以是一個(gè)HTMLElement實(shí)例。在實(shí)例掛載之后，元素可以使用vm.$el的形式對(duì)其進(jìn)行訪問。el只在使用new創(chuàng)建實(shí)例時(shí)生效。如果在實(shí)例化時(shí)存在el選項(xiàng)，則實(shí)例將立即進(jìn)入編譯過程，否則需要顯式調(diào)用vm.$mount()手動(dòng)開啟編譯。Vue.js的DOM選項(xiàng)2．模板一個(gè)字符串模板作為Vue實(shí)例的標(biāo)識(shí)使用，模板將會(huì)替換掛載的元素，掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā)插槽。如果值以#開始，則它將被用作選擇符，并使用匹配元素的innerHTML作為模板。常用的技巧是以<scripttype="x-template">包含模板。出于安全考慮，應(yīng)該只使用信任的Vue模板，避免使用其他人生成的內(nèi)容作為模板。3．renderrender函數(shù)是一種渲染函數(shù)，可以直接生成虛擬DOM節(jié)點(diǎn)，并告訴Vue如何將這些虛擬DOM節(jié)點(diǎn)渲染到實(shí)際DOM中。render函數(shù)字符串模板的代替方案可充分發(fā)揮JavaScript的編程能力。渲染函數(shù)接收一個(gè)createElement()方法作為第一個(gè)參數(shù)來創(chuàng)建虛擬DOM節(jié)點(diǎn)。如果組件是一個(gè)函數(shù)組件，則渲染函數(shù)還會(huì)接收一個(gè)額外的context參數(shù)，以便為沒有實(shí)例的函數(shù)組件提供上下文信息。若Vue選項(xiàng)中的render函數(shù)存在，則Vue()構(gòu)造函數(shù)不會(huì)根據(jù)template選項(xiàng)或通過el選項(xiàng)指定的掛載元素中提取出的HTML模板編譯渲染函數(shù)。Vue.js的DOM選項(xiàng)4．renderErrorrenderError只在開發(fā)人員環(huán)境中工作。當(dāng)render函數(shù)遭遇錯(cuò)誤時(shí)，會(huì)提供另外一種渲染輸出，其錯(cuò)誤信息將會(huì)作為第二個(gè)參數(shù)傳遞到renderError。例如：newVue({render(h){thrownewError('oops')},renderError(h,err){returnh('pre',{style:{color:'red'}},err.stack)}}).$mount('#app')Vue.js的DOM選項(xiàng)實(shí)例屬性是指Vue實(shí)例的屬性，如vm.$data就是一個(gè)實(shí)例屬性，用于獲取實(shí)例中的數(shù)據(jù)對(duì)象。Vue程序中直接通過“Vue對(duì)象.屬性”形式訪問的是來自data或computed的屬性。以下內(nèi)容使用vm表示Vue對(duì)象，在Vue對(duì)象中，el、data等鍵也稱為屬性，這些屬性就是Vue的實(shí)例屬性。1．vm.$data該屬性用于返回當(dāng)前Vue實(shí)例正在監(jiān)視的數(shù)據(jù)對(duì)象，Vue實(shí)例會(huì)代理其$data對(duì)象上的所有屬性。2．vm.$el該屬性用于返回當(dāng)前Vue實(shí)例使用的根DOM元素。3．vm.$props該屬性用于接收上級(jí)組件傳遞的數(shù)據(jù)，Vue實(shí)例代理了對(duì)其props對(duì)象屬性的訪問。Vue.js的實(shí)例屬性4．vm.$options該屬性用于返回當(dāng)前Vue實(shí)例所使用的實(shí)例化選項(xiàng)。如果想要調(diào)用自定義選項(xiàng)，則需要用到該屬性。例如：Varvm=newVue({customOption:'try',created:function(){console.log(this.$options.customOption)//'try'}})Vue.js的實(shí)例屬性5．vm.$parent如果當(dāng)前實(shí)例存在，則該屬性用于返回當(dāng)前vm實(shí)例的父實(shí)例。6．vm.$root該屬性用于返回當(dāng)前組件樹的根Vue實(shí)例，如果當(dāng)前實(shí)例已經(jīng)沒有父實(shí)例，則將會(huì)返回它自己。7．vm.$children該屬性用于返回當(dāng)前實(shí)例的直接子組件，通過this.$children可以得到當(dāng)前實(shí)例的所有子組件實(shí)例集合。需要注意的是，$children并不保證順序，也不是響應(yīng)式的。如果嘗試使用$children來進(jìn)行數(shù)據(jù)綁定，則要考慮使用一個(gè)數(shù)組配合v-for來生成子組件，并且使用數(shù)組作為真正的數(shù)據(jù)源。8．vm.$attrsvm.$attrs用于獲取組件的屬性，但其獲取的屬性中不包括class、style以及被聲明為props的屬性。Vue.js的實(shí)例屬性Vue提供了豐富的實(shí)例方法，這些方法可以在Vue實(shí)例上調(diào)用，用于生命周期管理、數(shù)據(jù)操作等。1．vm.$watch(data,callback[,options])除了使用數(shù)據(jù)選項(xiàng)中的watch方法，Vue還可以使用實(shí)例的$watch()方法，該方法的返回值是一個(gè)取消觀察的函數(shù)，用于停止觸發(fā)回調(diào)。例：創(chuàng)建網(wǎng)頁demo0810.html，在該網(wǎng)頁中編寫代碼，應(yīng)用Vue的$watch()方法輸出與觀察變量的新值與原值，并返回一個(gè)取消觀察函數(shù)，停止觸發(fā)回調(diào)。<divid="app"><button@click="x++">x加1</button><p>{{message}}</p></div><script>varvm=newVue({el:'#app',data:{x:1,message:''Vue.js的實(shí)例方法}})varunwatch=vm.$watch('x',function(newVal,oldVal){if(newVal===5){//之后取消觀察

unwatch();}this.message='x的原值為'+oldVal+'，x的新值為'+newVal;})</script>在上述代碼中，當(dāng)x的值更新為5時(shí)，觸發(fā)unwatch()，取消觀察。單擊“x加1”按鈕時(shí)，x的值仍然會(huì)變化，但是不再觸發(fā)watch的回調(diào)函數(shù)。Vue.js的實(shí)例方法2．vm.$set(target,propertyName/index,value)該方法用于返回設(shè)置的值。3．vm.$get(expression)該方法用于為Vue實(shí)例傳遞一個(gè)表達(dá)式來獲得結(jié)果，如果表達(dá)式拋出錯(cuò)誤，則該錯(cuò)誤會(huì)被截獲并返回undefined。4．vm.$add(key,value)該方法用于為Vue實(shí)例及其$data對(duì)象添加一個(gè)頂層屬性。由于ES5的限制，Vue無法監(jiān)測(cè)到對(duì)象中屬性的增加或者刪除，因此當(dāng)需要?jiǎng)討B(tài)增加/刪除屬性的時(shí)候，可以使用此方法或vm.$delete()。5．vm.$delete(target,propertyName/index)該方法用于從對(duì)象或數(shù)組中刪除指定的屬性或元素。6．vm.$eval(expression)該方法用于對(duì)一個(gè)表達(dá)式求值，該表達(dá)式可以包含過濾器。7．vm.$mount([elementOrSelector])該方法用于返回vm實(shí)例自身，如果Vue實(shí)例在實(shí)例化時(shí)沒有設(shè)置el選項(xiàng)，則它處于“未掛載”狀態(tài)，沒有關(guān)聯(lián)的DOM元素。可以使用vm.$mount()手動(dòng)掛載一個(gè)未掛載的實(shí)例。如果沒有提供elementOrSelector參數(shù)，則模板將被渲染為文檔之外的元素，并且必須使用原生DOMAPI把它插入文檔中。Vue.js的實(shí)例方法這個(gè)方法返回實(shí)例自身，因而可以鏈?zhǔn)秸{(diào)用其他實(shí)例方法。例如：varMyComponent=Vue.extend({template:'<div>Hello!</div>'})//創(chuàng)建并掛載到#app（會(huì)替換#app）newMyComponent().$mount('#app')//同上newMyComponent({el:'#app'})//或者，在文檔之外渲染且隨后掛載varcomponent=newMyComponent().$mount()document.getElementById('app').appendChild(component.$el)8．vm.$forceUpdate()該方法用于迫使Vue實(shí)例重新渲染。注意，它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。Vue.js的實(shí)例方法9．vm.$nextTick([callback])該方法用于將回調(diào)延遲到下次DOM更新循環(huán)之后執(zhí)行。可在修改數(shù)據(jù)之后立即使用它，并等待DOM更新。其作用與全局方法Vue.nextTick()一樣，不同的是回調(diào)的this自動(dòng)綁定到調(diào)用它的實(shí)例上。例如：newVue({//...methods:{//...example:function(){//修改數(shù)據(jù)this.message='changed'//DOM還沒有更新this.$nextTick(function(){//DOM更新了//'this'綁定到當(dāng)前實(shí)例上this.doSomethingElse()})}}})Vue.js的實(shí)例方法10．vm.$destroy()該方法用于完全銷毀一個(gè)實(shí)例，清理其與其他實(shí)例的連接，解綁其全部指令及事件監(jiān)聽器，觸發(fā)beforeDestroy和destroyed的鉤子。在大多數(shù)場(chǎng)景中不應(yīng)該調(diào)用這個(gè)方法，最好使用v-if和v-for指令以數(shù)據(jù)驅(qū)動(dòng)的方式控制子組件的生命周期。Vue.js的實(shí)例方法什么是MVVMMVVM是一種軟件架構(gòu)設(shè)計(jì)模式，也是一種簡(jiǎn)化用戶界面的事件驅(qū)動(dòng)編程方式。MVVM源自經(jīng)典的MVC（Model-View-Controller，模型-視圖-控制器）模式。當(dāng)下流行的MVVM框架有Vue、AngularJS等。Vue是一種比較典型的基于MVVM模式的前端框架，其中M（Model）指數(shù)據(jù)層，V（View）指DOM層或用戶界面，VM（ViewModel）指處理數(shù)據(jù)和界面的中間層，即Vue。為什么要使用MVVMMVVM模式和MVC模式一樣，主要目的是分離View（視圖）和Model（模型），其具有以下優(yōu)勢(shì)。（1