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ū)域。
