1.Vue例項API
1.構造器(例項化)
var vm = new Vue({
//選項
|-------DOM（3）
| |-------el (提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標。)
| |-------template (一個字串模板作為 Vue 例項的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。)
| |-------render (字串模板的代替方案，允許你發揮 JavaScript 最大的程式設計能力。)
|-------資料（6）
| |-------data (Vue例項的資料物件。Vue 將會遞迴將 data 的屬性轉換為 getter/setter，從而讓 data 的屬效能夠響應資料變化)
| |-------props (可以是陣列或物件，用於接收來自父元件的資料。)
| |-------propsData (建立例項時傳遞 props。主要作用是方便測試。)
| |-------computed (計算屬性將被混入到 Vue 例項中。所有 getter 和 setter 的 this 上下文自動地繫結為 Vue 例項)
| |-------methods (methods 將被混入到 Vue 例項中。可以直接通過 VM 例項訪問這些方法，或者在指令表示式中使用。方法中的 this 自動繫結為 Vue 例項。)
| |-------watch (一個物件，鍵是需要觀察的表示式，值是對應回撥函式。)
|-------生命週期鉤子（10）
| |-------beforeCreate(在例項初始化之後，資料觀測(data observer) 和 event/watcher 事件配置之前被呼叫。)
| |-------create(例項已經建立完成之後被呼叫。在這一步，例項已完成以下的配置：資料觀測(data observer)，屬性和方法的運算， watch/event 事件回撥。然而，掛載階段還沒開始，$el 屬性目前不可見)
| |-------beforeMount(在掛載開始之前被呼叫：相關的 render 函式首次被呼叫。)
| |-------mounted(el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。)
| |-------beforeUpdate(資料更新時呼叫，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。)
| |-------updated(由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。當這個鉤子被呼叫時，元件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。)
| |-------activated(keep-alive 元件啟用時呼叫。)
| |-------deactivated(keep-alive 元件停用時呼叫。)
| |-------beforeDestroy(例項銷燬之前呼叫。在這一步，例項仍然完全可用。)
| |-------destroyed(Vue 例項銷燬後呼叫。呼叫後，Vue 例項指示的所有東西都會解繫結，所有的事件監聽器會被移除，所有的子例項也會被銷燬。)
|-------資源（3）
| |-------directives(包含 Vue 例項可用指令的雜湊表。)
| |-------filters(包含 Vue 例項可用過濾器的雜湊表。)
| |-------components(包含 Vue 例項可用元件的雜湊表。)
|-------雜項（6）
| |-------parent(指定已建立的例項之父例項，在兩者之間建立父子關係。子例項可以用 this.$parent 訪問父例項，子例項被推入父例項的 $children 陣列中。)
| |-------mixins(mixins 選項接受一個混合物件的陣列。Mixin鉤子按照傳入順序依次呼叫,並在呼叫元件自身的鉤子之前被呼叫。)
| |-------name(允許元件模板遞迴地呼叫自身。注意，元件在全域性用 Vue.component() 註冊時，全域性 ID 自動作為元件的 name。)
| |-------extends（允許宣告擴充套件另一個元件。這主要是為了便於擴充套件單檔案元件。這和 mixins 類似，區別在於，元件自身的選項會比要擴充套件的源元件具有更高的優先順序。）
| |-------delimiters（改變純文字插入分隔符。）
| |-------functional（使元件無狀態（沒有 data ）和無例項（沒有 this 上下文）。他們用一個簡單的 render 函式返回虛擬節點使他們更容易渲染。）
})
擴充套件Vue構造器：可以擴充套件 Vue 構造器，從而用預定義選項建立可複用的元件構造器：
var MyComponent = Vue.extend({
})
2.屬性與方法
1.例項屬性(10)
vm.$data（Vue 例項觀察的資料物件。Vue 例項代理了對其 data 物件屬性的訪問。）
vm.$el（Vue 例項使用的根 DOM 元素。）
vm.$options（用於當前 Vue 例項的初始化選項。需要在選項中包含自定義屬性時會有用處）
vm.$parent（父例項，如果當前例項有的話。）
vm.$root（當前元件樹的根 Vue 例項。如果當前例項沒有父例項，此例項將會是其自已。）
vm.$children（當前例項的直接子元件。）
vm.$slots（用來訪問被 slot 分發的內容。每個具名 slot 有其相應的屬性（例如：slot="foo" 中的內容將會在 vm.$slots.foo中被找到）。default 屬性包括了所有沒有被包含在具名 slot 中的節點。）
vm.$scopedSlots（用來訪問 scoped slots.）
vm.$refs（一個物件，其中包含了所有擁有 ref 註冊的子元件。）
vm.$isServer（當前 Vue 例項是否執行於伺服器。）
2.例項方法/資料（3）
vm.$watch（觀察 Vue 例項變化的一個表示式或計算屬性函式。回撥函式得到的引數為新值和舊值。）
vm.$set（這是全域性 Vue.set 的別名。）
vm.$delete（這是全域性 Vue.delete 的別名。）
3.例項方法/事件（4）
vm.$on（監聽當前例項上的自定義事件。事件可以由vm.$emit觸發。回撥函式會接收所有傳入事件觸發函式的額外引數。）
vm.$once（監聽一個自定義事件，但是隻觸發一次，在第一次觸發之後移除監聽器。）
vm.$off（移除事件監聽器。）
vm.$emit（觸發當前例項上的事件。附加引數都會傳給監聽器回撥。）
4.例項方法/生命週期（4）
vm.$mount（如果 Vue 例項在例項化時沒有收到 el 選項，則它處於“未掛載”狀態，沒有關聯的 DOM 元素。可以使用 vm.$mount()手動地掛載一個未掛載的例項。）
vm.$forceUpdate（迫使Vue例項重新渲染。注意它僅僅影響例項本身和插入插槽內容的子元件，而不是所有子元件。）
vm.$nextTick（將回撥延遲到下次 DOM 更新迴圈之後執行。在修改資料之後立即使用它，然後等待 DOM 更新。）
vm.$destroy（完全銷燬一個例項。清理它與其它例項的連線，解綁它的全部指令及事件監聽器。）
3.全域性API（10）
Vue.extend ------使用基礎 Vue 構造器，建立一個“子類”。引數是一個包含元件選項的物件。
Vue.nextTick ------在下次 DOM 更新迴圈結束之後執行延遲迴調。在修改資料之後立即使用這個方法，獲取更新後的 DOM。
Vue.set ------設定物件的屬性。如果物件是響應式的，確保屬性被建立後也是響應式的，同時觸發檢視更新。這個方法主要用於避開 Vue 不能檢測屬性被新增的限制。
Vue.delete ------刪除物件的屬性。如果物件是響應式的，確保刪除能觸發更新檢視。這個方法主要用於避開 Vue 不能檢測到屬性被刪除的限制，但是你應該很少會使用它。
Vue.directive ------註冊或獲取全域性指令。
Vue.filter ------註冊或獲取全域性過濾器。
Vue.component----註冊或獲取全域性元件。註冊還會自動使用給定的id設定元件的名稱
Vue.use ------安裝 Vue.js 外掛。
Vue.mixin ------全域性註冊一個混合，影響註冊之後所有建立的每個 Vue 例項。
Vue.compile ------在render函式中編譯模板字串。只在獨立構建時有效
4.全域性配置 Vue.config （6）
Vue.config.silent = true ------取消 Vue 所有的日誌與警告。
Vue.config.optionMergeStrategies.methods ------自定義合併策略的選項。
Vue.config.devtools= true ------配置是否允許vue-devtools檢查程式碼。
Vue.config.errorHandler= functiono(err, vm){} ------指定元件的渲染和觀察期間未捕獲錯誤的處理函式。
Vue.config.ignoredElements = ['my-custom-web-component', 'another-web-component'] ------忽略在Vue 之外的自定義元素。
Vue.config.keyCodes ------給v-on自定義鍵位別名
2.生命週期
Vue例項有一個完整的生命週期，從開始建立、初始化資料、編譯模板、掛載Dom、渲染→更新→渲染、解除安裝等一系列過程，我們稱這是Vue的生命週期。通俗說就是Vue例項從建立到銷燬的過程，就是生命週期。
圖片轉載自：www.cnblogs.com/fly_dragon/…
那麼下面我們來進行測試一下
<section id="app-8">
{{data}}
</section>複製程式碼var myVue=new Vue({
el:"#app-8",
data:{
data:"aaaaa",
info:"nono"
},
beforeCreate:function(){
console.log("建立前========")
console.log(this.data)
console.log(this.$el)
},
created:function(){
console.log("已建立========")
console.log(this.info)
console.log(this.$el)
},
beforeMount:function(){
console.log("mount之前========")
console.log(this.info)
console.log(this.$el)
},
mounted:function(){
console.log("mounted========")
console.log(this.info)
console.log(this.$el)
},
beforeUpdate:function(){
console.log("更新前========");
},
updated:function(){
console.log("更新完成========");
},
beforeDestroy:function(){
console.log("銷燬前========")
console.log(this.info)
console.log(this.$el)
},
destroyed:function(){
console.log("已銷燬========")
console.log(this.info)
console.log(this.$el)
}
})複製程式碼
程式碼如上，瀏覽器開始載入檔案
由上圖可知：
1、beforeCreate 此時$el、data 的值都為undefined
2、create之後，此時可以拿到data的值，但是$el依舊為undefined
3、mount之前，$el的值為“虛擬”的元素節點
4、mount之後，mounted之前，“虛擬”的dom節點被真實的dom節點替換，並將其插入到dom樹中，於是在觸發mounted時，可以獲取到$el為真實的dom元素()
myVue.$el===document.getElementById("app-8") // true
接著，在console中修改data，更新檢視
觸發beforeUpdata 和updated
接著，執行myVue.$destroy()
總結一下，對官方文件的那張圖簡化一下，就得到了這張圖
轉載自：www.cnblogs.com/gagag/p/624…
再看一個綜合的實戰的例子，可能涉及到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))
})
}
}複製程式碼
轉載自：www.cnblogs.com/fly_dragon/…