Vue实例API
1.構(gòu)造器(實例化)
var vm = new Vue({
//選項
|-------DOM（3）
| ? |-------el (提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。)
| ? |-------template (一個字符串模板作為 Vue 實例的標識使用。模板將會?替換?掛載的元素。掛載元素的內(nèi)容都將被忽略，除非模板的內(nèi)容有分發(fā) slot。)
| ? |-------render (字符串模板的代替方案，允許你發(fā)揮 JavaScript 最大的編程能力。)
|-------數(shù)據(jù)（6）
| ? |-------data ? ?(Vue實例的數(shù)據(jù)對象。Vue 將會遞歸將 data 的屬性轉(zhuǎn)換為 getter/setter，從而讓 data 的屬性能夠響應(yīng)數(shù)據(jù)變化)
| ? |-------props (可以是數(shù)組或?qū)ο?#xff0c;用于接收來自父組件的數(shù)據(jù)。)
| ? |-------propsData (創(chuàng)建實例時傳遞 props。主要作用是方便測試。)
| ? |-------computed (計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例)
| ? |-------methods (methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的?this?自動綁定為 Vue 實例。)
| ? |-------watch (一個對象，鍵是需要觀察的表達式，值是對應(yīng)回調(diào)函數(shù)。)
|-------生命周期鉤子（10）
| ? |-------beforeCreate(在實例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用。)
| ? |-------create(實例已經(jīng)創(chuàng)建完成之后被調(diào)用。在這一步，實例已完成以下的配置：數(shù)據(jù)觀測(data observer)，屬性和方法的運算， watch/event 事件回調(diào)。然而，掛載階段還沒開始，$el?屬性目前不可見)
| ? |-------beforeMount(在掛載開始之前被調(diào)用：相關(guān)的?render?函數(shù)首次被調(diào)用。)
| ? |-------mounted(el?被新創(chuàng)建的?vm.$el?替換，并掛載到實例上去之后調(diào)用該鉤子。)
| ? |-------beforeUpdate(數(shù)據(jù)更新時調(diào)用，發(fā)生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態(tài)，這不會觸發(fā)附加的重渲染過程。)
| ? |-------updated(由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補丁，在這之后會調(diào)用該鉤子。當這個鉤子被調(diào)用時，組件 DOM 已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。)
| ? |-------activated(keep-alive 組件激活時調(diào)用。)
| ? |-------deactivated(keep-alive 組件停用時調(diào)用。)
| ? |-------beforeDestroy(實例銷毀之前調(diào)用。在這一步，實例仍然完全可用。)
| ? |-------destroyed(Vue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。)
|-------資源（3）
| ? |-------directives(包含 Vue 實例可用指令的哈希表。)
| ? |-------filters(包含 Vue 實例可用過濾器的哈希表。)
| ? |-------components(包含 Vue 實例可用組件的哈希表。)
|-------雜項（6）
| ? |-------parent(指定已創(chuàng)建的實例之父實例，在兩者之間建立父子關(guān)系。子實例可以用?this.$parent?訪問父實例，子實例被推入父實例的?$children?數(shù)組中。)
| ? |-------mixins(mixins?選項接受一個混合對象的數(shù)組。Mixin鉤子按照傳入順序依次調(diào)用,并在調(diào)用組件自身的鉤子之前被調(diào)用。)
| ? |-------name(允許組件模板遞歸地調(diào)用自身。注意，組件在全局用?Vue.component()?注冊時，全局 ID 自動作為組件的 name。)
| ? |-------extends（允許聲明擴展另一個組件。這主要是為了便于擴展單文件組件。這和?mixins?類似，區(qū)別在于，組件自身的選項會比要擴展的源組件具有更高的優(yōu)先級。）
| ? |-------delimiters（改變純文本插入分隔符。）
| ? |-------functional（使組件無狀態(tài)（沒有?data?）和無實例（沒有?this?上下文）。他們用一個簡單的?render?函數(shù)返回虛擬節(jié)點使他們更容易渲染。）
})
? ?擴展Vue構(gòu)造器：可以擴展?Vue?構(gòu)造器，從而用預(yù)定義選項創(chuàng)建可復(fù)用的組件構(gòu)造器：
var MyComponent = Vue.extend({
})?
2.屬性與方法
1.實例屬性(10)
vm.$data（Vue 實例觀察的數(shù)據(jù)對象。Vue 實例代理了對其 data 對象屬性的訪問。）
vm.$el（Vue 實例使用的根 DOM 元素。）
vm.$options（用于當前 Vue 實例的初始化選項。需要在選項中包含自定義屬性時會有用處）
vm.$parent（父實例，如果當前實例有的話。）
vm.$root（當前組件樹的根 Vue 實例。如果當前實例沒有父實例，此實例將會是其自已。）
vm.$children（當前實例的直接子組件。）
vm.$slots（用來訪問被?slot 分發(fā)的內(nèi)容。每個具名 slot?有其相應(yīng)的屬性（例如：slot="foo"?中的內(nèi)容將會在?vm.$slots.foo中被找到）。default?屬性包括了所有沒有被包含在具名 slot 中的節(jié)點。）
vm.$scopedSlots（用來訪問?scoped slots.）
vm.$refs（一個對象，其中包含了所有擁有?ref?注冊的子組件。）
vm.$isServer（當前 Vue 實例是否運行于服務(wù)器。）
2.實例方法/數(shù)據(jù)（3）
vm.$watch（觀察 Vue 實例變化的一個表達式或計算屬性函數(shù)。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。）
vm.$set（這是全局?Vue.set?的別名。）
vm.$delete（這是全局?Vue.delete?的別名。）
3.實例方法/事件（4）
vm.$on（監(jiān)聽當前實例上的自定義事件。事件可以由vm.$emit觸發(fā)。回調(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。）
vm.$once（監(jiān)聽一個自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之后移除監(jiān)聽器。）
vm.$off（移除事件監(jiān)聽器。）
vm.$emit（觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。）
4.實例方法/生命周期（4）
vm.$mount（如果 Vue 實例在實例化時沒有收到 el 選項，則它處于“未掛載”狀態(tài)，沒有關(guān)聯(lián)的 DOM 元素。可以使用?vm.$mount()手動地掛載一個未掛載的實例。）
vm.$forceUpdate（迫使Vue實例重新渲染。注意它僅僅影響實例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。）
vm.$nextTick（將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。）
vm.$destroy（完全銷毀一個實例。清理它與其它實例的連接，解綁它的全部指令及事件監(jiān)聽器。）
3.全局API（10）
Vue.extend ------使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象。
Vue.nextTick ------在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。
Vue.set ? ? ? ? ?------設(shè)置對象的屬性。如果對象是響應(yīng)式的，確保屬性被創(chuàng)建后也是響應(yīng)式的，同時觸發(fā)視圖更新。這個方法主要用于避開 Vue 不能檢測屬性被添加的限制。
Vue.delete ? ??------刪除對象的屬性。如果對象是響應(yīng)式的，確保刪除能觸發(fā)更新視圖。這個方法主要用于避開 Vue 不能檢測到屬性被刪除的限制，但是你應(yīng)該很少會使用它。
Vue.directive ?------注冊或獲取全局指令。
Vue.filter ? ? ? ?------注冊或獲取全局過濾器。
Vue.component----注冊或獲取全局組件。注冊還會自動使用給定的id設(shè)置組件的名稱
Vue.use ? ? ? ??------安裝 Vue.js 插件。
Vue.mixin ------全局注冊一個混合，影響注冊之后所有創(chuàng)建的每個 Vue 實例。
Vue.compile ?------在render函數(shù)中編譯模板字符串。只在獨立構(gòu)建時有效
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){} ?------指定組件的渲染和觀察期間未捕獲錯誤的處理函數(shù)。
Vue.config.ignoredElements = ['my-custom-web-component',?'another-web-component'] ------忽略在Vue 之外的自定義元素。
Vue.config.keyCodes ? ------給v-on自定義鍵位別名
2.生命周期
Vue實例有一個完整的生命周期，從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程，我們稱這是Vue的生命周期。通俗說就是Vue實例從創(chuàng)建到銷毀的過程，就是生命周期。
那么下面我們來進行測試一下
<section id="app-8">{{data}} </section> var myVue=new Vue({el:"#app-8",data:{data:"aaaaa",info:"nono"},beforeCreate:function(){console.log("創(chuàng)建前========")console.log(this.data)console.log(this.$el)},created:function(){console.log("已創(chuàng)建========")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的值為“虛擬”的元素節(jié)點
4、mount之后，mounted之前，“虛擬”的dom節(jié)點被真實的dom節(jié)點替換，并將其插入到dom樹中，于是在觸發(fā)mounted時，可以獲取到$el為真實的dom元素()
myVue.$el===document.getElementById("app-8") ?// true
?
接著，在console中修改data，更新視圖
?
? ?觸發(fā)beforeUpdata 和updated
接著，執(zhí)行myVue.$destroy()
?
總結(jié)一下，對官方文檔的那張圖簡化一下，就得到了這張圖
轉(zhuǎn)載自：http://www.cnblogs.com/gagag/p/6246493.html
?
再看一個綜合的實戰(zhàn)的例子，可能涉及到ajax和組件，不過先看一下vue的生命周期的例子的用法：
import Axios from 'axios' // 這是一個輕量級的ajax庫，import是es6模塊導(dǎo)入的語法。 export default { // 這是一個vue的模塊，后面講奧。name: 'app',components: {},data: function () {return {list: []}},mounted: function () { // 掛在完成后的生命周期鉤子注冊。this.$nextTick(function () { // 等待下一次更新完成后執(zhí)行業(yè)務(wù)處理代碼。Axios.get('/api/menulist', {// 將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新params: {}}).then(function (res) {this.list = res.data}.bind(this))})} }?https://www.cnblogs.com/xiaofenguo/p/6605091.html
轉(zhuǎn)載于:https://www.cnblogs.com/shimily/articles/9152152.html
總結(jié)
- 上一篇： 首艘国产航母已成笑柄！
- 下一篇： [Hive]-函数篇