Vue.js 實(shí)例方法

發(fā)布時(shí)間：2020-05-01 19:41:46 來源：網(wǎng)絡(luò) 閱讀：2556 作者：frwupeng517 欄目：開發(fā)技術(shù)

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í)例將會(huì)是其自已

1-3、vm.$children

類型：Array<Vue instance>

當(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è)對(duì)象，其中包含了所有擁有 ref 注冊(cè)的子組件。

代碼示例如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app">
    <input v-model="msg">
    <p>`msg`</p>
</div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello World!'
        }
    })
</script>
</body>
</html>

Vue.js 實(shí)例方法

1-5、vm.$slots

類型：Object

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

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

HTML：

<blog-post>
    <h2 slot="header">
        About Me
    </h2>
    <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>
    <p slot="footer">
        Copyright 2016 Evan You
    </p>
    <p>If I have some content down here, it will also be included in vm.$slots.default.</p>.
</blog-post>

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元素注冊(cè)一個(gè)索引，方便通過所屬實(shí)例的$els 訪問這個(gè)元素?？梢杂?v-el:some-el 設(shè)置 this.$els.someEl

代碼示例如下：

<div id="app">
    <p v-el:msg>Hello</p>
    <p v-el:other-msg>World</p>
</div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    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);
            }
        }
    });
</script>

Vue.js 實(shí)例方法

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

3-1、vm.$data

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

3-2、vm.$options

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

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] --> 對(duì)象

deep --> 布爾值

immediate --> 布爾值

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

用法：

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

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

代碼示例如下：

// 鍵路徑
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)對(duì)象內(nèi)部值的變化，可以在選項(xiàng)參數(shù)中指定 deep: true 。注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做。

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ù)會(huì)接收所有傳入事件觸發(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ù)都會(huì)傳給監(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() 手動(dòng)地掛載一個(gè)未掛載的實(shí)例。

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

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

var MyComponent = Vue.extend({
    template: '<div>Hello!</div>'
})
// 創(chuàng)建并掛載到 #app (會(huì)替換 #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 自動(dòng)綁定到調(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ù)場(chǎng)景中你不應(yīng)該調(diào)用這個(gè)方法。最好使用 v-if 和 v-for 指令以數(shù)據(jù)驅(qū)動(dòng)的方式控制子組件的生命周期。

向AI問一下細(xì)節(jié)

Vue.js 實(shí)例方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽