走進vue.js(一)

走進vue.js（一）

vue.js做爲目前最具前景的前端框架之一，既然如此，博主貫徹以往的做風，確定要搗鼓一番，通過爲期半個多月的研究，算是對vue有了深入的理解與認識，下面分三個章節解開vue.js的神祕面紗。本文旨在幫助你們認識vue.js,瞭解vue.js的開發過程，並進一步講解如何經過vue.js構建一個大中型的前端項目。

vue.js的簡介

若是如今給一個場景，新學期開學，在學習氛圍濃重的教室中，老師點名說：坐在後排戴眼鏡的那個男孩看你精神抖擻，彷佛有不少話對老師說吧，作個簡短的自我介紹，讓你們認識下你，機智的男孩通常都這樣作：立馬把眼鏡去掉（沒錯，博主就是這樣作的），然並卵，不得不站起來自我介紹：

我叫vue.js,我是一個構建數據驅動的web界面的框架，我來自國內，個人核心是一個響應的數據綁定系統，這時候，老師發問："歡迎來到個人班級，告訴我你的目標是什麼？答曰：個人目標是實現響應的數據綁定和組合的視圖組件，造福千千萬萬個碼農，頓時，班級裏掌聲一片。

從上面的介紹中，咱們不難發現vue.js是一款輕量級的以數據驅動的前端js框架，它與JQUERY最大的不一樣點在於jquery經過DOM來改變頁面的顯示，而vue.js經過操做數據來實現頁面的更新與展現，下面即是vue數據驅動的概念模型

vue.js主要負責的是上圖綠色正方體ViewModel的部分，它在View層(即：dom層)與Model層(即js邏輯層)之間經過ViewModel綁定了DOM Listeners 與Data Bindings兩個至關於監聽的東西。當View層的視圖發生變化時候，Vue會經過DOM Listeners來監聽並改變Model層的數據，相反，當Model層發生變化時，它也會經過Data Bindings來監聽並改變View層的視圖，這樣便實現了一個雙向數據綁定的功能，也是Vue.js數據驅動的原理。

vue實例

在一個html文件中，咱們能夠經過script標籤引入Vue.js,而後就能夠寫代碼了。上圖中咱們經過new Vue()構建了一個Vue的實例，在實例中主要包括如下幾部分：掛載元素(el)、數據(data)、模板(template)、方法(method)與生命週期鉤子(created)等，它們具體表示什麼呢？以下

el:表示咱們的Vue做用範圍，'#app'則是指Vue做用於id爲app的元素區域
data:Vue數據對象，data的屬性可以響應數據的變化
created:表示實例生命週期中建立完成的那一步，當實例已經建立成功以後將調用其方法。

Vue經常使用指令

指令說明

1.v-text:用於更新綁定元素的內容，相似於jq的text()方法。
2.v-html：用於更新綁定元素的html內容
3.v-if:用於根據表達式的真假條件渲染元素，如上圖若是P3爲false則不會渲染p元素。
4.v-show：用根據表達式值得真假條件顯示隱藏元素，切換元素的display css屬性。
5.v-for:用於遍歷數據渲染元素或者模板，如上圖中P6爲[1,2,3]，則會渲染3個p元素，內容依次爲1，2，3。
6.v-on:用於在元素上綁定事件，圖中在p標籤上綁定了showP3的點擊事件。

關於更多的vue指令，能夠參考官方中文文檔。

vue指令中文文檔

Vue.js技術棧

以上咱們講到能夠直接在一個html頁面裏經過引入Vue.js來直接寫Vue代碼，可是這樣的方式並不經常使用。由於若是咱們的項目比較大，項目中會存在不少頁面，一旦每一個頁面都引入一個Vue.js或者聲明一個Vue實例，這樣很是不利於後期的維護和代碼的公用，也會存在實例名衝突的狀況，因此咱們須要用到Vue提供的技術棧來構建強大的前端項目。

除了Vue.js咱們還須要用到：

vue-cli：Vue的腳手架工具，用於自動生成Vue項目的目錄及文件。
vue-router： Vue提供的前端路由工具，利用其咱們實現頁面的路由控制，局部刷新及按需加載，構建單頁應用，實現先後端分離。
vuex：Vue提供的狀態管理工具，用於同一管理咱們項目中各類數據的交互和重用，存儲咱們須要用到數據對象。
ES6：Javascript的新版本，ECMAScript6的簡稱。利用ES6咱們能夠簡化咱們的JS代碼，同時利用其提供的強大功能來快速實現JS邏輯。
NPM：node.js的包管理工具，用於同一管理咱們前端項目中須要用到的包、插件、工具、命令等，便於開發和維護。
webpack：一款強大的文件打包工具，能夠將咱們的前端項目文件同一打包壓縮至js中，而且能夠經過vue-loader等加載器實現語法轉化與加載。
Babel：一款將ES6代碼轉化爲瀏覽器兼容的ES5代碼的插件

利用以上等技術，咱們即可以開始構建咱們的Vue項目了。

下一章節我會經過一個簡單的vue項目，告訴你們如何利用vue去開發項目，預知後事如何，且聽下回辯解。（一完）

2016年12月11日14：39