Vue常用實例方法示例梳理分析
前言
vue實例的屬性
- 獲取掛載的元素 --vm.$el
- 獲取實例的初始化選項的對象 --vm.$options
- 獲取觀察的數(shù)據(jù)對象 --vm.$data
- 一對象，可持有的注冊過ref屬性的所有DOM元素和組件實例
vue實例方法和實例數(shù)據(jù)
1、vm.$set
這個實例方法又是Vue.set方法的別稱，它的功能是新增屬性，因為vue沒有辦法探測到普通的新增函數(shù)屬性，所以我們通過使用vm.$set這個方法可以使得vue探測到。
2、vm.$delete
這個方法又是vue,delete的方法的別名，它的功能是刪除對象的屬性，vue通過這個方法刪除屬性，可以探測到。
3、vm.$watch
這個實例方法用于觀察實例中一個表達式或者一個函數(shù)計算結果餓變化，有變化，就函數(shù)回調(diào)，回調(diào)的函數(shù)就是得到的參數(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>
價格：<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>運行結果：
每次按下“增加”按鈕的時候，就會顯示{{goods.name}}里面的“漫畫書”，當按下“刪除”的時候{{goods.name}}就會顯示為空；當價格和數(shù)量改變的時候，總的價格也會跟著改變。
實例方法和事件
1、vm.$on
這個實例方法可以用于監(jiān)聽vue實例里面的自定義事件，這些事件都是通過vm.$emit觸發(fā)的，回調(diào)函數(shù)會接收所有傳入的時間觸發(fā)函數(shù)的額外的參數(shù)。
2、vm.$emit
這個實例方法通過觸發(fā)當前實例上的事件，其中的附加的參數(shù)都會傳給到監(jiān)聽器進行函數(shù)回調(diào)。
3、vm.$once
這個實例方法功能是監(jiān)聽一個自定義的事件，但是只能觸發(fā)一次，一旦觸發(fā)了，監(jiān)聽器就會被溢出。
4、vm.$off
這個實例方法的功能是移除一個自定義的監(jiān)聽器。
我們通過代碼的方式了解一下：
實例代碼：
<!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>運行結果：每次單擊“減少”按鈕的時候，數(shù)值就會減少；當單擊“解除減少操作事件”，在點擊減少，數(shù)值已經(jīng)不會再改變了。
實例方法和生命周期
1、vm.$mount
這個實例方法功能是：如果實例在沒有收到el選項的時候，就會處于“沒有掛載”的狀態(tài)，因為沒有和它關聯(lián)的DOM元素?？梢允褂眠@個mount方法進行手動掛載。
2、vm.$destroy
這個實例地方法主要用于完全摧毀一個實例，清除和其他實例的連接，并且解除全部指令以及事件監(jiān)聽器。
3、vm.$nextTick
這個實例方法中的回調(diào)函數(shù)延遲到DOM更新后才能執(zhí)行，但是如果在vue生命周期里面的created鉤子函數(shù)進行的DOM事件的話，那么就要放在.nextTick的回調(diào)函數(shù)中?？梢栽跀?shù)據(jù)變化之后立刻使用.nextTick，這樣回調(diào)函數(shù)在DOM更新完成之后就可以進行函數(shù)調(diào)用。
我們通過代碼實例來理解：
實例代碼：
<!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控制臺里面的是‘丘比特’，執(zhí)行vm.$nextTick的值是msg里面的值--‘看到你就煩’，頁面也會同步更新。當你點擊‘銷毀’的時候，在文本框再寫入數(shù)值、文本等等，是已經(jīng)銷毀不會在更新了。
到此這篇關于Vue常用實例方法示例梳理分析的文章就介紹到這了,更多相關Vue實例方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了vue中ref引用操作DOM元素的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-01-01
vue.js模仿京東省市區(qū)三級聯(lián)動的選擇組件實例代碼
選擇省市區(qū)是我們大家在填寫地址的時候經(jīng)常會遇到的一個功能，下面這篇文章主要給大家介紹了關于利用vue.js模仿實現(xiàn)京東省市區(qū)三級聯(lián)動選擇組件的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-11-11
平時業(yè)務開發(fā)中用el-upload能滿足大部分場景，但是對于一些大文件的上傳時會比較慢，所以自己基于el-upload封裝了一個切片上傳組件，希望對大家有所幫助2023-03-03
本文主要介紹了Vue?3.0中的setup函數(shù),包括其概述、使用場景和具體用法,通過本文的介紹,我們可以看到,setup函數(shù)是用來將組件的狀態(tài)和行為進行分離的一個重要工具,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個參數(shù)詳細說明及vue3 h函數(shù)-綁定事件，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue移動端屏幕適配，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue之子組件如何修改父組件的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue extend的基本用法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要介紹了Vue中使用keepAlive不緩存問題，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
vue2利用html2canvas+jspdf動態(tài)生成多頁PDF方式
利用vue2結合html2canvas和jspdf,可以實現(xiàn)前端頁面內(nèi)容導出為PDF的功能,首先需要安裝相關依賴,使用html2canvas將指定div內(nèi)容捕捉為圖像,再通過jspdf將圖像轉(zhuǎn)換為PDF2024-09-09