本篇將簡單介紹一下Vue.js，並在Node.js環境下搭建一個簡單的Demo。
一、簡介
我個人理解，Vue.js是一套前端視圖層的框架，它只關心視圖展示和數據綁定，它的一些語法與Angular 1非常相似，如果有Angular 1相關的使用經驗，上手會非常快。
相比較其他的React、Angular 2等MVVM框架，它更加的輕量，效率也更高，也能更好的與其他庫集成。
它擁有以下幾個出色的特性：
-
- 數據雙向綁定
- 指令
- 模板
- 組件
當前最新的版本為2.1.4。后續也會在這個版本下演示Demo。
二、環境准備
下載安裝Node.js環境，安裝成功后在命令行窗口依次執行以下命令：
> npm install bower -g
> npm install express-generator -g
安裝完成后進入工程目錄（隨意新建一個目錄），依次執行以下命令，創建一個名為vue-demo的項目：
1 > express vue-demo --view=ejs 2 > cd vue-demo 3 > npm install 4 > bower init 5 > bower install requirejs --save 6 > bower install vue --save
所有命令執行成功后，在項目根目錄手動增加一個名為.bowerrc文件，內容如下
1 { 2 "directory": "public/plugins/" 3 }
為了后面顯示的demo頁面好看一點，再引入bootstrap。這步不是必須的
> bower install bootstrap --save
最終的目錄結構如下
三、Hello World
按照慣例，學習一個新的語言，都要先問候一下我們這個精彩的世界。修改 views/index.ejs 文件內容
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1"> 8 <title>Index</title> 9 10 <!-- Bootstrap --> 11 <link href="plugins/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="app" class="container"> 16 <input type="text" v-model="message" /> 17 <p>{{message}}</p> 18 </div> 19 20 <!-- requirejs main --> 21 <script src="plugins/requirejs/require.js" data-main="javascripts/index.js"></script> 22 </body> 23 24 </html>
在 public/javascrips 目錄里新建一個文件 index.js ，內容如下
1 /// <reference path="../plugins/requirejs/require.js" /> 2 3 require.config({ 4 baseUrl: "plugins", 5 paths: { 6 jquery: "jquery/dist/jquery.min", 7 bootstrap: "bootstrap/dist/js/bootstrap.min", 8 vue: "vue/dist/vue.min" 9 } 10 }); 11 12 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { 13 var vm = new Vue({ 14 el: "#app", 15 data: { 16 message: "Hello world!" 17 } 18 }); 19 });
在命令行窗口的項目目錄下執行命令 npm start ，訪問 http://localhost:3000/
修改文本框里的內容，下方文字也會跟着變化
這是一個簡單的雙向數據綁定的例子。通過Vue類型構造了一個根實例，分別給 el 屬性賦值需要綁定的頁面元素ID，給 data 屬性賦值需要綁定的數據。在頁面里，通過給 input 元素添加指令 v-model ，綁定到數據的message屬性。在 p 元素里通過表達式 {{message}} 綁定message屬性。這樣頁面就能直接展示綁定的數據內容，在改變 input 的內容時，也能同步改變下方文本內容。
四、屬性、方法
通過Vue實例可以直接訪問綁定的數據的屬性。修改 index.js 文件內容：
1 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { 2 var d = { 3 message: "Hello world!" 4 }; 5 6 var vm = new Vue({ 7 el: "#app", 8 data: d 9 }); 10 11 // 屬性代理 12 console.log('vm.message = ' + vm.message); 13 console.log('vm.message === d.message? ' + (vm.message === d.message)); 14 });
訪問頁面，查看瀏覽器控制台顯示如下：
從上面的例子可以看到， vm 實例“代理”了綁定的數據對象，通過實例可以直接訪問數據對象里的屬性。
除了能“代理”數據對象， vm 實例也有一些內置屬性和方法，這些屬性和方法都有 $ 前綴。再修改 index.js 內容：
1 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { 2 var d = { 3 message: "Hello world!" 4 }; 5 6 var vm = new Vue({ 7 el: "#app", 8 data: d 9 }); 10 11 // 屬性代理 12 console.log('vm.message = ' + vm.message); 13 console.log('vm.message === d.message? ' + (vm.message === d.message)); 14 15 console.log('vm.$data = ' + JSON.stringify(vm.$data)); 16 console.log('vm.$data === d? ' + (vm.$data === d)); 17 18 console.log('vm.$el = ' + vm.$el); 19 console.log('vm.$el === div.#app? ' + (vm.$el === document.getElementById('app'))); 20 21 // 內置方法 22 vm.$watch('message', function (oldVal, newVal) { 23 console.log('oldVal is: ' + oldVal); 24 console.log('newVal is: ' + newVal); 25 }); 26 });
刷新頁面，查看控制台：
- $data：Vue實例的數據對象。通過這個屬性可以訪問到原始數據對象。
- $el：Vue實例掛載的DOM元素對象。
修改頁面文本框的內容，查看控制台：
$watch：Vue實例監視屬性變化的內置方法。當被監視的屬性改變時，將會觸發這個方法。
五、生命周期鈎子
Vue也提供了在實例化時各個狀態變化過程中觸發的事件方法。修改 index.js 內容：
1 require(['jquery', 'bootstrap', 'vue'], function ($, bootstrap, Vue) { 2 var d = { 3 message: "Hello world!" 4 }; 5 6 var vm = new Vue({ 7 el: "#app", 8 data: d, 9 beforeCreate: function () { 10 console.log('beforeCreate is triggered.') 11 }, 12 created: function () { 13 console.log('created is triggered.') 14 }, 15 beforeMount: function () { 16 console.log('beforeMount is triggered.') 17 }, 18 mounted: function () { 19 console.log('mounted is triggered.') 20 }, 21 beforeUpdate: function () { 22 console.log('beforeUpdate is triggered.') 23 }, 24 updated: function () { 25 console.log('updated is triggered.') 26 }, 27 beforeDestroy: function () { 28 console.log('beforeDestroy is triggered.') 29 }, 30 destroyed: function () { 31 console.log('destroyed is triggered.') 32 } 33 }); 34 });
刷新頁面，查看控制台：
修改文本框內容，查看控制台：
- beforeCreate：在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。
- created：實例已經創建完成之后被調用。這個時候數據觀測(data observer)，屬性和方法的運算，watch/event 事件回調已經完成。
- beforeMount：在掛載開始之前被調用：相關的
render函數首次被調用。 - mounted： el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。
- beforeUpdate：數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
- updated：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。這個時候DOM已經更新完成。
- beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。
- destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
下面是完整的生命周期圖示：
