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

生命周期：

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. Python实现代码统计工具——终极加速篇

    Python实现代码统计工具--终极加速篇 声明 本文对于先前系列文章中实现的C/Python代码统计工具(CPLineCounter),通过C扩展接口重写核心算法加以优化,并与网上常见的统计工具做对 ...

  2. 【nginx】解决Nginx重启时提示nginx: [emerg] bind() to 0.0.0.0:80错误

    Nginx是一款轻量级的Web服务器,特点是占有内存少,并发能力强,因而使用比较广泛,蜗牛今天在一个VPS上重启Nginx时提示“nginx: [emerg] bind() to 0.0.0.0:80 ...

  3. C# 网络爬虫利器之Html Agility Pack如何快速实现解析Html

    简介 现在越来越多的场景需要我们使用网络爬虫,抓取相关数据便于我们使用,今天我们要讲的主角Html Agility Pack是在爬取的过程当中,能够高效的解析我们抓取到的html数据. 优势 在.NE ...

  4. maven 中的mirror详解

    一.前言 今天同事遇到个问题,本来公司是有maven私服的,但同事觉得上面有些东西下载不到,于是在自己本地的maven配置中加了: <mirrors> <mirror> < ...

  5. centos7上修改lv逻辑卷的大小

    author:headsen  chen date: 2019-03-18 15:24:22 1,查看 [root@localhost mnt]# df -h Filesystem Size Used ...

  6. 进程池的同步与异步用法Pool

    进程池的同步,如下程序: from multiprocessing import Pool import time import os def func(n): print('start 进程 %s' ...

  7. mybatis02--增删改查

    1.修改StudentDao public interface StudentDao { /** * 新增学生信息 */ void addStudent(Student student); // 新增 ...

  8. 27.用webpack自搭react和vue框架

    自己搭建react-app vue-cli 前置条件 cnpm i -D webpack webpack-cli webpack-dev-server cnpm i -D css-loader sty ...

  9. 教你如何用笔记本设置超快WIFI

    以win7为例 1.在主菜单运行框输入  cmd------->以管理员的身份运行 2.命令提示符中输入:netsh wlan set hostednetwork mode=allow ssid ...

  10. [ERROR] Terminal initialization failed; falling back to unsupported

    Logging initialized using configuration in jar:file:/usr/local/hive/lib/hive-common-1.2.2.jar!/hive- ...