Vue对象的生命周期
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的生命周期</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app" ref="app">
{{ name }}
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
name: "python",
},
beforeCreate() {
//这里的代码执行时,vm对象尚未创建,所有data中的属性是无法操作的
console.log("vm对象创建前：");
console.log(this.name); //此时找不到this.name
this.name = 'java'; //此时设置this对象的属性不会生效
console.log(this.$el);
console.log(this.$data);
},
created() {
//这里的代码执行时,vm对象已经创建完成,但是还没有把数据和视图模板进行绑定
//这里可以用于写从后端获取数据的代码
console.log("vm对象创建完成：");
console.log(this.$el);
console.log(this.$data);
},
beforeMount() {
//这里的代码执行时,已经绑定了视图,但是没有更新视图中的数据
console.log("挂载前：");
console.log(this.$el.innerHTML);
console.log(this.$data);
},
mounted() {
//这里的代码执行时,已经把data中的数据替换了模板中对应的内容了
//注意: 此时页面还没有显示
console.log("挂载后：");
console.log(this.$el.innerHTML);
console.log(this.$data);
},
beforeUpdate() {
//当data的中数据发生变化时,执行beforeUpdate()和updated()
//此时data中的数据还没有发生变化
console.log('更新数据前:');
let name = this.$el.innerHTML;
console.log('name:' + name);
},
updated() {
//此时data中的数据已经改变
console.log('更新数据后:');
let name = this.$el.innerHTML;
console.log('name:' + name);
},
beforeDestory() {
console.log("vm对象销毁前");
},
destoryed() {
console.log("vm对象销毁后");
}
});
</script>
</html>
Vue对象的生命周期的更多相关文章
- Javascript - Vue - vue对象的生命周期
vue对象的生命周期 从vue的创建到销毁会经过一系列的事件,这是vue对象的生命周期. 创建期间的生命周期函数 <div id="box"> <h3 id ...
- vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面
3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- Vue js 的生命周期详解
Vue 实例的生命周期 Vue 实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom→渲染.更新→渲染.卸载等一系列 过程,我们称这是 Vue 的生命周期.通俗说就是 Vue ...
- Vue.js-07：第七章 - Vue 实例的生命周期
一.前言 在之前的 Vue 学习中,我们在使用 Vue 时,都会创建一个 Vue 的实例,而每个 Vue 实例在被创建时都要经过一系列的初始化过程.例如,需要设置数据监听.编译模板.将实例挂载到 D ...
- vue实例的生命周期
Vue实例的生命周期也就是这个实例从出生到死亡的过程,所以我在文档原图上把这个周期大致分为创建过程 | 运行过程 | 销毁过程三个阶段,不同结果或又分为一些小的阶段 在第一个阶段,创建阶段,会完成Vu ...
- 浅析vue实例的生命周期（生命周期钩子）
“每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等” ,在不同的生命周期内会经历不同的钩子函数(生命周期 ...
- python 全栈开发，Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- vuejs2.0 vue实例的生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .下图展示的就是一个v ...
随机推荐
- 如果存在这个表,则删除这个表的sql
mysql: drop table if exists address_book sqlserver2005:IF EXISTS (SELECT * FROM sys.objects WHERE ob ...
- left join on and和left join on where条件的困惑[转]
外连接:left join(左联接) left outer join 返回包括左表中的所有记录和右表中联结字段相等的记录right join(右联接) right outer join返回包括右表中的 ...
- js url传参，参数加密
前台 function encode64(input) { var output = ""; var base = new Base64(); var output = base. ...
- python常用模块学习1
import time time.sleep(1)#暂停时间 time.time()#显示当前系统时间戳 t=time.localtime()#结构化当地时间,可以将结构化时间想象成一个类 print ...
- 外媒：Apple面临着印度iPhone的停用
据外媒报道:印度电信管理局(TRAI)制定遏制令人讨厌的消息的新规则可能导致印度数百万部iPhone的停用. 该监管机构本周早些时候宣布了“2018年电信商业通信客户偏好规定”,根据该规定,它已提议“ ...
- 打开pycharm提示python已停止工作
今天遇到一个棘手的问题: 现象:打开pycharm,立刻提示python已停止工作,关掉后还会弹出一个新的,就是永远维持至少一个提醒框在界面的状态 解决过程: 方法一:然后在网上搜解决办法,有一个主流 ...
- fiddler使用介绍
Fiddler的详细介绍 Fiddler的详细介绍 一.Fiddler与其他抓包工具的区别 1.Firebug虽然可以抓包,但是对于分析http请求的详细信息,不够强大.模拟http请求的功能也不够, ...
- Rabbit MQ项目例子
地址链接: https://blog.csdn.net/cartoonmiao/article/details/51920766
- [CF846C]Four Segments题解
我们暴力枚举一下\(delim_{1}\) 然后对于每个\(delim_{1}\),O(n)扫一遍+前缀和求出最大\(delim_{0}\)和\(delim_{2}\),然后记录一下它们的位置就行啦 ...
- [JSOI2004]平衡点 / 吊打XXX 题解
预备概念: 金属退火:将金属缓慢加热到一定温度,保持足够时间,然后以适宜速度冷却 温度:一个逐渐减小的参数,表示接受次优解的概率 模拟退火是一种解决复杂问题的算法,相当于贪心,但以一个逐渐减小的该率接 ...