callback用法 js vue_Vue.js 实例方法
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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python一行行写文件_python一
- 下一篇: vue函数如何调用其他函数?_好程序员P