vue-vue实例方法(生命周期)

一、vue实例方法分类

vue实例方法可以分类：数据、事件、生命周期。

分类 vue实例方法名称 方法用户 备注说明
数据 vm.$set(object,key,value)  为对象object添加属性key，并指定属性值value  
vm.$delete(object,key)  删除对象的属性key  
vm.$watch(data,callback[,options])  侦听的数据data，回调函数，可选项  
事件 vm.$on(event,callback)    
vm.$once(event,callback)    
vm.$off([event,callback])    
vm.$emit(eventName,[...args])    
生命周期 vm.$mount([elementOrSelector])  手动挂载vue实例。  
vm.$forceUpdate()  迫使 Vue 实例重新渲染。  
vm.$nextTick([callback])  将回调延迟到下次 DOM 更新循环之后执行。  v2.0新增
vm.$destory()  销毁vue实例。  

 

二、vue实例方法(生命周期)

1、vm.$amount() 手动挂载元素。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue实例方法</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 
10 <body>
11   <div id="hello">
12     <h1>{{msg}}</h1>
13   </div>
14   <script>
15     //手动挂载的写法1
16     let vm = new Vue({
17         //el:'#hello',  //去掉自动挂载元素
18         data:{  
19           msg:'欢迎来到王者荣耀',
20           flag:true,
21         },
22       });
23     //vue实例方法
24     //vm.$mount() 手动挂载vue实例
25     vm.$mount('#hello'); //手动挂载到#hello
26 
27     //手动挂载的写法2
28     new Vue({
29         //el:'#hello',  //去掉自动挂载元素
30         data:{  
31           msg:'欢迎来到王者荣耀',
32           flag:true,
33         },
34       }).$mount('#hello');
35 
36   </script>
37 </body>
38 </html>

 

2、vm.$forceUpdate() 

 

3、vm.$nextTick()  将回调延迟到下次 DOM 更新循环之后执行。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue实例方法(生命周期)</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 
10 <body>
11   <div id="hello">
12     <h1>{{msg}}</h1>
13     <h2 ref='name'>米多的大名：{{name}}</h2>
14   </div>
15   <script>
16     //手动挂载的写法1
17     let vm = new Vue({
18         el:'#hello',  //去掉自动挂载元素
19         data:{  
20           msg:'欢迎来到王者荣耀',
21           name:'王舒苒'
22         },
23       });
24 
25     //vue实例方法(生命周期)
26 
27     //vm.$mount() 手动挂载vue实例
28     vm.$mount('#hello'); //手动挂载到#hello
29 
30     //手动挂载的写法2
31     // new Vue({
32     //     //el:'#hello',  //去掉自动挂载元素
33     //     data:{  
34     //       msg:'欢迎来到王者荣耀',
35     //       flag:true,
36     //     },
37     //   }).$mount('#hello');
38 
39     //vm.$destroy() 销毁vm实例
40     //vm.$destroy();
41 
42     //vm.$nextTick() 在DOM更新完成后再执行回调函数，一般在修改数据之后使用此方法，以便及时获取更新后的DOM
43     //修改数据
44     vm.name='赵小米';
45 
46     //输出页面显示的内容。DOM还没更新完，vue实现响应式并不是数据发生改变之后DOM立即变化，需要按照一定的策略进行DOM更新，需要时间。
47     console.log('等待DOM更新:',vm.$refs.name.textContent)
48 
49     //将回调等待DOM更新完之后执行
50     vm.$nextTick(function(){
51       //DOM更新完成后再执行此代码
52       console.log('DOM更新后执行:',vm.$refs.name.textContent);
53     })
54 
55   </script>
56 </body>
57 </html>

 

4、vm.$destroy() 销毁vue实例。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>vue实例方法</title>
 6   <!--引入vue-->
 7   <script src="../js/vue.js"></script>
 8 </head>
 9 
10 <body>
11   <div id="hello">
12     <h1>{{msg}}</h1>
13   </div>
14   <script>
15     let vm = new Vue({
16         el:'#hello',  //去掉自动挂载元素
17         data:{  
18           msg:'欢迎来到王者荣耀',
19           flag:true,
20         },
21       });
22 
23     //vue实例方法
24     //vm.$destroy() 销毁vm实例
25     vm.$destroy();
26 
27   </script>
28 </body>
29 </html>

 

posted @ 2021-08-27 09:56  AnnLing  阅读(239)  评论(0)    收藏  举报