Vue.js作為目前最熱門最具前景的前端框架之一，其提供了一種幫助我們快速構(gòu)建并開發(fā)前端項目的新的思維模式。本文旨在幫助大家認(rèn)識Vue.js，了解Vue.js的開發(fā)流程，并進(jìn)一步理解如何通過Vue.js來構(gòu)建一個中大型的前端項目，同時做好相應(yīng)的部署與優(yōu)化工作。
文章將以PPT圖片附加文字介紹的形式展開，不會涉及知識點的具體代碼，點到為止。有興趣的同學(xué)可以查看相應(yīng)的文檔進(jìn)行了解。
Vue.js簡介
從上圖的介紹中我們不難發(fā)現(xiàn)Vue.js是一款輕量級的以數(shù)據(jù)驅(qū)動的前端JS框架，其和jQuery最大的不同點在于jQuery通過操作DOM來改變頁面的顯示，而Vue通過操作數(shù)據(jù)來實現(xiàn)頁面的更新與展示。下面便是Vue數(shù)據(jù)驅(qū)動的概念模型：
Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個相當(dāng)于監(jiān)聽器的東西。
當(dāng)View層的視圖發(fā)生改變時，Vue會通過DOM Listeners來監(jiān)聽并改變Model層的數(shù)據(jù)。相反，當(dāng)Model層的數(shù)據(jù)發(fā)生改變時，其也會通過Data Bingings來監(jiān)聽并改變View層的展示。這樣便實現(xiàn)了一個雙向數(shù)據(jù)綁定的功能，也是Vue.js數(shù)據(jù)驅(qū)動的原理所在。
Vue實例
在一個html文件中，我們直接可以通過script標(biāo)簽引入Vue.js，然后就可以在頁面里寫Vue.js代碼了。上圖中我們通過new Vue()構(gòu)建了一個Vue的實例，在實例中，可以包含掛在元素（el），數(shù)據(jù)（data），模板（template），方法（methods）與生命周期鉤子（created等）等選項。不同的實例選項擁有不同的功能，如：
（1）el表明我們的Vue需要操作哪一個元素下的區(qū)域，’#demo’表示操作id為demo的元素下區(qū)域。
延伸閱讀
- ssh框架 2016-09-30
- 阿里移動安全 [無線安全]玩轉(zhuǎn)無線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識別反義詞同義詞 2017-07-26
- 從棧不平衡問題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式