注意：Vue.js 不支持 IE8 及其以下 IE 版本。 具體可以看下 http://www.runoob.com/vue2/vue-tutorial.html
以下是學習過程
Vue.js 教程
Vue.js（讀音 /vjuː/, 類似於 view） 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層， 采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
Vue 學習起來非常簡單，本教程基於 Vue 2.1.8 版本測試。
里面說了一些安裝， 還有 cnpm 的安裝等
命令行工具
要工具都安好了，安裝vue-cli webpack 后， 可以命令創建本地項目
$ vue init webpack my-project
進入項目，安裝並運行：
$ cd my-project $ cnpm install $ cnpm run dev > Listening at http://localhost:8080
訪問 http://localhost:8080/ ，就能看到界面
這說的例子貌似和官網類似，基本的說下，可過下看看。
Vue.js 計算屬性
computed vs methods
我們可以使用 methods 來替代 computed，效果上兩個都是一樣的，但是 computed 是基於它的依賴緩存，只有相關依賴發生改變時才會重新取值。而使用 methods ，在重新渲染的時候，函數總會重新調用執行。可以說使用 computed 性能會更好，但是如果你不希望緩存，你可以使用 methods 屬性。
computed setter
computed 屬性默認只有 getter ，不過在需要時你也可以提供一個 setter
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
set 后 get
點擊傳值
事件修飾符
事件修飾符
Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通過由點(.)表示的指令后綴來調用修飾符。
.stop.prevent.capture.self.once
<!-- 阻止單擊事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件偵聽器時使用事件捕獲模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 --> <div v-on:click.self="doThat">...</div> <!-- click 事件至少觸發一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
按鍵修飾符
Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 keyCode 是 13 時調用 vm.submit() --> <input v-on:keyup.13="submit">
記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 縮寫語法 --> <input @keyup.enter="submit">
全部的按鍵別名：
.enter.tab.delete(捕獲 "刪除" 和 "退格" 鍵).esc.space.up.down.left.right.ctrl.alt.shift.meta
實例
<p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
這2個后面看api吧， 用多了就知道哪個是哪個
----------
表單中輸入框中加 style="white-space: pre" ， 試了結果，意思是 輸入框內容前后空格保留
修飾符
.lazy
在默認情況下， v-model 在 input 事件中同步輸入框的值與數據，但你可以添加一個修飾符 lazy ，從而轉變為在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >
.trim
如果要自動過濾用戶輸入的首尾空格，可以添加 trim 修飾符到 v-model 上過濾輸入：
<input v-model.trim="msg">
試了下：輸入空格后，在焦點離開會自動清理掉首尾的空格
Prop
注意: prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。
對 prop 傳值有了一些認知，基本上知道怎么用....
這個驗證后面再試。
自定義事件
父組件是使用 props 傳遞數據給子組件，但如果子組件要把數據傳遞回去，就需要使用自定義事件！
我們可以使用 v-on 綁定自定義事件, 每個 Vue 實例都實現了事件接口(Events interface)，即：
- 使用
$on(eventName)監聽事件 - 使用
$emit(eventName)觸發事件 
Vue.js 自定義指令
除了默認設置的核心指令( v-model 和 v-show ), Vue 也允許注冊自定義指令。 看定義全局的和局部的
鈎子 【這個需要好好研究下】
鈎子函數
指令定義函數提供了幾個鈎子函數（可選）：
-
bind: 只調用一次，指令第一次綁定到元素時調用，用這個鈎子函數可以定義一個在綁定時執行一次的初始化動作。 -
inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document 中）。 -
update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細的鈎子函數參數見下）。 -
componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。 -
unbind: 只調用一次， 指令與元素解綁時調用。
鈎子函數參數
鈎子函數的參數有：
- el: 指令所綁定的元素，可以用來直接操作 DOM 。
- binding: 一個對象，包含以下屬性：
- name: 指令名，不包括
v-前綴。 - value: 指令的綁定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令綁定的前一個值，僅在
update和componentUpdated鈎子中可用。無論值是否改變都可用。 - expression: 綁定值的字符串形式。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 傳給指令的參數。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一個包含修飾符的對象。 例如：
v-my-directive.foo.bar, 修飾符對象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 編譯生成的虛擬節點，查閱 VNode API 了解更多詳情。
- oldVnode: 上一個虛擬節點，僅在
update和componentUpdated鈎子中可用。
一知半解的，先熟悉入門。
Vue.js 路由
本章節我們將為大家介紹 Vue.js 路由。
Vue.js 路由允許我們通過不同的 URL 訪問不同的內容。
通過 Vue.js 可以實現多視圖的單頁Web應用（single page web application，SPA）。
Vue.js 路由需要載入 vue-router 庫
中文文檔地址：vue-router文檔。
------------------------
看完這些，這次看着這些內容熟悉多了.... 可以一試。