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簡介
從上圖的介紹中我們不難發(fā)現(xiàn)Vue.js是一款輕量級的以數(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ù)對象，data 的屬性能夠響應(yīng)數(shù)據(jù)的變化。
（3）created表示實(shí)例生命周期中創(chuàng)建完成的那一步，當(dāng)實(shí)例已經(jīng)創(chuàng)建
