Vue.js作為目前最熱門最具前景的前端框架之一色罚,其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項(xiàng)目的新的思維模式。本文旨在幫助大家認(rèn)識(shí)Vue.js账劲,了解Vue.js的開發(fā)流程戳护,并進(jìn)一步理解如何通過Vue.js來構(gòu)建一個(gè)中大型的前端項(xiàng)目,同時(shí)做好相應(yīng)的部署與優(yōu)化工作瀑焦。
文章將以PPT圖片附加文字介紹的形式展開腌且,不會(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通過操作DOM來改變頁面的顯示禀晓,而Vue通過操作數(shù)據(jù)來實(shí)現(xiàn)頁面的更新與展示精续。下面便是Vue數(shù)據(jù)驅(qū)動(dòng)的概念模型:
Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分,其在View層(即DOM層)與Model層(即JS邏輯層)之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個(gè)相當(dāng)于監(jiān)聽器的東西粹懒。
當(dāng)View層的視圖發(fā)生改變時(shí)重付,Vue會(huì)通過DOM Listeners來監(jiān)聽并改變Model層的數(shù)據(jù)。相反凫乖,當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí)确垫,其也會(huì)通過Data Bingings來監(jiān)聽并改變View層的展示。這樣便實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的功能帽芽,也是Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理所在删掀。
Vue實(shí)例
在一個(gè)html文件中,我們直接可以通過script標(biāo)簽引入Vue.js导街,然后就可以在頁面里寫Vue.js代碼了披泪。上圖中我們通過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)目的開發(fā)中,我們使用的最多的應(yīng)該就屬Vue的指令了毯辅。通過Vue提供的常用指令埂伦,我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅(qū)動(dòng)的強(qiáng)大功能。以下便是圖中常用指令的簡(jiǎn)單介紹:
(1)v-text: 用于更新綁定元素中的內(nèi)容思恐,類似于jQuery的text()方法
(2)v-html: 用于更新綁定元素中的html內(nè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)擊事件
關(guān)于更多的Vue指令可以查看Vue2.0文檔荆秦,地址:https://vuefe.cn/api/#指令
Vue.js技術(shù)棧
以上我們講到可以直接在一個(gè)html頁面里通過引入Vue.js來直接寫Vue代碼篱竭,但是這樣的方式并不常用。因?yàn)槿绻覀兊捻?xiàng)目比較大步绸,項(xiàng)目中會(huì)存在很多頁面室抽,一旦每個(gè)頁面都引入一個(gè)Vue.js或者聲明一個(gè)Vue實(shí)例,這樣非常不利于后期的維護(hù)和代碼的公用靡努,也會(huì)存在實(shí)例名沖突的情況,所以我們需要用到Vue提供的技術(shù)棧來構(gòu)建強(qiáng)大的前端項(xiàng)目晓折。
除了Vue.js我們還需要用到:
(1)vue-cli:Vue的腳手架工具惑朦,用于自動(dòng)生成Vue項(xiàng)目的目錄及文件。
(2)vue-router: Vue提供的前端路由工具漓概,利用其我們實(shí)現(xiàn)頁面的路由控制漾月,局部刷新及按需加載,構(gòu)建單頁應(yīng)用胃珍,實(shí)現(xiàn)前后端分離梁肿。
(3)vuex:Vue提供的狀態(tài)管理工具,用于同一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用觅彰,存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象吩蔑。
(4)ES6:Javascript的新版本,ECMAScript6的簡(jiǎn)稱填抬。利用ES6我們可以簡(jiǎn)化我們的JS代碼烛芬,同時(shí)利用其提供的強(qiáng)大功能來快速實(shí)現(xiàn)JS邏輯。
(5)NPM:node.js的包管理工具,用于同一管理我們前端項(xiàng)目中需要用到的包赘娄、插件仆潮、工具、命令等遣臼,便于開發(fā)和維護(hù)性置。
(6)webpack:一款強(qiáng)大的文件打包工具,可以將我們的前端項(xiàng)目文件同一打包壓縮至js中揍堰,并且可以通過vue-loader等加載器實(shí)現(xiàn)語法轉(zhuǎn)化與加載鹏浅。
(7)Babel:一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件
利用以上等技術(shù),我們便可以開始構(gòu)建我們的Vue項(xiàng)目了个榕。
?構(gòu)建大型應(yīng)用
在構(gòu)建我們的中大型Vue項(xiàng)目中篡石,我們主要介紹如何利用vue-cli來自動(dòng)生成我們項(xiàng)目的前端目錄及文件,了解Vue中一切皆組件的概念及父子組件的通信問題西采,講解在Vue項(xiàng)目中我們?nèi)绾问褂玫谌讲寮巳詈罄脀ebpack來打包及部署我們的項(xiàng)目。
vue-cli構(gòu)建
在使用vue-cli之前我們需要安裝node.js械馆,利用其提供的npm命令來安裝vue-cli胖眷。安裝node.js只需去其官網(wǎng)下載軟件并安裝即可,地址為:https://nodejs.org/en/
安裝完成之后我們打開電腦的cmd命令行工具依次輸入上圖中的命令:
(1)npm install -g vue-cli:全局安裝vue-cli
(2)vue init webpack my-project: 利用vue-cli在目錄地址生成一個(gè)基于webpack的名為’my-project‘的Vue項(xiàng)目文件及目錄
(3)cd my-project:打開剛剛創(chuàng)建的文件夾
(4)npm intall:安裝項(xiàng)目所依賴的包文件
(5)npm run dev:利用本地node服務(wù)器在瀏覽器中打開并瀏覽項(xiàng)目頁面
這樣我們的一個(gè)基于webpack的vue項(xiàng)目目錄就構(gòu)建好了霹崎。
單文件組件
在剛剛構(gòu)建好的vue項(xiàng)目中珊搀,我們會(huì)發(fā)現(xiàn)一個(gè)App.vue和Hello.vue的文件,那么像這樣的以.vue后綴結(jié)尾的文件便是我們Vue項(xiàng)目中常見的單文件組件尾菇。單文件組件包含了一個(gè)功能或模塊的html境析、js及css。在.vue文件中派诬,我們可以在template標(biāo)簽中寫html劳淆,在script標(biāo)簽中寫js,在style標(biāo)簽中寫css默赂。這樣一個(gè)功能或模塊就是一個(gè).vue組件沛鸵,對(duì)于組件公用和后期的維護(hù)也非常便捷。
?父子組件通信
那么像這樣在以單文件組件為核心的項(xiàng)目開發(fā)中缆八,我們一定會(huì)想到一個(gè)問題曲掰,就是.vue父子組件之間是如何交換數(shù)據(jù)來實(shí)現(xiàn)通信的呢?在Vue2.0中提供了props來實(shí)現(xiàn)父組件向子組件傳遞數(shù)據(jù)奈辰,通過$emit來實(shí)現(xiàn)子組件向父組件傳遞數(shù)據(jù)栏妖。當(dāng)然如果是較為復(fù)雜和普遍的數(shù)據(jù)交互,建議大家使用vuex來同一管理數(shù)據(jù)冯挎。詳情請(qǐng)見:https://vuefe.cn/guide/components.html#使用Props傳遞數(shù)據(jù)
插件使用
接下來我們介紹下在基于webpack的vue項(xiàng)目中我們是如何使用插件的底哥,主要有兩種情況:
(一)全局使用
(1)在index.html引入:這樣的方式不推薦使用咙鞍,因?yàn)榇嬖谙群蠹虞d順序的問題,有些插件不支持這一方式趾徽。
(2)通過webpack配置文件引入:主要通過plugin配置項(xiàng)的webpack.ProvidePlugin()方法實(shí)現(xiàn)续滋,不過只適合支持CommonJs規(guī)范并提供一個(gè)全局變量的插件,如jQuery中的$孵奶。
(3)通過import + Vue.use()引入:這種方式需要在全局.vue文件中import需要加載的插件疲酌,然后通過Vue.use('插件變量名')來實(shí)現(xiàn),不過此方法只支持遵循Vue.js插件編寫規(guī)范的插件使用了袁,如vue-resourece朗恳。
(二)單文件使用
(1)通過import直接引入:這種方式可以在需要調(diào)用插件的.vue文件中使用,不過需要注意和實(shí)例的創(chuàng)建順序問題载绿,或者也可以通過require引入粥诫。
(2)import + components注冊(cè):此方式為Vue組件的使用方式,可以在一個(gè)組件中注冊(cè)并使用一個(gè)子組件崭庸。
部署及優(yōu)化
當(dāng)我們搞定整個(gè)Vue項(xiàng)目的前端編碼階段后怀浆,我們需要對(duì)我們的前端項(xiàng)目文件進(jìn)行部署和優(yōu)化工作,主要的幾個(gè)方式如下:
(1)使用webpack的DefinePlugin指定生產(chǎn)環(huán)境:通過plugin中的DefinePlugin配置怕享,我們可以聲明'process.env'屬性為'development'(開發(fā)環(huán)境)或者'production'(生產(chǎn)環(huán)境)执赡,結(jié)合npm配置文件package.json中scripts的命令來切換環(huán)境模式十分方便。
(2)使用UglifyJs自動(dòng)刪除代碼塊內(nèi)的警告語句:一般在生產(chǎn)環(huán)境的webpack配置文件中使用函筋,通過new webpack.optimize.UglifyJsPlugin()來進(jìn)行配置沙合,刪除警告語句可以縮減文件的體積。
(3)使用Webpack hash處理緩存:當(dāng)我們需要對(duì)發(fā)布到線上的文件進(jìn)行修改時(shí)跌帐,重新編譯的文件名如果和之前版本的相同會(huì)引起瀏覽器無法識(shí)別而加載緩存文件的問題首懈。這樣我們需要自動(dòng)的生成帶hash值的文件名來阻止緩存。詳見:https://segmentfault.com/a/1190000006178770#articleHeader7
(4)使用v-if減少不必要的組件加載:v-if指令其實(shí)很有用處谨敛,它可以讓我們項(xiàng)目中暫時(shí)不需要的組件不進(jìn)行渲染猜拾,等需要用到的時(shí)候在渲染,比如某個(gè)彈窗組件等佣盒。這樣我們可以減少頁面首次加載的時(shí)間和文件量。
除了以上幾點(diǎn)的優(yōu)化顽聂,還有很多優(yōu)化選擇肥惭,有興趣的童鞋可以好好地了解下webpack的API文檔,畢竟webpack的功能十分強(qiáng)大紊搪。
數(shù)據(jù)驅(qū)動(dòng)實(shí)例##
這是我之前利用Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理寫的一個(gè)拼圖游戲蜜葱,希望能夠供大家進(jìn)一步了解Vue數(shù)據(jù)驅(qū)動(dòng)的理念。
演示地址:拼圖游戲
代碼地址:拼圖代碼
總結(jié)
本文以PPT圖片附加文字介紹的形式簡(jiǎn)單介紹了Vue.js的知識(shí)點(diǎn)及開發(fā)流程耀石,并將前端自動(dòng)化牵囤、組件化、工程化的理念貫穿其中,由淺入深地闡述了Vue.js“簡(jiǎn)單卻不失優(yōu)雅揭鳞,小巧而不發(fā)大匠”的獨(dú)特魅力炕贵。