五分鐘帶你快速了解vue的常用實(shí)例方法
前言
在了解vue的常用的實(shí)例方法之前，我們應(yīng)該先要了解其常用的實(shí)例屬性，你能了解到的vue實(shí)例屬性有哪些呢？小編在這里就列舉了幾個(gè)常用的vue實(shí)例的屬性。大家可以一起參考學(xué)習(xí)一下。
- 獲取掛載的元素 --vm.$el
- 獲取實(shí)例的初始化選項(xiàng)的對(duì)象 --vm.$options
- 獲取觀察的數(shù)據(jù)對(duì)象 --vm.$data
- 一對(duì)象，可持有的注冊(cè)過ref屬性的所有DOM元素和組件實(shí)例
一、vue實(shí)例方法和實(shí)例數(shù)據(jù)
1、vm.$set
這個(gè)實(shí)例方法又是Vue.set方法的別稱，它的功能是新增屬性，因?yàn)関ue沒有辦法探測(cè)到普通的新增函數(shù)屬性，所以我們通過使用vm.$set這個(gè)方法可以使得vue探測(cè)到。
2、vm.$delete
這個(gè)方法又是vue,delete的方法的別名，它的功能是刪除對(duì)象的屬性，vue通過這個(gè)方法刪除屬性，可以探測(cè)到。
3、vm.$watch
這個(gè)實(shí)例方法用于觀察實(shí)例中一個(gè)表達(dá)式或者一個(gè)函數(shù)計(jì)算結(jié)果餓變化，有變化，就函數(shù)回調(diào)，回調(diào)的函數(shù)就是得到的參數(shù)為新的值和舊的值。
我們可以通過一段代碼實(shí)例了解一下這個(gè)部分：
代碼實(shí)例：
<!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>
價(jià)格：<input type="text" v-model.number="price"></br>
數(shù)量：<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>運(yùn)行結(jié)果：
每次按下“增加”按鈕的時(shí)候，就會(huì)顯示{{goods.name}}里面的“漫畫書”，當(dāng)按下“刪除”的時(shí)候{{goods.name}}就會(huì)顯示為空；當(dāng)價(jià)格和數(shù)量改變的時(shí)候，總的價(jià)格也會(huì)跟著改變。
二、實(shí)例方法和事件
1、vm.$on
這個(gè)實(shí)例方法可以用于監(jiān)聽vue實(shí)例里面的自定義事件，這些事件都是通過vm.$emit觸發(fā)的，回調(diào)函數(shù)會(huì)接收所有傳入的時(shí)間觸發(fā)函數(shù)的額外的參數(shù)。
2、vm.$emit
這個(gè)實(shí)例方法通過觸發(fā)當(dāng)前實(shí)例上的事件，其中的附加的參數(shù)都會(huì)傳給到監(jiān)聽器進(jìn)行函數(shù)回調(diào)。
3、vm.$once
這個(gè)實(shí)例方法功能是監(jiān)聽一個(gè)自定義的事件，但是只能觸發(fā)一次，一旦觸發(fā)了，監(jiān)聽器就會(huì)被溢出。
4、vm.$off
這個(gè)實(shí)例方法的功能是移除一個(gè)自定義的監(jiān)聽器。
我們通過代碼的方式了解一下：
實(shí)例代碼：
<!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>運(yùn)行結(jié)果：每次單擊“減少”按鈕的時(shí)候，數(shù)值就會(huì)減少；當(dāng)單擊“解除減少操作事件”，在點(diǎn)擊減少，數(shù)值已經(jīng)不會(huì)再改變了。
三、實(shí)例方法和生命周期
1、vm.$mount
這個(gè)實(shí)例方法功能是：如果實(shí)例在沒有收到el選項(xiàng)的時(shí)候，就會(huì)處于“沒有掛載”的狀態(tài)，因?yàn)闆]有和它關(guān)聯(lián)的DOM元素?？梢允褂眠@個(gè)mount方法進(jìn)行手動(dòng)掛載。
2、vm.$destroy
這個(gè)實(shí)例地方法主要用于完全摧毀一個(gè)實(shí)例，清除和其他實(shí)例的連接，并且解除全部指令以及事件監(jiān)聽器。
3、vm.$nextTick
這個(gè)實(shí)例方法中的回調(diào)函數(shù)延遲到DOM更新后才能執(zhí)行，但是如果在vue生命周期里面的created鉤子函數(shù)進(jìn)行的DOM事件的話，那么就要放在.nextTick的回調(diào)函數(shù)中。可以在數(shù)據(jù)變化之后立刻使用.nextTick，這樣回調(diào)函數(shù)在DOM更新完成之后就可以進(jìn)行函數(shù)調(diào)用。
我們通過代碼實(shí)例來(lái)理解：
實(shí)例代碼：
<!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>運(yùn)行結(jié)果：我們可以看到，console控制臺(tái)里面的是‘丘比特’，執(zhí)行vm.$nextTick的值是msg里面的值--‘看到你就煩’，頁(yè)面也會(huì)同步更新。當(dāng)你點(diǎn)擊‘銷毀’的時(shí)候，在文本框再寫入數(shù)值、文本等等，是已經(jīng)銷毀不會(huì)在更新了。
總結(jié)
到此這篇關(guān)于vue常用實(shí)例方法的文章就介紹到這了,更多相關(guān)vue常用實(shí)例方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue如何獲取下拉框中選中的value值和label值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密（ECB和CBC兩種模式）
這篇文章主要介紹了vue項(xiàng)目中使用AES實(shí)現(xiàn)密碼加密解密的方法，主要是通過ecb和cbc兩種模式，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue中watch和computed的區(qū)別與使用方法
這篇文章主要給大家介紹了關(guān)于vue中watch和computed的區(qū)別與使用方法的相關(guān)資料，文中通過實(shí)例代碼結(jié)束的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
詳解使用vue-admin-template的優(yōu)化歷程
這篇文章主要介紹了詳解使用vue-admin-template的優(yōu)化歷程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-05-05
這篇文章主要介紹了element-ui中按需引入的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了Vue.js輪播圖走馬燈，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Ant Design的Table組件去除“取消排序”選項(xiàng)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-10-10
Vue3 的ref和reactive的用法和區(qū)別示例解析
ref和reactive是Vue3中用來(lái)實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式的API,一般情況下,ref定義基本數(shù)據(jù)類型,reactive定義引用數(shù)據(jù)類型,本文給大家介紹Vue3 的ref和reactive的用法和區(qū)別,感興趣的朋友一起看看吧2023-10-10
前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法
最近使用vue+elementUI做項(xiàng)目,使用過程中很多地方會(huì)用到dialog這個(gè)組件,有好幾個(gè)地方用到了dialog的嵌套,這篇文章主要給大家介紹了關(guān)于前端element-ui兩層dialog嵌套遮罩層消失的問題解決辦法,需要的朋友可以參考下2024-08-08
基于Vue.js實(shí)現(xiàn)一個(gè)完整的登錄功能
在現(xiàn)代Web應(yīng)用中,用戶登錄功能是一個(gè)核心模塊,它不僅涉及到用戶身份驗(yàn)證,還需要處理表單驗(yàn)證、狀態(tài)管理、接口調(diào)用等多個(gè)環(huán)節(jié),本文將基于一個(gè)Vue.js項(xiàng)目中的登錄功能實(shí)現(xiàn),深入解析其背后的技術(shù)細(xì)節(jié),幫助開發(fā)者更好地理解和實(shí)現(xiàn)類似功能,需要的朋友可以參考下2025-02-02