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

生命周期：

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. Cookiecutter: 更好的项目模板工具：（1）简介及可用资源汇总

    原文档地址:https://cookiecutter.readthedocs.io/en/latest/ 本系列只介绍cookiecutter的基础使用,而且会删除与功能使用无关的部分.深度使用及了解 ...

  2. 禅道迁移(windows_to_linux)

    需求分析 随着禅道数据的增加,原来通过虚拟机提供的mysql服务器相应速度跟不上需求.且原来禅道的前端与数据库分离安装在windows与linux中,现在提供实体服务器,需要将禅道环境迁移. 确认环境 ...

  3. Excel带条件求和——SUMIF函数

    老婆求帮忙,问Excel中怎么跨Sheet带条件求和,就是关于sheet2中筛选出来的数据自动合计在sheet3中 . 比如有个sheet2表中的数据如下: 现在要在sheet3中求合计, 通过分析可 ...

  4. 宣布推出针对 Microsoft OneDrive 和 SharePoint 的 Autodesk AutoCAD 新集成

    在 OneDrive 和 SharePoint,我们的愿景是随时随地为你的团队提供简单而安全的文件访问.无论你的职位.专业或行业是什么,我们将始终致力于扩展和连接你最重视的内容.今天,我们发布了与 A ...

  5. Namespace declaration statement has to be the very first statement in the script-去除bom头

    今天准备测试小程序的签名加密,但是刚引入官方的“加密数据解密算法”文件到项目里,然后为每个文件添加命名空间的时候,不管怎么加都报“Namespace declaration statement has ...

  6. C++中获取汉字拼音首字缩写/全拼及生僻字的处理

    最近一直在修改关于搜索不到生僻字的问题,最后得出结论:对生僻字的处理,办法只有一个,建立一个字库,然后查表找. 可以参考一下:http://download.csdn.net/detail/lshlw ...

  7. 转CB大佬的几个有用的MySQL知识

    1.find_in_set函数 find_in_set(str,strlist); str是一个字符串 strlist是字符串列表--一个有多个子链被“,”分开的字符串 有多种情况: a.str为nu ...

  8. JS常用各种正则表达式（汇总）

    匹配URL 这个url的正则表达式判断的JavaScript!比较全面的.它验证的情况包括IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!用户名等等信息, function ...

  9. ArcGIS API for JavaScript经典例子

    地址为本地 1.绘制图形: http://localhost/arcgis_js_api/sdk/sandbox/sandbox.html?sample=toolbar_draw 2.双击编辑图形 h ...

  10. Git服务器配置和基本使用

    #git服务器搭建 1. 在系统中增加git用户 useradd -s /usr/bin/git-shell git 2. 在git用户的home目录下新建.ssh目录,做好相关配置 1)生成公私匙: ...