Vue 實(shí)例方法

實(shí)例屬性

1、組件樹訪問

1-1、vm.$parent

用來訪問當(dāng)前組件實(shí)例的父實(shí)例，如果當(dāng)前實(shí)例有的話

1-2、vm.$root

當(dāng)前組件樹的根 Vue 實(shí)例。如果當(dāng)前實(shí)例沒有父實(shí)例，此實(shí)例將會是其自已

1-3、vm.$children

類型：Array

當(dāng)前實(shí)例的直接子組件。需要注意 $children 并不保證順序，也不是響應(yīng)式的。如果你發(fā)現(xiàn)自己正在嘗試使用 $children 來進(jìn)行數(shù)據(jù)綁定，考慮使用一個(gè)數(shù)組配合 v-for 來生成子組件，并且使用 Array 作為真正的來源。

1-4、vm.$refs

類型：Object

一個(gè)對象，其中包含了所有擁有 ref 注冊的子組件。

代碼示例如下：html>

`msg`

var?vm?=?new?Vue({

el:'#app',

data:{

msg:'Hello?World!'

}

})

1-5、vm.$slots

類型：Object

用來訪問被 slot 分發(fā)的內(nèi)容。每個(gè)具名 slot 有其相應(yīng)的屬性(例如：slot="foo" 中的內(nèi)容將會在 vm.$slots.foo 中被找到)。default 屬性包括了所有沒有被包含在一個(gè)具名 slot 中的節(jié)點(diǎn)。

在使用 render 函數(shù)書寫一個(gè)組件時(shí)，訪問 vm.$slots 最有幫助。

HTML：

About?Me

Here's?some?page?content,?which?will?be?included?in?vm.$slots.default,?because?it's?not?inside?a?named?slot.

Copyright?2016?Evan?You

If?I?have?some?content?down?here,?it?will?also?be?included?in?vm.$slots.default.

.

JS：Vue.component('blog-post',?{

render:?function?(createElement)?{

var?header?=?this.$slots.header

var?body???=?this.$slots.default

var?footer?=?this.$slots.footer

return?createElement('div',?[

createElement('header',?header)

createElement('main',?body)

createElement('footer',?footer)

])

}

})

1-6、vm.$isServer

類型：boolean

當(dāng)前 Vue 實(shí)例是否運(yùn)行于服務(wù)器。

2、DOM訪問

2-1、vm.$el

類型：HTMLElement

用來訪問掛載當(dāng)前組件實(shí)例的 DOM 元素

2-2、vm.$els

用來訪問$el 元素中使用了 v-el 指令的DOM 元素

v-el 用法：為DOM元素注冊一個(gè)索引，方便通過所屬實(shí)例的$els 訪問這個(gè)元素?？梢杂?v-el:some-el 設(shè)置 this.$els.someEl

代碼示例如下：

Hello

World

var?vm?=?new?Vue({

el:'#app',

data:{

msg:'',

otherMsg:''

},

methods:{

show:function(){?//通過this.$els獲取相應(yīng)的DOM元素

console.log(this.$els.msg.textContent);

},

showOther:function(){

console.log(this.$els.otherMsg.textContent);

}

}

});

3、數(shù)據(jù)訪問

3-1、vm.$data

用來訪問組件實(shí)例觀察的數(shù)據(jù)對象，該對象引用組件實(shí)例化時(shí)選項(xiàng)中的data屬性

3-2、vm.$options

用于當(dāng)前 Vue 實(shí)例的初始化選項(xiàng)。需要在選項(xiàng)中包含自定義屬性時(shí)會有用處：new?Vue({

customOption:?'foo',

created:?function?()?{

console.log(this.$options.customOption)?//?->?'foo'

}

})

實(shí)例方法

1、數(shù)據(jù)

1-1、vm.$watch( expOrFn, callback, [options] )

參數(shù)：expOrFn --> ?一個(gè)字符串 或者 函數(shù)

callback ?--> ?函數(shù)

[options] --> ?對象

deep ?--> ?布爾值

immediate ?--> 布爾值

返回值：unwatch --> 函數(shù)

用法：

觀察 Vue 實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)?；卣{(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對于更復(fù)雜的表達(dá)式，用一個(gè)函數(shù)取代。

注意：在變異(不是替換)對象或數(shù)組時(shí)，舊值將與新值相同，因?yàn)樗鼈兊囊弥赶蛲粋€(gè)對象/數(shù)組。Vue 不會保留變異之前值的副本。

代碼示例如下：//?鍵路徑

vm.$watch('a.b.c',?function?(newVal,?oldVal)?{

//?做點(diǎn)什么

})

//?函數(shù)

vm.$watch(

function?()?{

return?this.a?+?this.b

},

function?(newVal,?oldVal)?{

//?做點(diǎn)什么

}

)

vm.$watch 返回一個(gè)取消觀察函數(shù)，用來停止觸發(fā)回調(diào)：var?unwatch?=?vm.$watch('a',?cb)

//?之后取消觀察

unwatch()

選項(xiàng)：deep

為了發(fā)現(xiàn)對象內(nèi)部值的變化，可以在選項(xiàng)參數(shù)中指定 deep: true 。注意監(jiān)聽數(shù)組的變動不需要這么做。vm.$watch('someObject',?callback,?{

deep:?true

})

vm.someObject.nestedValue?=?123

//?callback?is?fired

選項(xiàng)：immediate

在選項(xiàng)參數(shù)中指定 immediate: true 將立即以表達(dá)式的當(dāng)前值觸發(fā)回調(diào)：vm.$watch('a',?callback,?{

immediate:?true

})

//?立即以?`a`?的當(dāng)前值觸發(fā)回調(diào)

1-2、vm.$set( object, key, value )

這是全局 Vue.set 的別名

參數(shù)：{Object} object

{string} key

{any} value

返回值：設(shè)置的值

1-3、vm.$delete( object, key )

這是全局 Vue.delete 的別名

參數(shù)：{Object} object

{string} key

2、事件

2-1、vm.$on( event, callback )

參數(shù)：{String} event

{Function} callback

用法：監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由vm.$emit觸發(fā)?；卣{(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

示例：vm.$on('test',?function?(msg)?{

console.log(msg)

})

vm.$emit('test',?'hi')

//?->?"hi"

2-2、vm.$once( event, callback )

參數(shù)：{String} event

{Function} callback

用法：監(jiān)聽一個(gè)自定義事件，但是只觸發(fā)一次，在第一次觸發(fā)之移除除監(jiān)聽器。

2-3、vm.$off( [event, callback] )

參數(shù)：{String} event

{Function} callback

用法：移除事件監(jiān)聽器。

(1)、如果沒有提供參數(shù)，則移除所有的事件監(jiān)聽器；

(2)、如果只提供了事件，則移除該事件所有的監(jiān)聽器；

(3)、如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)回調(diào)的監(jiān)聽器。

2-4、vm.$emit( event, […args] )

參數(shù)：{String} event

[...args]

用法：觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。

3、生命周期

3-1、vm.$mount( [elementOrSelector] )

參數(shù)：

{Element | string} [elementOrSelector]

{boolean} [hydrating]

返回值：vm - 實(shí)例自身

用法：

如果 Vue 實(shí)例在實(shí)例化時(shí)沒有收到 el 選項(xiàng)，則它處于“未掛載”狀態(tài)，沒有關(guān)聯(lián)的 DOM 元素?？梢允褂?vm.$mount() 手動地掛載一個(gè)未掛載的實(shí)例。

如果沒有提供 elementOrSelector 參數(shù)，模板將被渲染為文檔之外的的元素，并且你必須使用原生DOM API把它插入文檔中。

這個(gè)方法返回實(shí)例自身，因而可以鏈?zhǔn)秸{(diào)用其它實(shí)例方法。var?MyComponent?=?Vue.extend({

template:?'

Hello!'

})

//?創(chuàng)建并掛載到?#app?(會替換?#app)

new?MyComponent().$mount('#app')

//?同上

new?MyComponent({?el:?'#app'?})

//?或者，在文檔之外渲染并且隨后掛載

var?component?=?new?MyComponent().$mount()

document.getElementById('app').appendChild(component.$el)

3-2、vm.$forceUpdate()

迫使Vue實(shí)例重新渲染。注意它僅僅影響實(shí)例本身和插入插槽內(nèi)容的子組件，而不是所有子組件。

3-3、vm.$nextTick( callback )

參數(shù)：{Function} callback

用法：

將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的是回調(diào)的 this 自動綁定到調(diào)用它的實(shí)例上。

示例代碼如下：new?Vue({

//?...

methods:?{

//?...

example:?function?()?{

//?修改數(shù)據(jù)

this.message?=?'changed'

//?DOM?還沒有更新

this.$nextTick(function?()?{

//?DOM?現(xiàn)在更新了

//?`this`?綁定到當(dāng)前實(shí)例

this.doSomethingElse()

})

}

}

})

3-4、vm.$destroy()

完全銷毀一個(gè)實(shí)例。清理它與其它實(shí)例的連接，解綁它的全部指令及事件監(jiān)聽器。 ?觸發(fā) beforeDestroy 和 destroyed 的鉤子。

注意：在大多數(shù)場景中你不應(yīng)該調(diào)用這個(gè)方法。最好使用 v-if 和 v-for 指令以數(shù)據(jù)驅(qū)動的方式控制子組件的生命周期。

總結(jié)

以上是生活随笔為你收集整理的callback用法 js vue_Vue.js 实例方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。