Vue常用實例方法示例梳理分析

Posted on by

前言

vue實例的屬性

  • 獲取掛載的元素 –vm.$el
  • 獲取實例的初始化選項的對象 –vm.$options
  • 獲取觀察的數據對象 –vm.$data
  • 一對象，可持有的註冊過ref屬性的所有DOM元素和組件實例

vue實例方法和實例數據

1、vm.$set

這個實例方法又是Vue.set方法的別稱，它的功能是新增屬性，因為vue沒有辦法探測到普通的新增函數屬性，所以我們通過使用vm.$set這個方法可以使得vue探測到。

2、vm.$delete

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

3、vm.$watch

這個實例方法用於觀察實例中一個表達式或者一個函數計算結果餓變化，有變化，就函數回調，回調的函數就是得到的參數為新的值和舊的值。

我們可以通過一段代碼實例瞭解一下這個部分：

代碼實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button onclick="addName()">增加</button>
<button onclick="deleteName()">刪除</button>
<h3>你想要的東西：{{goods.name}}</h3>
價格：<input type="text" v-model.number="price"></br>
數量：<input type="number" v-model="count"></br>
總和：<input type="text" v-model="total"></br>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
goods:{},
price:0,
count:1,
total:0
    },
});
function addName(){
    Vue.set(vm.goods,'name','漫畫書');
};
function deleteName(){
    if(vm.goods.name){
        vm.$delete(vm.goods,'name');
    }
}
vm.$watch('price',function(newVal,oldVal){
    return this.total = newVal*this.count;
})
vm.$watch('count',function(newVal,oldVal){
    return this.total = newVal*this.price;
})
    </script>
</body>
</html>

運行結果：

每次按下“增加”按鈕的時候，就會顯示{{goods.name}}裡面的“漫畫書”，當按下“刪除”的時候{{goods.name}}就會顯示為空；當價格和數量改變的時候，總的價格也會跟著改變。

實例方法和事件

1、vm.$on

這個實例方法可以用於監聽vue實例裡面的自定義事件，這些事件都是通過vm.$emit觸發的，回調函數會接收所有傳入的時間觸發函數的額外的參數。

2、vm.$emit

這個實例方法通過觸發當前實例上的事件，其中的附加的參數都會傳給到監聽器進行函數回調。

3、vm.$once

這個實例方法功能是監聽一個自定義的事件，但是隻能觸發一次，一旦觸發瞭，監聽器就會被溢出。

4、vm.$off

這個實例方法的功能是移除一個自定義的監聽器。

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

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<button @click="zengjia">增加</button>
{{num}}
<button onclick="jianshao()">減少</button>
<button onclick="off()">解除減少操作事件</button>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    data:{
      num:100
    },
    methods:{
        zengjia:function(){
            this.num++;
        }
    }
});
vm.$on("reduce",function(step){
    vm.num =step;
});
function jianshao(){
    vm.$emit("reduce",2);
}
function off(){
    vm.$off("reduce");
}
    </script>
</body>
</html>

運行結果：每次單擊“減少”按鈕的時候，數值就會減少；當單擊“解除減少操作事件”，在點擊減少，數值已經不會再改變瞭。

實例方法和生命周期

1、vm.$mount

這個實例方法功能是：如果實例在沒有收到el選項的時候，就會處於“沒有掛載”的狀態，因為沒有和它關聯的DOM元素。可以使用這個mount方法進行手動掛載。

2、vm.$destroy

這個實例地方法主要用於完全摧毀一個實例，清除和其他實例的連接，並且解除全部指令以及事件監聽器。

3、vm.$nextTick

這個實例方法中的回調函數延遲到DOM更新後才能執行，但是如果在vue生命周期裡面的created鉤子函數進行的DOM事件的話，那麼就要放在.nextTick的回調函數中。可以在數據變化之後立刻使用.nextTick，這樣回調函數在DOM更新完成之後就可以進行函數調用。

我們通過代碼實例來理解：

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>methods</title>
</head>
<body>
    <div id="app">
<h2 ref="first">{{first}}</h2>
<h3 ref="secnd">{{second}}</h3>
<input type="text" v-model="msg">
<p>{{msg}}</p>
<button onclick="destroy()">銷毀</button>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
let vm = new Vue({
    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);
})
function destroy(){
    vm.$destroy();
}
    </script>
</body>
</html>

運行結果：我們可以看到，console控制臺裡面的是‘丘比特’，執行vm.$nextTick的值是msg裡面的值–‘看到你就煩’，頁面也會同步更新。當你點擊‘銷毀’的時候，在文本框再寫入數值、文本等等，是已經銷毀不會在更新瞭。

到此這篇關於Vue常用實例方法示例梳理分析的文章就介紹到這瞭,更多相關Vue實例方法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：