Vue.js作為目前最熱門(mén)最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開(kāi)發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js，了解Vue.js的開(kāi)發(fā)流程，并進(jìn)一步理解如何通過(guò)Vue.js來(lái)構(gòu)建一個(gè)中大型的前端項(xiàng)目，同時(shí)做好相應(yīng)的部署與優(yōu)化工作。

文章將以PPT圖片附加文字介紹的形式展開(kāi)，不會(huì)涉及知識(shí)點(diǎn)的具體代碼，點(diǎn)到為止。有興趣的同學(xué)可以查看相應(yīng)的文檔進(jìn)行了解。

Vue.js簡(jiǎn)介

從上圖的介紹中我們不難發(fā)現(xiàn)Vue.js是一款輕量級(jí)的以數(shù)據(jù)驅(qū)動(dòng)的前端JS框架，其和jQuery最大的不同點(diǎn)在于jQuery通過(guò)操作DOM來(lái)改變頁(yè)面的顯示，而Vue通過(guò)操作數(shù)據(jù)來(lái)實(shí)現(xiàn)頁(yè)面的更新與展示。下面便是Vue數(shù)據(jù)驅(qū)動(dòng)的概念模型：

Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過(guò)ViewModel綁定了DOM Listeners與Data Bingings兩個(gè)相當(dāng)于監(jiān)聽(tīng)器的東西。

當(dāng)View層的視圖發(fā)生改變時(shí)，Vue會(huì)通過(guò)DOM Listeners來(lái)監(jiān)聽(tīng)并改變Model層的數(shù)據(jù)。相反，當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí)，其也會(huì)通過(guò)Data Bingings來(lái)監(jiān)聽(tīng)并改變View層的展示。這樣便實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的功能，也是Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理所在

Vue實(shí)例

在一個(gè)html文件中，我們直接可以通過(guò)script標(biāo)簽引入Vue.js，然后就可以在頁(yè)面里寫(xiě)Vue.js代碼了。上圖中我們通過(guò)new Vue()構(gòu)建了一個(gè)Vue的實(shí)例，在實(shí)例中，可以包含掛在元素（el），數(shù)據(jù)（data），模板（template），方法（methods）與生命周期鉤子（created等）等選項(xiàng)。不同的實(shí)例選項(xiàng)擁有不同的功能，如：

（1）el表明我們的Vue需要操作哪一個(gè)元素下的區(qū)域，’#demo’表示操作id為demo的元素下區(qū)域。

（2）data表示Vue實(shí)例的數(shù)據(jù)對(duì)象，data的屬性能夠響應(yīng)數(shù)據(jù)的變化。

（3）created表示實(shí)例生命周期中創(chuàng)建完成的那一步，當(dāng)實(shí)例已經(jīng)創(chuàng)建完成之后將調(diào)用其方法。

Vue常用指令

在Vue項(xiàng)目的開(kāi)發(fā)中，我們使用的最多的應(yīng)該就屬Vue的指令了。通過(guò)Vue提供的常用指令，我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅(qū)動(dòng)的強(qiáng)大功能。以下便是圖中常用指令的簡(jiǎn)單介紹：

（1）v-text:用于更新綁定元素中的內(nèi)容，類(lèi)似于jQuery的text()方法

（2）v-html:用于更新綁定元素中的html內(nèi)容，類(lèi)似于jQuery的html()方法

（3）v-if:用于根據(jù)表達(dá)式的值的真假條件渲染元素，如果上圖P3為false則不會(huì)渲染P標(biāo)簽

（4）v-show:用于根據(jù)表達(dá)式的值的真假條件顯示隱藏元素，切換元素的display CSS屬性

（5）v-for:用于遍歷數(shù)據(jù)渲染元素或模板，如圖中P6為[1,2,3]則會(huì)渲染3個(gè)P標(biāo)簽，內(nèi)容依次為1，2，3

（6）v-on:用于在元素上綁定事件，圖中在P標(biāo)簽上綁定了showP3的點(diǎn)擊事件

Vue.js技術(shù)棧

以上我們講到可以直接在一個(gè)html頁(yè)面里通過(guò)引入Vue.js來(lái)直接寫(xiě)Vue代碼，但是這樣的方式并不常用。因?yàn)槿绻覀兊捻?xiàng)目比較大，項(xiàng)目中會(huì)存在很多頁(yè)面，一旦每個(gè)頁(yè)面都引入一個(gè)Vue.js或者聲明一個(gè)Vue實(shí)例，這樣非常不利于后期的維護(hù)和代碼的公用，也會(huì)存在實(shí)例名沖突的情況，所以我們需要用到Vue提供的技術(shù)棧來(lái)構(gòu)建強(qiáng)大的前端項(xiàng)目。

除了Vue.js我們還需要用到：

（1）vue-cli：Vue的腳手架工具，用于自動(dòng)生成Vue項(xiàng)目的目錄及文件。

（2）vue-router：Vue提供的前端路由工具，利用其我們實(shí)現(xiàn)頁(yè)面的路由控制，局部刷新及按需加載，構(gòu)建單頁(yè)應(yīng)用，實(shí)現(xiàn)前后端分離。

（3）vuex：Vue提供的狀態(tài)管理工具，用于同一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用，存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象。

（4）ES6：Javascript的新版本，ECMAScript6的簡(jiǎn)稱(chēng)。利用ES6我們可以簡(jiǎn)化我們的JS代碼，同時(shí)利用其提供的強(qiáng)大功能來(lái)快速實(shí)現(xiàn)JS邏輯。

（5）NPM：node.js的包管理工具，用于同一管理我們前端項(xiàng)目中需要用到的包、插件、工具、命令等，便于開(kāi)發(fā)和維護(hù)。

（6）webpack：一款強(qiáng)大的文件打包工具，可以將我們的前端項(xiàng)目文件同一打包壓縮至js中，并且可以通過(guò)vue-loader等加載器實(shí)現(xiàn)語(yǔ)法轉(zhuǎn)化與加載。

（7）Babel：一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件

利用以上等技術(shù)，我們便可以開(kāi)始構(gòu)建我們的Vue項(xiàng)目了。

零基礎(chǔ)學(xué)習(xí)Vue js，推薦Vue js項(xiàng)目視頻教程,這是一套超級(jí)詳細(xì)的Vue js項(xiàng)目視頻教程,本套Vue js實(shí)戰(zhàn)視頻適合Vue js零基礎(chǔ)學(xué)員學(xué)習(xí),這套視頻教程通俗易懂,是你學(xué)習(xí)Vue js的好幫手。

課程目標(biāo)：通過(guò)本課程的學(xué)習(xí)，讓大家掌握Vue.js及在項(xiàng)目中的使用。

適用人群：具有一定web開(kāi)發(fā)基礎(chǔ)的開(kāi)發(fā)人員。

課程概述：Vue(讀音/vju?/，類(lèi)似于view)是一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式框架。如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM，學(xué)習(xí)Vue.js時(shí)請(qǐng)先拋開(kāi)手動(dòng)操作DOM的思維，因?yàn)閂ue.js是數(shù)據(jù)驅(qū)動(dòng)的，你無(wú)需手動(dòng)操作DOM。它通過(guò)一些特殊的HTML語(yǔ)法，將DOM和數(shù)據(jù)綁定起來(lái)。一旦你創(chuàng)建了綁定，DOM將和數(shù)據(jù)保持同步，每當(dāng)變更了數(shù)據(jù)，DOM也會(huì)相應(yīng)地更新。Vue的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種支持類(lèi)庫(kù)結(jié)合使用時(shí)，Vue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。本課程將一步一步地讓大家快速地掌握Vue.js這樣一個(gè)前端核心框架，以適應(yīng)公司的開(kāi)發(fā)需要。

以上就是動(dòng)力節(jié)點(diǎn)Java培訓(xùn)機(jī)構(gòu)的小編針對(duì)“vue.js免費(fèi)視頻教程，初學(xué)者快速掌握”的內(nèi)容進(jìn)行的回答，希望對(duì)大家有所幫助，如有疑問(wèn)，請(qǐng)?jiān)诰€(xiàn)咨詢(xún)，有專(zhuān)業(yè)老師隨時(shí)為你服務(wù)。