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

生命周期：

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. 转载：sigmoid和softmax总结

    转自:http://blog.csdn.net/u014422406/article/details/52805924 sigmoid函数(也叫逻辑斯谛函数): 引用wiki百科的定义: A logi ...

  2. win10 安装mysql

    现在mysql压缩包:https://downloads.mysql.com/archives/community/ 在目录下新建data文件夹,my.ini文件,内容如下: [mysqld] bas ...

  3. PHP异常处理、错误捕获和自动加载的一些总结

    <?php // 设置顶层异常处理器 set_exception_handler('exceptionHandler'); function exceptionHandler($e) { ech ...

  4. vue2 在mounted函数无法获取prop中的变量的解决方法

    props: { example: { type: Object, default() { }, }, }, watch: { example: function(newVal,oldVal){ // ...

  5. ArcGIS AddIN开发之 设置当前工具为Edit Tool

    在GIS数据处理中,经常需要选择要素,再进行操作.所以,为了处理的方便,可以将当前工具处理结束后,将当前工具设置为Edit Tool,以方便下一次的选择处理. 相关资料: 1.ArcMap Name ...

  6. dubbo控制器xml文件报错

    在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: Multiple annotations found at th ...

  7. Java 批量下载excel，并对excel赋值，压缩为zip文件（POI版）

    package com.neusoft.nda.servlet; import java.io.File;import java.io.FileInputStream;import java.io.F ...

  8. python全栈开发* 02 知识点汇总 * 180531

    运算符和编码 一  格式化输出 1  .输入  name ,age , job , hobby. 输出  :   ---------------  info of Mary  ------------ ...

  9. HTML、CSS知识点,面试开发都会需要--No.7 数据列表

    No.7 数据列表 1.无序列表Unordered List 无序列表用block-level元素ul(unordered list)表示,每个item单独使用li(list)标记.如下代码所示: & ...

  10. 【WordCount】实现(重做)

    Gitee项目地址: https://gitee.com/LIUJIA6/wordcount_implementation 需求说明: WordCount的需求可以概括为:对程序设计语言源文件统计字符 ...