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

生命周期:

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. js如何获取字符串第几次出现的位置

    str:查询字符串: cha:查询子字符串: num:第几次出现:第一次则为 1: function findStrIndex(str, cha, num-1) { var x = str.index ...

  2. 6.1 Pandora 实操 - 数据收集

    添加机器 添加机器命令,在 linux 机器上执行此命令 添加成功 添加收集器 采集机器数据 解析数据 转换数据 发送数据 接着,下一步即,成功创建收集任务. 分发机器 确认收集人物,绑定到机器上. ...

  3. 给table加边框的样式

    <style> .tb { width: 1600px; text-align: center; border-collapse: collapse; } .tb tr td { bord ...

  4. Spark SQL 之 Join 实现

    原文地址:Spark SQL 之 Join 实现 Spark SQL 之 Join 实现 涂小刚 2017-07-19 217标签: spark , 数据库 Join作为SQL中一个重要语法特性,几乎 ...

  5. Python学习之旅(十一)

    Python基础知识(10):函数(Ⅱ) 一.全局变量和局部变量 局部变量:在函数内定义的变量,在函数内使用 全局变量:在函数外定义的变量,在程序任何地方都可以使用 1.全局变量与局部变量同名 这时函 ...

  6. python全栈开发 * 35 知识点汇总 * 180720

    35 socket 一些常用方法 验证客户端信息 添加随机字符串 socketserver模块 一.socket模块中一些常用方法1.send和sendall的区别2.conn.getpeername ...

  7. ArcPy中mapping常见函数及用法1

    arcpy的mapping模块常见属性方法总结1.如何获取当前地图文档: 方式:mxd = mapping.MapDocument("CURRTENT")引用本地或者网络文档(ar ...

  8. Codeforces 1062 - A/B/C/D/E - (Undone)

    链接:http://codeforces.com/contest/1062 A - Prank - [二分] 题意: 给出长度为 $n(1 \le n \le 100)$ 的数组 $a[1 \sim ...

  9. ios安装ipa与安卓安装apk

    ideviceinstaller -i .ipa包所在的路径 环境搭建:Mac上安装brew(brew里面有很多命令,可以安装自己想用的命令) 安装命令如下:curl -LsSf http://git ...

  10. redis3.0.3集群搭建

    redis3.0版本之后支持Cluster,具体介绍redis集群我就不多说,了解请看redis中文简介. 首先,直接访问redis.io官网,下载redis.tar.gz,现在版本3.0.3,我下面 ...