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

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

生命周期：

vm.$mount：手动挂载Vue实例；

vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；

vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；

需要进行手动的挂载实例：

在vue中加入：

vm.$mount('div');

或者：

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

vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听；

由图看出，销毁了数据的绑定

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

html:

<button @click="_destroy()">销毁</button>

vm.$nextTick：将方法中的回调函数，延迟到DOM更新后；

定义两个属性：oldName,newName

初始加载的页面：

vue中定义的属性：

oldName:'AAA',newName:'BBB'

html：

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

加一句修改后的界面：

vm.oldName='ccc';

执行下面的这一句代码时得到的是没有更新之前的值；

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

使用.$nextTick将oldName的属性值赋值给newName;

以下两种写法代码均可实现：

//      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基础进阶之实例方法--生命周期相关推荐

Vue 进阶系列丨生命周期
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
Vue 进阶语法和生命周期
文章目录 Vue 进阶语法和生命周期 16.Vue:生命周期[了解] 17.Vue:computed计算属性 18.Vue:watch监控属性 Vue 进阶语法和生命周期 a. 每个 Vue 应用都是 ...
vue实例、指令、生命周期
vue实例.指令.生命周期本章重点 1.生命周期 2.插值 3.指令一.创建一个实例vue实例每一个vue应用都是通过vue函数创建一个新的vue实例开始的语法: ver vm = new V ...
[vue] 跟keep-alive有关的生命周期是哪些？描述下这些生命周期
[vue] 跟keep-alive有关的生命周期是哪些?描述下这些生命周期 activated和deactivatedkeep-alive的生命周期1.activated: 页面第一次进入的时候,钩子 ...
【Vue】实例对象的生命周期（方法详解）
通过前面的学习,我们知道使用Vue的时候必须创建一个Vue实例对象:var vm = new Vue({...}),那么这个Vue实例的生命周期是怎么样的呢?本文我们就来详细的介绍下. 上图是Vue官 ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
vue 监控元素宽度_Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
简单了解Vue的自定义组件与生命周期
Vue的自定义组件定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码解析(详细解释在注解 ...
vue笔记（三）生命周期、组件（嵌套）、数据传递
生命周期文档一.生命周期 1.参考一 2.参考二二.自定义组件 1. 使用:<组件名></组件名> 2. 定义组件: (1)方法一:官网 let 组件变量名 = Vue.e ...

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

Vue基础进阶之实例方法--生命周期相关推荐

最新文章

热门文章

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

Vue基础进阶 之 实例方法--生命周期相关推荐

最新文章

热门文章

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

Vue基础进阶之实例方法--生命周期相关推荐