Vue基础进阶 之 实例方法--生命周期
在上一篇博客中我们知道生命周期的方法:
生命周期:
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基础进阶 之 实例方法--生命周期的更多相关文章
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- Vue基础进阶 之 实例方法
常用的实例方法: 数据: vm.$set:设置属性值: vm.$delete:删除属性值: vm.$watch:观测数据变化: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destr ...
- [前端] VUE基础 (5) (过滤器、生命周期、钩子函数)
一.过滤器 过滤器分为局部过滤器和全局过滤器. 1.局部过滤器 <body> <div id="app"> </div> <script ...
- Vue 实例详解与生命周期
Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...
- Vue基础进阶 之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...
- Vue入门系列(五)Vue实例详解与生命周期
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
- 2000条你应知的WPF小姿势 基础篇<22-27 WPF生命周期, 基础类等>
端午长假在家陪着女朋友, 幸福感满满,生活对于一只饱经忧患的程序猿来说也是非常重要的,也就暂时没有更新博客.休假结束,回归奋斗的日子了,开始继续更新WPF系列. 在正文开始之前需要介绍一个人:Sean ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- servlet基础(组成与生命周期)
servlet基础作用:servlet是运行在Web服务器或应用服务器上的程序:担当web浏览器或其他HTTP客户程序发出的请求与HTTP服务器上的数据库或应用程序之间的中间层.1.读取客户程序发送的 ...
随机推荐
- js如何获取字符串第几次出现的位置
str:查询字符串: cha:查询子字符串: num:第几次出现:第一次则为 1: function findStrIndex(str, cha, num-1) { var x = str.index ...
- 6.1 Pandora 实操 - 数据收集
添加机器 添加机器命令,在 linux 机器上执行此命令 添加成功 添加收集器 采集机器数据 解析数据 转换数据 发送数据 接着,下一步即,成功创建收集任务. 分发机器 确认收集人物,绑定到机器上. ...
- 给table加边框的样式
<style> .tb { width: 1600px; text-align: center; border-collapse: collapse; } .tb tr td { bord ...
- Spark SQL 之 Join 实现
原文地址:Spark SQL 之 Join 实现 Spark SQL 之 Join 实现 涂小刚 2017-07-19 217标签: spark , 数据库 Join作为SQL中一个重要语法特性,几乎 ...
- Python学习之旅(十一)
Python基础知识(10):函数(Ⅱ) 一.全局变量和局部变量 局部变量:在函数内定义的变量,在函数内使用 全局变量:在函数外定义的变量,在程序任何地方都可以使用 1.全局变量与局部变量同名 这时函 ...
- python全栈开发 * 35 知识点汇总 * 180720
35 socket 一些常用方法 验证客户端信息 添加随机字符串 socketserver模块 一.socket模块中一些常用方法1.send和sendall的区别2.conn.getpeername ...
- ArcPy中mapping常见函数及用法1
arcpy的mapping模块常见属性方法总结1.如何获取当前地图文档: 方式:mxd = mapping.MapDocument("CURRTENT")引用本地或者网络文档(ar ...
- Codeforces 1062 - A/B/C/D/E - (Undone)
链接:http://codeforces.com/contest/1062 A - Prank - [二分] 题意: 给出长度为 $n(1 \le n \le 100)$ 的数组 $a[1 \sim ...
- ios安装ipa与安卓安装apk
ideviceinstaller -i .ipa包所在的路径 环境搭建:Mac上安装brew(brew里面有很多命令,可以安装自己想用的命令) 安装命令如下:curl -LsSf http://git ...
- redis3.0.3集群搭建
redis3.0版本之后支持Cluster,具体介绍redis集群我就不多说,了解请看redis中文简介. 首先,直接访问redis.io官网,下载redis.tar.gz,现在版本3.0.3,我下面 ...