第Vue常用實(shí)例方法示例梳理分析目錄前言vue實(shí)例方法和實(shí)例數(shù)據(jù)1、vm.$set2、vm.$delete3、vm.$watch實(shí)例方法和事件1、vm.$on2、vm.$emit3、vm.$once4、vm.$off實(shí)例方法和生命周期1、vm.$mount2、vm.$destroy3、vm.$nextTick

前言

vue實(shí)例的屬性

獲取掛載的元素--vm.$el獲取實(shí)例的初始化選項(xiàng)的對象--vm.$options獲取觀察的數(shù)據(jù)對象--vm.$data一對象，可持有的注冊過ref屬性的所有DOM元素和組件實(shí)例

vue實(shí)例方法和實(shí)例數(shù)據(jù)

1、vm.$set

這個實(shí)例方法又是Vue.set方法的別稱，它的功能是新增屬性，因?yàn)関ue沒有辦法探測到普通的新增函數(shù)屬性，所以我們通過使用vm.$set這個方法可以使得vue探測到。

2、vm.$delete

這個方法又是vue,delete的方法的別名，它的功能是刪除對象的屬性，vue通過這個方法刪除屬性，可以探測到。

3、vm.$watch

這個實(shí)例方法用于觀察實(shí)例中一個表達(dá)式或者一個函數(shù)計(jì)算結(jié)果餓變化，有變化，就函數(shù)回調(diào)，回調(diào)的函數(shù)就是得到的參數(shù)為新的值和舊的值。

我們可以通過一段代碼實(shí)例了解一下這個部分：

代碼實(shí)例：

!DOCTYPEhtml

htmllang="en"

head

titlemethods/title

/head

body

divid="app"

button增加/button

button刪除/button

h3你想要的東西：{{}}/h3

價(jià)格：inputtype="text"v-model.number="price"/br

數(shù)量：inputtype="number"v-model="count"/br

總和：inputtype="text"v-model="total"/br

/div

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

varvm=newVue({

el:'#app',

data:{

goods:{},

price:0,

count:1,

total:0

functionaddName(){

Vue.set(vm.goods,'name','漫畫書');

functiondeleteName(){

if(){

vm.$delete(vm.goods,'name');

vm.$watch('price',function(newVal,oldVal){

returnthis.total=newVal*this.count;

vm.$watch('count',function(newVal,oldVal){

returnthis.total=newVal*this.price;

/script

/body

/html

運(yùn)行結(jié)果：

每次按下增加按鈕的時候，就會顯示{{}}里面的漫畫書，當(dāng)按下刪除的時候{{}}就會顯示為空；當(dāng)價(jià)格和數(shù)量改變的時候，總的價(jià)格也會跟著改變。

實(shí)例方法和事件

1、vm.$on

這個實(shí)例方法可以用于監(jiān)聽vue實(shí)例里面的自定義事件，這些事件都是通過vm.$emit觸發(fā)的，回調(diào)函數(shù)會接收所有傳入的時間觸發(fā)函數(shù)的額外的參數(shù)。

2、vm.$emit

這個實(shí)例方法通過觸發(fā)當(dāng)前實(shí)例上的事件，其中的附加的參數(shù)都會傳給到監(jiān)聽器進(jìn)行函數(shù)回調(diào)。

3、vm.$once

這個實(shí)例方法功能是監(jiān)聽一個自定義的事件，但是只能觸發(fā)一次，一旦觸發(fā)了，監(jiān)聽器就會被溢出。

4、vm.$off

這個實(shí)例方法的功能是移除一個自定義的監(jiān)聽器。

我們通過代碼的方式了解一下：

實(shí)例代碼：

!DOCTYPEhtml

htmllang="en"

head

titlemethods/title

/head

body

divid="app"

button@click="zengjia"增加/button

{{num}}

button減少/button

button解除減少操作事件/button

/div

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

varvm=newVue({

el:'#app',

data:{

num:100

methods:{

zengjia:function(){

this.num++;

vm.$on("reduce",function(step){

vm.num=step;

functionjianshao(){

vm.$emit("reduce",2);

functionoff(){

vm.$off("reduce");

/script

/body

/html

運(yùn)行結(jié)果：每次單擊減少按鈕的時候，數(shù)值就會減少；當(dāng)單擊解除減少操作事件，在點(diǎn)擊減少，數(shù)值已經(jīng)不會再改變了。

實(shí)例方法和生命周期

1、vm.$mount

這個實(shí)例方法功能是：如果實(shí)例在沒有收到el選項(xiàng)的時候，就會處于沒有掛載的狀態(tài)，因?yàn)闆]有和它關(guān)聯(lián)的DOM元素?？梢允褂眠@個mount方法進(jìn)行手動掛載。

2、vm.$destroy

這個實(shí)例地方法主要用于完全摧毀一個實(shí)例，清除和其他實(shí)例的連接，并且解除全部指令以及事件監(jiān)聽器。

3、vm.$nextTick

這個實(shí)例方法中的回調(diào)函數(shù)延遲到DOM更新后才能執(zhí)行，但是如果在vue生命周期里面的created鉤子函數(shù)進(jìn)行的DOM事件的話，那么就要放在.nextTick的回調(diào)函數(shù)中?？梢栽跀?shù)據(jù)變化之后立刻使用.nextTick，這樣回調(diào)函數(shù)在DOM更新完成之后就可以進(jìn)行函數(shù)調(diào)用。

我們通過代碼實(shí)例來理解：

實(shí)例代碼：

!DOCTYPEhtml

htmllang="en"

head

titlemethods/title

/head

body

divid="app"

h2ref="first"{{first}}/h2

h3ref="secnd"{{second}}/h3

inputtype="text"v-model="msg"

p{{msg}}/p

button銷毀/button

/div

scriptsrc="/vue/2.2.2/vue.min.js"/script

script

letvm=newVue({

data:{

msg:"看到你就煩",

first:'1',

second:'2',

vm.$mount('#app');

vm.first='丘比特';

vm.second=vm.$refs.first.textContent;

console.log(vm.second);

Vue.nextTick(function(){

vm.second=vm.$refs.first.textContent;

console.log(vm.second);

functiondes