http://www.jianshu.com/p/b5858f1e6e76
Vue的實例是Vue框架的入口，其實也就是前端的ViewModel，它包含了頁面中的業務邏輯處理、數據模型等，當然它也有自己的一系列的生命周期的事件鈎子，輔助我們進行對整個Vue實例生成、編譯、掛着、銷毀等過程進行js控制。
Vue實例初始化的選項配置對象詳解
前面我們已經用了很多次 new Vue({...})的代碼，而且Vue初始化的選項都已經用了data、methods、el、computedd等,估計您看到這里時，應該已經都明白了他們的作用，我們就詳細講解一下他們的使用情況。更詳細的請參考官網內容
Vue實例的的data對象
- 介紹
Vue的實例的數據對象data 我們已經用了很多了，數據綁定離不開data里面的數據。也是Vue的核心屬性。
它是Vue綁定數據到HTML標簽的數據源泉，另外Vue框架會自動監視data里面的數據變化，自動更新數據到HTML標簽上去。本質原理是：Vue會自動將data里面的數據進行遞歸抓換成getter和setter，然后就可以自動更新HTML標簽了，當然用getter和setter所以老的瀏覽器Vue支持的不夠好。
-
data對象的類型：
- 類型是Object或者Function。
- 如果是組件對象中，data必須是Function類型。【后面學了組件后就明白了，暫時對組件先放放。】
-
實例：
// 創建普通的Vue實例 var vm = new Vue({ data: data }) // 組件定義【后面會詳細講的】 // Vue.extend() 中 data 必須是函數 var Component = Vue.extend({ data: function () { //這里必須是函數！！！！ return { a: 1 } } })Vue實例的computed
- 介紹
Vue的計算屬性（computed)的屬性會自動混入Vue的實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。這就很強大了，再計算屬性中定義的函數里面可以直接使用指向了vue實例的this，異常方便的啊。
- 類型
{ 鍵：函數}{ [key: string]: Function | { get: Function, set: Function } }
當然，可以省略setter,如果省略了setter，那么值就可以是普通函數，但是必須有返回值。
- 官方的實例
var vm = new Vue({ data: { a: 1 }, computed: { // 僅讀取，值只須為函數 aDouble: function () { return this.a * 2 }, // 讀取和設置 aPlus: { get: function () { return this.a + 1 }, set: function (v) { this.a = v - 1 } } } }) vm.aPlus // -> 2 vm.aPlus = 3 vm.a // -> 2 vm.aDouble // -> 4
methods
-
類型: { [key: string]: Function }
-
詳細:
methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。
注意，不應該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.a 將是 undefined。
- 示例:
var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2watch
- 類型
{ [key: string]: string | Function | Object }
- 詳細:
一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。
- 示例:
var vm = new Vue({ data: { a: 1, b: 2, c: 3 }, watch: { // 監控a變量變化的時候，自動執行此函數 a: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) }, // 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true } } }) vm.a = 2 // -> new: 2, old: 1 //注意，不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.updateAutocomplete 將是 undefined。參考綜合案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門之數據監控</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ number }}</p> <input type="button" name="btnGetNumber" value="增加" v-on:click="getNumber()"> </div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, methods: { // 事件響應方法的邏輯代碼 getNumber: function (e) { this.number += 1; // 不管是內聯方法調用，還是綁定事件處理器兩種方式執行事件響應方法的時候 this都是指向 app } }, watch: { // 監控number的變化，並自動執行下面的函數 number: function (val, oldVal) { console.log('val:' + val + ' - oldVal: ' + oldVal); } } }); </script> </body> </html>設置el的詳解
- 類型
string | HTMLElement
限制： 只在由 new 創建的實例中遵守。
- 詳細：
提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標,也就是說Vue綁定數據到哪里去找。可以是CSS 選擇器，也可以是一個 HTMLElement實例。
在實例掛載之后(生命周期的內容后面會詳細講的奧)， 元素可以用 vm.$el 訪問。
如果這個選項在實例化時有作用，實例將立即進入編譯過程，否則，需要顯式調用 vm.$mount() 手動開啟編譯。
// 幾乎所有例子都用到這個，所以就不再贅述 var app = new Vue({ el: '#app', ... });Vue實例的生命周期
Vue實例有一個完整的生命周期，也就是從開始創建、初始化數據、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創建到銷毀的過程，就是生命周期。
在Vue的整個生命周期中，它提供了一系列的事件，可以讓我們注冊js方法，可以讓我們達到控制整個過程的目的地，哇賽，如果你搞過Asp.NET WebForm的話，你會發現整個就是WebForm的翻版嘛哈哈。值得注意的是，在這些事件響應方法中的this直接指向的是vue的實例。
首先看看下面官網的一張生命周期的圖，我做一下標注，看看整體的流程，后面我們上代碼做一下效果。
Vue提供的可以注冊的鈎子都在上圖片的紅色框標注。
他們是：
beforeCreate
在實例初始化之后，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。
created
實例已經創建完成之后被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
beforeMount
在掛載開始之前被調用：相關的 render 函數首次被調用。
mounted
el 被新創建的 vm.$el 替換，並掛載到實例上去之后調用該鈎子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
beforeUpdate
數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
你可以在這個鈎子中進一步地更改狀態，這不會觸發附加的重渲染過程。
updated
由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。
當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態，因為這可能會導致更新無限循環。
該鈎子在服務器端渲染期間不被調用。
beforeDestroy
實例銷毀之前調用。在這一步，實例仍然完全可用。
destroyed
Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
該鈎子在服務器端渲染期間不被調用。
接下來我們做一個例子，看一下Vue中所有的生命周期怎么用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門之生命周期</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ number }}</p> <input type="text" name="btnSetNumber" v-model="number"> </div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, beforeCreate: function () { console.log('beforeCreate 鈎子執行...'); console.log(this.number) }, cteated: function () { console.log('cteated 鈎子執行...'); console.log(this.number) }, beforeMount: function () { console.log('beforeMount 鈎子執行...'); console.log(this.number) }, mounted: function () { console.log('mounted 鈎子執行...'); console.log(this.number) }, beforeUpdate: function () { console.log('beforeUpdate 鈎子執行...'); console.log(this.number) }, updated: function () { console.log('updated 鈎子執行...'); console.log(this.number) }, beforeDestroy: function () { console.log('beforeDestroy 鈎子執行...'); console.log(this.number) }, destroyed: function () { console.log('destroyed 鈎子執行...'); console.log(this.number) }, }); </script> </body> </html>再看一個綜合的實戰的例子，可能涉及到ajax和組件，不過先看一下vue的生命周期的例子的用法：
import Axios from 'axios' // 這是一個輕量級的ajax庫，import是es6模塊導入的語法。 export default { // 這是一個vue的模塊，后面講奧。 name: 'app', components: { }, data: function () { return { list: [] } }, mounted: function () { // 掛在完成后的生命周期鈎子注冊。 this.$nextTick(function () { // 等待下一次更新完成后執行業務處理代碼。 Axios.get('/api/menulist', {// 將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新 params: { } }).then(function (res) { this.list = res.data }.bind(this)) }) } }Vue實例的全局配置
這一塊都是一些小的知識點，我就不贅述了，直接copy 官網
Vue.config 是一個對象，包含 Vue 的全局配置。可以在啟動應用之前修改下列屬性：
-
silent
-
類型： boolean
-
默認值： false
-
用法：
Vue.config.silent = true //取消 Vue 所有的日志與警告。
-
-
optionMergeStrategies
-
類型： { [key: string]: Function }
-
默認值： {}
-
用法：
Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) { return child + 1 } const Profile = Vue.extend({ _my_option: 1 }) // Profile.options._my_option = 2 //自定義合並策略的選項。 //合並策略選項分別接受第一個參數作為父實例，第二個參數為子實例，Vue實例上下文被作為第三個參數傳入。
-
-
devtools
-
類型： boolean
-
默認值： true (生產版為 false)
-
用法：
// 務必在加載 Vue 之后，立即同步設置以下內容 Vue.config.devtools = true //配置是否允許 vue-devtools 檢查代碼。開發版本默認為 true，生產版本默認為 false。生產版本設為 true 可以啟用檢查。
-
-
errorHandler
-
類型： Function
-
默認值： 默認拋出錯誤
-
用法：
Vue.config.errorHandler = function (err, vm) { // handle error } //指定組件的渲染和觀察期間未捕獲錯誤的處理函數。這個處理函數被調用時，可獲取錯誤信息和 Vue 實例。 //Sentry, an error tracking service, provides official integration using this option.
-
-
ignoredElements
-
類型: Array<string>
-
默認值: []
-
用法:
Vue.config.ignoredElements = [ 'my-custom-web-component', 'another-web-component' ] 須使 Vue 忽略在 Vue 之外的自定義元素 (e.g., 使用了 Web Components APIs)。否則，它會假設你忘記注冊全局組件或者拼錯了組件名稱，從而拋出一個關於 Unknown custom element 的警告。
-
-
keyCodes
-
類型： { [key: string]: number | Array<number> }
-
默認值： {}
-
用法：
Vue.config.keyCodes = { v: 86, f1: 112, mediaPlayPause: 179, up: [38, 87] } //給 v-on 自定義鍵位別名。
-
Vue的全局API
Vue的全局API提供大量的功能，我這里就給大家羅列幾個常用的結果，其他的還是參考官網.
Vue.nextTick
語法： Vue.nextTick( [callback, context] )
參數：
{Function} [callback] {Object} [context]用法：
在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。
// 修改數據 vm.msg = 'Hello' // DOM 還沒有更新 Vue.nextTick(function () { // DOM 更新了 })Vue.set
語法： Vue.set( object, key, value )
參數：
{Object} object
{string} key {any} value 返回值： 設置的值.用法：
設置對象的屬性。如果對象是響應式的，確保屬性被創建后也是響應式的，同時觸發視圖更新。這個方法主要用於避開 Vue 不能檢測屬性被添加的限制。
注意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。
Vue.compile
-
語法：
Vue.compile( template ) -
參數：
{string} template
- 用法：
```js
//在render函數中編譯模板字符串。只在獨立構建時有效
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
```
全局API總結
其實還有幾個其他的全局API，不打算在這里講了，比如擴展組件Vue.extend 的用法、Vue.use加載插件、Vue.filter加載過濾器、Vue.directive自定義指令等
后面再講其他Vue的知識點的時候，再加上這些，全局API其實就是Vue類型的靜態方法，全局范圍內都可以使用的，某些實例的方法本質也是調用了這些全局的，后面用到時候再說。
Vue實例與生命周期總結
Vue的實例封裝的還是挺有藝術性的，很符合開發者的思維規范，它的生命周期也非常清晰，使用起來也非常方便。Vue確實一個好框架。
Vue事件處理
監聽事件的Vue處理
Vue提供了協助我們為標簽綁定時間的方法，當然我們可以直接用dom原生的方式去綁定事件。Vue提供的指令進行綁定也是非常方便，而且能讓ViewModel更簡潔，邏輯更徹底。所以還是推薦大家使用的。
Vue提供了v-on指令幫助我們進行事件的綁定。
基本的內聯事件處理方法[官方demo]：
<div id="example-1"> <!-- 為按鈕綁定點擊事件，執行counter += 1的任務。 --> <button v-on:click="counter += 1">增加 1</button> <p>這個按鈕被點擊了 {{ counter }} 次。</p> </div> <script> var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) </script>事件處理方法集成到Vue對象
內聯的方式綁定的事件，只能處理簡單的事件的處理邏輯。復雜的情況還是封裝到js中最方便，也不容易出錯。
Vue對象中可以添加methods屬性，開發者可以把事件處理函數的邏輯放到methods中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue入門之動態顯示表格</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ number }}</p> <input type="button" name="btnGetNumber" value="增加[綁定事件處理器]" v-on:click="getNumber"> <input type="button" name="btnGetNumber" value="增加[內聯方法調用]" v-on:click="getNumber()"> </div> <script> var app = new Vue({ el: '#app', data: { number: 1 }, methods: { // 事件響應方法的邏輯代碼 getNumber: function (e) { this.number += 1; // 不管是內聯方法調用，還是綁定事件處理器兩種方式執行事件響應方法的時候 this都是指向 app } } }); </script> </body> </html>事件修飾符
官網上寫的非常好，這塊就直接用管網的吧。在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。
為了解決這個問題， Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。
- .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> <!-- the click event will be triggered at most once --> <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
事件綁定的簡寫
Vue中屬性的綁定的簡寫直接是: === 'v-bind:'
而事件的縮寫是直接變成@. 也就是說： v-on: === @
看下面的例子：
<!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>事件綁定總結
Vue為了方便大家進行開發，提供了事件的相關的封裝，可以讓我們方便我們用Vue對事件進行開發，尤其是v-on指令的非常方便的跟Vue對象中methods進行配合進行復雜的事件處理，非常方便。另外事件的事件修飾符和按鍵修飾符也可以讓Vue事件這塊錦上添花。