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

生命周期：

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(){//全局的.$nextTick

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

        })

实例方法--生命周期总的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title> 08_常用的实例方法-生命周期</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

     </head>

     <body>

         <div>

             <input  type="text" v-model="username" /><br />

             用户名：<span>{{username}}</span><br />

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

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

             newName:<span>{{newName}}</span>

     </div>

     </body>

     <script>

 //            let vm=    new Vue({

 //                    //el:'div',

 //                    data:{

 //

 //                            username:'perfect'

 //

 //

 //                    }

 //

 //            });

 //            vm.$mount('div');

         let vm=    new Vue({

                 data:{

                     username:'perfect',

                     oldName:'AAA',

                     newName:'BBB'

                 }

             }).$mount('div');

             vm.oldName='ccc';

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

 //      vm.$nextTick(function(){

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

 //

 //      });

         Vue.nextTick(function(){//全局的.$nextTick

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

         })

         function _destroy(){

             vm.$destroy();

         }

         </script>

 </html>

实例方法--生命周期

Vue基础进阶 之 实例方法--生命周期的更多相关文章

  1. Vue – 基础学习(1):对生命周期和钩子函的理解

    一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...

  2. Vue基础进阶 之 实例方法

    常用的实例方法: 数据: vm.$set:设置属性值: vm.$delete:删除属性值: vm.$watch:观测数据变化: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destr ...

  3. [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)

    一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...

  4. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  5. Vue基础进阶 之 Vue生命周期与钩子函数

    Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

  6. Vue入门系列（五）Vue实例详解与生命周期

    Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一)  http://www.cnblogs.com/gdsblog/p/78 ...

  7. 2000条你应知的WPF小姿势 基础篇<22-27 WPF生命周期, 基础类等>

    端午长假在家陪着女朋友, 幸福感满满,生活对于一只饱经忧患的程序猿来说也是非常重要的,也就暂时没有更新博客.休假结束,回归奋斗的日子了,开始继续更新WPF系列. 在正文开始之前需要介绍一个人:Sean ...

  8. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  9. servlet基础（组成与生命周期）

    servlet基础作用:servlet是运行在Web服务器或应用服务器上的程序:担当web浏览器或其他HTTP客户程序发出的请求与HTTP服务器上的数据库或应用程序之间的中间层.1.读取客户程序发送的 ...

随机推荐

  1. Windows下Codeblocks调试Cocos2d-x项目体验（一次失败的体验）

    很久之前的一篇文章有介绍过在Ubuntu下安装Cocos2d-x3.11并使用Codeblock调试Cocos2d-x程序:http://www.cnblogs.com/moonlightpoet/p ...

  2. 《Spring实战》学习笔记-第五章：构建Spring web应用

    之前一直在看<Spring实战>第三版,看到第五章时发现很多东西已经过时被废弃了,于是现在开始读<Spring实战>第四版了,章节安排与之前不同了,里面应用的应该是最新的技术. ...

  3. [EMSE'17] A Correlation Study between Automated Program Repair and Test-Suite Metrics

    Basic Information Authors: Jooyong Yi, Shin Hwei Tan, Sergey Mechtaev, Marcel Böhme, Abhik Roychoudh ...

  4. [Benchmark] Codeflaws: A Programming Competition Benchmark for Evaluating Automated Program Repair Tools

    Basic Information Publication: ICSE'17 Authors: Shin Hwei Tan, Jooyong Yi, Yulis, Sergey Mechtaev, A ...

  5. 深入理解 Java 虚拟机之学习笔记(3)

    垃圾回收(Garbage Collection,GC ),GC的历史其实比Java久远,1960年诞生与MIT的Lisp是第一门真正使用内存动态分配和垃圾收集技术的语言.当Lisp还在胚胎时期时,人们 ...

  6. Linux下的搜索查找命令的详解(locate)

    3.locate locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中 ...

  7. gym101808 E

    提问:我是什么品种的傻逼? 哇看到积水兴高采烈啊.然后就走上了一条不归路. 为什么不归呢,因为我这个法子就是不对的,我总是在想很多很多点围成的一块区域,然后求这一块区域的面积. 然后尝试了各种扫描方法 ...

  8. js中 变量的解构赋值

    es6新特性, 提取数组或对象中的值,按照对应位置, 为变量赋值. let [a, b, c] = [1, 2, 3]; 交换变量的值变得容易 let x = 1; let y = 2; [x, y] ...

  9. 安装 docker

    Image 仓库 配置国内镜像源 windows下载 Docker Desktop centos 安装 Docker yum install docker -y service docker star ...

  10. postgresql数据库安装及简单操作

    自从MySQL被Oracle收购以后,PostgreSQL逐渐成为开源关系型数据库的首选. 本文介绍PostgreSQL的安装和基本用法,供初次使用者上手.以下内容基于Debian操作系统,其他操作系 ...