什麼是Vue.js
Vue.js是一個建構資料驅動的web界面的庫。技術上，它重點集中在MVVM模式的ViewModel層，是以它非常容易學習，非常容易與其它庫或已有項目整合。
Vue.js的目标是通過盡可能簡單的API實作響應的資料綁定群組合的視圖元件。
Vue.js 的核心是一個響應的資料綁定系統，它讓資料與DOM保持同步非常簡單。在使用jQuery手工操作DOM時，我們的代碼常常是指令式的、重複的與易錯的。Vue.js擁抱資料驅動的視圖概念。通俗地講，它意味着我們在普通HTML模闆中使用特殊的文法将DOM “綁定”到底層資料。
最近剛推出了vue.js 2系列，大家可以看看去。
vue.js 2 教程安裝
獨立版本
直接下載下傳并用 < script > 标簽引入，Vue會被注冊為一個全局變量。如下代碼，這樣就可以在腳本中使用Vue.js了。
<script src="lib/vue.js"></script> CDN
也可以在 jsdelivr或 cdnjs擷取 (版本更新可能會略滞後)。
NPM
在用 Vue.js 建構大型應用時推薦使用 NPM 安裝，NPM 能很好地和諸如 Webpack 或 Browserify 的 CommonJS 子產品打包器配合使用。Vue.js 也提供配套工具來開發單檔案元件。
$ npm install vue
`# 擷取CSP相容版本：
`$ npm install vue@csp
`# 擷取最新開發版本(來自于GitHub):
$ npm install yyx990803/vue#dev Hello World
現在就讓我們來寫第一個vue.js的執行個體。如下代碼：
html代碼：
<div id="demo">
{{ message }}
</div> JavaScript代碼:
new Vue({
el: '#demo',
data: {
message: 'Hello World!'
}
}) 上面代碼中div中的部分 {{ message }}為資料綁定，我們将會在後面的學習中講到。而vue.js代碼是執行個體化一個Vue對象。在使用vue之前必須要執行個體化。
構造器
每個Vue.js應用的起步都是通過構造函數Vue建立一個Vue的根執行個體：
var vm = new Vue({
// 選項
}) 一個Vue執行個體其實正是一個MVVM模式中所描述的 ViewModel - 是以在文檔中經常會使用vm這個變量名。
屬性與方法
每個Vue執行個體都會代理其data對象裡所有的屬性，如下代碼：
var data = { a: 1 }
var vm = new Vue({
data: data
})
//vm.a === data.a -> true
// 設定屬性也會影響到原始資料
vm.a = 2
// data.a -> 2
// ... 反之亦然
data.a = 3
//vm.a -> 3 注意隻有這些被代理的屬性是響應的。如果在執行個體建立之後添加新的屬性到執行個體上，它不會觸發視圖更新。
除了前面這些資料屬性，
Vue 執行個體還有一些有用的執行個體屬性與方法。這些屬性與方法都有字首 $，以便與代理的資料屬性區分。例如：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一個執行個體方法
vm.$watch('a', function (newVal, oldVal) {
// 這個回調将在 `vm.a` 改變後調用
})
插值
資料綁定最基礎的形式是文本插值，使用 {{}} 文法（雙大括号）：
<span>Message: {{ msg }}</span> {{ msg }} 标簽會被相應資料對象的 msg 屬性的值替換。每當這個屬性變化時它也會更新。
也可以隻處理單次插值，今後的資料變化就不會再引起插值更新了：
<span>This will never change: {{* msg }}</span> 如下JavaScript代碼:
var data={msg:'Hello Vue.js!'};
new Vue({
el: '#demo',
data: data
})
data.msg="Hello World!"; 原始的HTML
雙大括号标簽将資料解析為純文字而不是HTML。為了輸出真的HTML字元串，需要用三大括号标簽：
<div>{{{ msg }}}</div> 如下javascript代碼：
var data={msg:'<p>Hello Vue.js!</p>'};
new Vue({
el: '#demo',
data: data
}) HTML特性
雙大括号标簽也可以用在 HTML 特性 (Attributes) 内：
<div id="{{ id }}"></div> javascript代碼如下：
var data={id:'demo'};
new Vue({
el: 'div',
data: data
}) 我們去檢視HTML源碼，是不是id已經變成我們設定的id了。
JavaScript表達式
Vue.js 在資料綁定内支援全功能的JavaScript表達式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }} 過濾器
Vue.js 允許在表達式後添加可選的“過濾器 (Filter) ”，以“管道符(|)”訓示。過濾器本質上是一個函數，這個函數會接收一個值，将其處理并傳回。
{{ message | uppercase }} 這裡我們将表達式 message 的值“管輸（pipe）”到内置的 uppercase 過濾器，這個過濾器其實隻是一個 JavaScript 函數，傳回大寫化的值。Vue.js 提供數個内置過濾器，在後面我們會談到如何開發自己的過濾器。
可以串聯多個過濾器：
{{ message | filterA | filterB }} html代碼：
<div id='demo'>
<span>{{msg | lowercase | capitalize}}</span>
</div> javaScript代碼：
var data={msg:'heLLO!'};
new Vue({
el: '#demo',
data: data
}) 運作結果為：Hello
指令
Vue.js指令 (Directives)
是特殊的帶有字首 v- 的特性。本質是模闆中出現的特殊标記，讓處理模闆的庫知道需要對這裡的DOM元素進行一些對應的處理。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到 DOM 上。
<p v-if="msg">Hello!</p> 這裡 v-if 指令将根據表達式 msg 值的真假删除/插入 < p > 元素。
在Vue.js中為我們提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同學們可以去檢視Vue.js的指令api(cn.vuejs.org/api/#指令)。
javascript代碼：
var data={msg:0};
new Vue({
el: '#demo',
data: data
}) 計算屬性
在模闆中表達式非常便利，但是它們實際上隻用于簡單的操作。模闆是為了描述視圖的結構。在模闆中放入太多的邏輯會讓模闆過重且難以維護。這就是為什麼 Vue.js 将綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應當使用計算屬性。
在
Vue.js中，你可以通過 computed 選項定義計算屬性：
<div id="example">
a={{ a }}, b={{ b }}
</div>
var vm = new Vue({
el: '#example',
data: {
a: 1
},
computed: {
// 一個計算屬性的 getter
b: function () {
// `this` 指向 vm 執行個體
return this.a + 1
}
}
}) 運作結果為：a=1,b=2。
更多内容如 Class 與 Style 綁定、 渲染指令、 表單控件綁定、 自定義指令和過濾器、 方法與事件處理器、元件等請參考：
http://www.hubwiz.com/course/566e67417e7d40946afc5ddc/分享Vue.js的入門級全家桶系列教程：
1.vue.js 入門與提高:
http://xc.hubwiz.com/course/vue.js2.vuex 2 入門與提高:
http://xc.hubwiz.com/course/vuex3.vue-router 入門與提高:
http://xc.hubwiz.com/course/vuerouter4.vue.js 工程化實踐:
http://xc.hubwiz.com/course/vuegch![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)