什么是 Vue.js
Vue.js 是一個用于構建數據驅動的 Web 界面的庫。 從技術上講，它專注于 MVVM 模式的各層，因此非常容易學習，并且非常容易與其他庫或現有項目集成。
Vue.js 的目標是使用盡可能簡單的 API 來實現響應式數據綁定和組合視圖組件。
從本質上講，Vue.js 是一個響應式數據綁定系統，可以非常簡單地保持數據與 DOM 同步。 當手動操作 DOM 時，我們的代碼通常是命令式的、重復的并且容易出錯。 Vue.js 采用數據驅動視圖的概念。 通俗地說，就是我們在普通的 HTML 模板中使用特殊的語法來將 DOM 與底層數據“綁定”。
安裝
獨立版
直接用<>標簽下載導入，Vue就會注冊為全局變量。 下面的代碼，使得Vue.js可以在腳本中使用。
cript src="lib/vue.js"> cript>CDN
也可以在或者cdnjs處獲?。ò姹靖驴赡軙晕⒙浜螅?。
國家公共管理
當使用 Vue.js 構建大型應用程序時，建議安裝 NPM，NPM 與模塊捆綁器（例如 或 ）配合得很好。 Vue.js 還提供了用于開發單文件組件的配套工具。
$ npm install vue
`# 獲取CSP兼容版本：
`$ npm install vue@csp
`# 獲取最新開發版本(來自于GitHub):
$ npm install yyx990803/vue#dev你好世界
現在讓我們編寫第一個 vue.js 實例。 下面的代碼：
html代碼：
{{ message }}
代碼：
new Vue({
el: '#demo',
data: {
message: 'Hello World!'
}
})上面代碼中div中的{{ }}部分就是數據綁定，我們在后面的學習中會講到。 vue.js 代碼實例化一個 Vue 對象。 使用vue之前必須先實例化。
構造函數
每個 Vue.js 應用程序首先通過 Vue 構造函數創建一個 Vue 根實例：
var vm = new Vue({
// 選項
})Vue 實例實際上正是 MVVM 模式中描述的內容 - 因此文檔中經常使用變量名稱 vm。
屬性和方法
每個Vue實例都會代理其數據對象中的所有屬性，代碼如下：
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` 改變后調用
})插值法
數據綁定的最基本形式是文本插值，使用 {{}} 語法（雙括號）：
Message: {{ msg }}{{ msg }} 標記將被相應數據對象的 msg 屬性的值替換。 每當此屬性發生更改時，它也會更新。
也可以只處理單次插值，以后的數據變化不會引起插值更新：
This will never change: {{* msg }}下面的代碼：
var data={msg:'Hello Vue.js!'};
new Vue({
el: '#demo',
data: data
})
data.msg="Hello World!";原始 HTML
雙大括號標簽將數據解析為純文本而不是 HTML。 為了輸出真正的 HTML 字符串，您需要使用大括號標簽：
{{{ msg }}}下面的代碼：
var data={msg:'Hello Vue.js!
'};
new Vue({
el: '#demo',
data: data
})HTML 特性
雙大括號標簽也可以用在 HTML 屬性 ( ) 內：
代碼如下所示：
var data={id:'demo'};
new Vue({
el: 'div',
data: data
})我們檢查一下HTML源代碼，看看id是否已經變成我們設置的id了。
表達
Vue.js 支持數據綁定中的全功能表達式：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}篩選
Vue.js 允許在表達式后添加可選的“()”，由“管道符 (|)”表示。 過濾器本質上是一個函數，它接受一個值，處理它，然后返回它。
{{ message | uppercase }}這里我們將表達式的值“管道”到內置過濾器，這實際上只是一個返回大寫值的函數。 Vue.js 提供了幾個內置的過濾器，稍后我們將討論如何開發自己的過濾器。
多個過濾器可以鏈接起來：
{{ message | filterA | filterB }}html代碼：
'demo'>
{{msg | lowercase | capitalize}}
代碼：
var data={msg:'heLLO!'};
new Vue({
el: '#demo',
data: data
})運行結果為： 你好
操作說明
Vue.js 指令 () 是以 v- 為前綴的特殊功能。 本質是模板中出現的特殊標記，讓處理模板的庫知道需要對這里的DOM元素進行一些相應的處理。 指令的職責是當其表達式的值發生變化時向 DOM 應用一些特殊行為。
Hello!
這里 v-if 指令將根據表達式 msg 的 true 或 false 值刪除/插入 <p> 元素。
Vue.js中為我們提供了一些指令：v-text、v-html、v-model、v-on、v-else等，同學們可以查看Vue.js的指令api(/api/#指令) 。
代碼：
var data={msg:0};
new Vue({
el: '#demo',
data: data
})計算屬性
表達式在模板中非常方便，但它們實際上只用于簡單的操作。 模板用于描述視圖的結構。 在模板中放入過多的邏輯可能會使它們變得笨重且難以維護。 這就是為什么 Vue.js 將綁定表達式限制為一個表達式。 如果需要多個表達式的邏輯，則應使用計算屬性。
在 Vue.js 中，您可以通過選項定義計算屬性：
a={{ a }}, b={{ b }}
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綁定、渲染指令、表單控件綁定、自定義指令和過濾器、方法和事件處理程序、組件等內容請參考：
