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

生命周期：

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. 【Zookeeper系列】zookeeper面试题（转）

    原文链接:https://segmentfault.com/a/1190000014479433 1.ZooKeeper是什么? ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是 ...

  2. gym 101657 D

    理论1A.  //没删debug的文件读入.. 傻逼题. 先求出来每条边两侧的三角形,然后枚举边,根据叉积判断三角形位置,建图,拓扑排序. #include <bits/stdc++.h> ...

  3. Oracle 创建表 Create Table...

    一.创建表 主键约束primary key 约束条件,唯一且非空,一个表中只能有一个主键:有多个字段联合作为主键时,合在一起唯一标识记录,叫做联合主键. 外键约束 foreign key 受另外一张表 ...

  4. MUI学习01-顶部导航栏

    建议:先看一下MUI注意事项 连接:http://ask.dcloud.net.cn/article/122 固定栏靠前 所谓的固定栏,也就是带有.mui-bar属性的节点,都是基于fixed定位的元 ...

  5. 查看Sql Server 数据库的内存使用情况

    -- 查询SqlServer总体的内存使用情况 select type , sum(virtual_memory_reserved_kb) VM_Reserved , sum(virtual_memo ...

  6. windows 控制台下运行cl命令

    前提:确保已经安装vc6或者vs系列 我们可以再命令行直接编译c++程序, 在windows操作系统中,打开命令行,输入cl,若系统提示:'cl' 不是内部或外部命令,也不是可运行的程序或批处理文件. ...

  7. bootstrap 中关于 HTML5 aria-* and role的用法

    HTML5 aria-* and role 在bootstrap中看到role和aria-*,不知道干嘛的.google一下,发现aria的意思是Accessible Rich Internet Ap ...

  8. container_of 例子说明

    很早前之前看的linux内核,一直想把container_of记录一下,趁今天想起就记录一下: 内核中的描述 /** * container_of - cast a member of a struc ...

  9. 对Java代码加密的两种方式，防止反编译

    使用Virbox Protector对Java项目加密有两种方式,一种是对War包加密,一种是对Jar包加密.Virbox Protector支持这两种文件格式加密,可以加密用于解析class文件的j ...

  10. python基础之 初识函数&函数进阶

    函数基础部分 1.什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段.函数能提高应用的模块性,和代码的重复利用率. 2.定义函数 定义:def 关键词开头,空格之后接函数名 ...