當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue基础进阶之实例方法--生命周期

發(fā)布時間：2024/4/17 vue 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue基础进阶之实例方法--生命周期小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

?在上一篇博客中我們知道生命周期的方法：

生命周期：

vm.$mount：手動掛載Vue實例；

vm.$destroy：銷毀Vue實例，清理數(shù)據(jù)綁定，移除事件監(jiān)聽；

vm.$nextTick：將方法中的回調函數(shù)，延遲到DOM更新后；

需要進行手動的掛載實例：

在vue中加入：

vm.$mount('div');

或者：

new Vue({data:{username:'perfect'}}).$mount('div');

vm.$destroy：銷毀Vue實例，清理數(shù)據(jù)綁定，移除事件監(jiān)聽；

?由圖看出，銷毀了數(shù)據(jù)的綁定

function _destroy(){vm.$destroy();}

html:

vm.$nextTick：將方法中的回調函數(shù)，延遲到DOM更新后；?

定義兩個屬性：oldName,newName

初始加載的頁面：

?vue中定義的屬性：

oldName:'AAA',newName:'BBB'

html：

oldName:<span ref='oldName'>{{oldName}}</span><br />newName:<span>{{newName}}</span>

加一句修改后的界面：

vm.oldName='ccc';

執(zhí)行下面的這一句代碼時得到的是沒有更新之前的值；

vm.newName=vm.$refs.oldName.textContent;

使用.$nextTick將oldName的屬性值賦值給newName;

以下兩種寫法代碼均可實現(xiàn)：

// vm.$nextTick(function(){ // vm.newName=vm.$refs.oldName.textContent; // // }); Vue.nextTick(function(){//全局的.$nextTickvm.newName=vm.$refs.oldName.textContent;})

實例方法--生命周期總的代碼：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title> 08_常用的實例方法-生命周期</title> 6 <script type="text/javascript" src="../js/vue.js" ></script> 7 8 </head> 9 <body> 10 <div> 11 <input type="text" v-model="username" /><br /> 12 用戶名：<span>{{username}}</span><br /> 13 <button @click="_destroy()">銷毀</button><br /> 14 15 oldName:<span ref='oldName'>{{oldName}}</span><br /> 16 newName:<span>{{newName}}</span> 17 18 19 </div> 20 </body> 21 22 <script> 23 24 25 // let vm= new Vue({ 26 // //el:'div', 27 // data:{ 28 // 29 // username:'perfect' 30 // 31 // 32 // } 33 // 34 // }); 35 36 // vm.$mount('div'); 37 let vm= new Vue({ 38 data:{ 39 username:'perfect', 40 oldName:'AAA', 41 newName:'BBB' 42 } 43 }).$mount('div'); 44 45 vm.oldName='ccc'; 46 47 // vm.newName=vm.$refs.oldName.textContent; 48 49 // vm.$nextTick(function(){ 50 // vm.newName=vm.$refs.oldName.textContent; 51 // 52 // }); 53 54 Vue.nextTick(function(){//全局的.$nextTick 55 vm.newName=vm.$refs.oldName.textContent; 56 }) 57 function _destroy(){ 58 vm.$destroy(); 59 60 61 62 } 63 64 65 </script> 66 </html> 實例方法--生命周期

轉載于:https://www.cnblogs.com/jiguiyan/p/10725427.html

總結

以上是生活随笔為你收集整理的Vue基础进阶之实例方法--生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。

vue

Vue基础进阶 之 实例方法--生命周期

總結

Vue基础进阶之实例方法--生命周期