Vue.js 實例方法

時間 2020-07-08

標籤 vue.js vue 實例方法欄目 JavaScript 简体版

原文原文鏈接

Vue 實例方法
css

實例屬性html

一、組件樹訪問vue

1-一、vm.$parent數組

用來訪問當前組件實例的父實例，若是當前實例有的話服務器

1-二、vm.$rootapp

當前組件樹的根 Vue 實例。若是當前實例沒有父實例，此實例將會是其自已ide

1-三、vm.$children函數

類型：Array<Vue instance>post

當前實例的直接子組件。須要注意 $children 並不保證順序，也不是響應式的。若是你發現本身正在嘗試使用 $children 來進行數據綁定，考慮使用一個數組配合 v-for 來生成子組件，而且使用 Array 做爲真正的來源。this

1-四、vm.$refs

類型：Object

一個對象，其中包含了全部擁有 ref 註冊的子組件。

代碼示例以下：

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

1-五、vm.$slots

類型：Object

用來訪問被 slot 分發的內容。每一個具名 slot 有其相應的屬性（例如：slot="foo" 中的內容將會在 vm.$slots.foo 中被找到）。default 屬性包括了全部沒有被包含在一個具名 slot 中的節點。

在使用 render 函數書寫一個組件時，訪問 vm.$slots 最有幫助。

HTML：

<blog-post>
    <h1 slot="header">
        About Me
    </h1>
    <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-六、vm.$isServer

類型：boolean

當前 Vue 實例是否運行於服務器。

二、DOM訪問

2-一、vm.$el

類型：HTMLElement

用來訪問掛載當前組件實例的 DOM 元素

2-二、vm.$els

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

v-el 用法：爲DOM元素註冊一個索引，方便經過所屬實例的$els 訪問這個元素。能夠用 v-el:some-el 設置 this.$els.someEl

代碼示例以下：

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

<script src="//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獲取相應的DOM元素
                console.log(this.$els.msg.textContent);
            },
            showOther:function(){
                console.log(this.$els.otherMsg.textContent);
            }
        }
    });
</script>

三、數據訪問

3-一、vm.$data

用來訪問組件實例觀察的數據對象，該對象引用組件實例化時選項中的data屬性

3-二、vm.$options

用於當前 Vue 實例的初始化選項。須要在選項中包含自定義屬性時會有用處：

new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) // -> 'foo'
}
})

實例方法

一、數據

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

參數：expOrFn --> 一個字符串或者函數

callback --> 函數

[options] --> 對象

deep --> 布爾值

immediate --> 布爾值

返回值：unwatch --> 函數

用法：

觀察 Vue 實例變化的一個表達式或計算屬性函數。回調函數獲得的參數爲新值和舊值。表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代。

注意：在變異（不是替換）對象或數組時，舊值將與新值相同，由於它們的引用指向同一個對象/數組。Vue 不會保留變異以前值的副本。

代碼示例以下：

// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
    // 作點什麼
})
// 函數
vm.$watch(
        function () {
            return this.a + this.b
        },
        function (newVal, oldVal) {
            // 作點什麼
        }
)

vm.$watch 返回一個取消觀察函數，用來中止觸發回調：

var unwatch = vm.$watch('a', cb)
// 以後取消觀察
unwatch()

選項：deep

爲了發現對象內部值的變化，能夠在選項參數中指定 deep: true 。注意監聽數組的變更不須要這麼作。

vm.$watch('someObject', callback, {
    deep: true
})
vm.someObject.nestedValue = 123
// callback is fired

選項：immediate

在選項參數中指定 immediate: true 將當即以表達式的當前值觸發回調：

vm.$watch('a', callback, {
    immediate: true
})
// 當即以 `a` 的當前值觸發回調

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

這是全局 Vue.set 的別名

參數：{Object} object

{string} key

{any} value

返回值：設置的值

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

這是全局 Vue.delete 的別名

參數：{Object} object

{string} key

二、事件

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

參數：{String} event

{Function} callback

用法：監聽當前實例上的自定義事件。事件能夠由vm.$emit觸發。回調函數會接收全部傳入事件觸發函數的額外參數。

示例：

vm.$on('test', function (msg) {
    console.log(msg)
})
vm.$emit('test', 'hi')
// -> "hi"

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

參數：{String} event

{Function} callback

用法：監聽一個自定義事件，可是隻觸發一次，在第一次觸發之移除除監聽器。

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

參數：{String} event

{Function} callback

用法：移除事件監聽器。

（1）、若是沒有提供參數，則移除全部的事件監聽器；

（2）、若是隻提供了事件，則移除該事件全部的監聽器；

（3）、若是同時提供了事件與回調，則只移除這個回調的監聽器。

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

參數：{String} event

[...args]

用法：觸發當前實例上的事件。附加參數都會傳給監聽器回調。

三、生命週期

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

參數：

{Element | string} [elementOrSelector]

{boolean} [hydrating]

返回值：vm - 實例自身

用法：

若是 Vue 實例在實例化時沒有收到 el 選項，則它處於「未掛載」狀態，沒有關聯的 DOM 元素。可使用 vm.$mount() 手動地掛載一個未掛載的實例。

若是沒有提供 elementOrSelector 參數，模板將被渲染爲文檔以外的的元素，而且你必須使用原生DOM API把它插入文檔中。

這個方法返回實例自身，於是能夠鏈式調用其它實例方法。

var MyComponent = Vue.extend({
    template: '<div>Hello!</div>'
})
// 建立並掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
// 同上
new MyComponent({ el: '#app' })
// 或者，在文檔以外渲染而且隨後掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

3-二、vm.$forceUpdate()

迫使Vue實例從新渲染。注意它僅僅影響實例自己和插入插槽內容的子組件，而不是全部子組件。

3-三、vm.$nextTick( callback )

參數：{Function} callback

用法：

將回調延遲到下次 DOM 更新循環以後執行。在修改數據以後當即使用它，而後等待 DOM 更新。它跟全局方法 Vue.nextTick 同樣，不一樣的是回調的 this 自動綁定到調用它的實例上。

示例代碼以下：

new Vue({
    // ...
    methods: {
        // ...
        example: function () {
            // 修改數據
            this.message = 'changed'
            // DOM 尚未更新
            this.$nextTick(function () {
                // DOM 如今更新了
                // `this` 綁定到當前實例
                this.doSomethingElse()
            })
        }
    }
})

3-四、vm.$destroy()

徹底銷燬一個實例。清理它與其它實例的鏈接，解綁它的所有指令及事件監聽器。觸發 beforeDestroy 和 destroyed 的鉤子。

注意：在大多數場景中你不該該調用這個方法。最好使用 v-if 和 v-for 指令以數據驅動的方式控制子組件的生命週期。