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.读取客户程序发送的 ...
随机推荐
- python if,for,while
# -*- coding:utf-8 -*- # 第四章 if for while #布尔逻辑 print True == False print True and False print True ...
- Hibernate HQL一对多 在一方的查询
首先说一句:是版本的问题! 在多对多或者多对一,从一中查找多中查询某些语句时容易出现 我写的hql为: from Department as d where d.employees.name='Tom ...
- VC++每个版本对应的库
msvcp.msvcr60.71和80.dll,以及vcomp.dll(不带数字版本号)属于VC++2005版 msvcp.msvcr.vcomp90.dll属于 VC++2008版 msvcp.ms ...
- JBPM工作流(一)——实现一个简单的工作流例子
一.JBPM定义 JBPM,全称是Java Business Process Management(业务流程管理),它是覆盖了业务流程管理.工作流.服务协作等领域的一个开源的.灵活的.易扩展的可执行流 ...
- date格式互转
+"%Y/%m/%d-%H:%M:%S" date -d "2017/11/21 17:02:09" +%s
- background-color:transparent
background-color没有none值 在工作中发现, 这样是没反应的, 要写这个样式才能去掉背景颜色() background-color属性详细链接: http://www.w3sch ...
- 做一个vue的todolist列表
<template> <div id="app"> <input type="text" v-model="todo&q ...
- Codeforces 1099 - A/B/C/D/E/F - (Done)
链接:https://codeforces.com/contest/1099 A - Snowball - [模拟水题] 题意:有一个雪球从山顶滚落,山坡上有两块石头,每秒钟会一次发生三件事:1.雪球 ...
- Codeforces 1089K - King Kog's Reception - [线段树][2018-2019 ICPC, NEERC, Northern Eurasia Finals Problem K]
题目链接:https://codeforces.com/contest/1089/problem/K time limit per test: 2 seconds memory limit per t ...
- JavaScript面向对象之get和set设置读写属性
之前我们通过this和prototype申明的属性都是可读写的属性,如果想实现单独控制,就必须使用get和set存取期. 基本方法的 步骤一般包含两个步骤,1,使用var关键字定义一个私有属性作为中间 ...