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 ...
随机推荐
- CentOS7搭建Hadoop2.8.0集群及基础操作与测试
环境说明 示例环境 主机名 IP 角色 系统版本 数据目录 Hadoop版本 master 192.168.174.200 nameNode CentOS Linux release 7.4.1708 ...
- MiniUI学习笔记1-新手必读
1.mini的全局方法 2.Ajax jQuery 拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. 详细jQuery Ajax教程,可参考这里. 3. ...
- srs-librtmp pusher(push h264 raw)
Simple Live System Using SRS https://www.cnblogs.com/dong1/p/5100792.html 1.上面是推送文件,改成推送缓存 封装了三个函数 i ...
- Perl脚本通过Expect登陆多台设备批量执行命令并Log
本例子尝试使用Perl脚本借助Expect模块实现如下目的: 登陆多台设备 设备登陆信息按如下格式存放于文件中. $ cat hosts.txt 192.168.30.7:node1:telnet:b ...
- PHP: thinkPHP踩坑记录(实现API接口以及处理莫名其妙的500问题)
因为各种原因开始学习PHP,并且要在两周内能够对PHP项目进行二次开发,还好PHP够简单,至少入门很简单,很快就接触thinkPHP框架. 在了解了路由匹配视图的规则之后,开始着手尝试编写API接口, ...
- highlight语法高亮推荐样式
最近在弄一个类似博客的东西,需要高亮显示代码,所以用了highlight.js来完成 highlight提供了不同的风格我们可以通过更改css样式表来找到适合我们的. 我罗列一部分看看有哪些风格 以下 ...
- P4206[NOI2005]聪聪与可可
链接P4206 [NOI2005]聪聪与可可 类似于开车旅行,如果老鼠确定了那么猫的路线是确定的. 预处理\(g_{i,j}\)表示老鼠在\(i\)号点,猫的下一步方向,\(Bfs\)就行了 设\(f ...
- sys模块 json pickle模块
# sys模块# import sys# sys.path# sys.argv# sys.exit() # 脚本退出# print('[%s]'%('#'*1))# print('[%s]'%('#' ...
- gitignore 忽略文件
*.project*.prefs*.classpath*.gitignore#ignore thumbnails created by windowsThumbs.db#Ignore files bu ...
- php中substr_compare()区分大小写吗
PHP substr_compare() 函数 定义和用法 substr_compare() 函数从指定的开始位置比较两个字符串. 提示:该函数是二进制安全且选择性地对大小写敏感(区分大小写). 语法 ...