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 ...
随机推荐
- 轻便的gb28181协议中的rtp+ps格式视频流的封装和解析
streams 轻便的gb28181协议中的rtp+ps格式视频流的封装和解析 packet packet实现ps的相关封装和解析, example/enc 通过joy4来读本地视频文件,然后调用Rt ...
- glob & fnmatch -- 使用Unix style通配符
通配符: ? 匹配单个字符 * 匹配 0+ 个字符 [seq] 匹配属于区间的单个字符 [!seq] 匹配不属于区间的单个字符 注意: "." just a " ...
- linux--基础知识1
#进入终端窗口,root命令提示符#,普通用户登陆提示符$,切换终端用户 ctrl+shift+F2,退出终端命令exit #init 0 关机 reboot 重启 ls查看当前目录下文件 ls ...
- 【学习】005 线程池原理分析&锁的深度化
线程池 什么是线程池 Java中的线程池是运用场景最多的并发框架,几乎所有需要异步或并发执行任务的程序 都可以使用线程池.在开发过程中,合理地使用线程池能够带来3个好处. 第一:降低资源消耗.通过重复 ...
- csv导入数据
1.关闭Neo4j服务器进程 2.删除graph.db数据库文件 /data/databases/ rm -rf graph.db 3.重新启动Neo4j服务器 4.数据导入import 5.wi ...
- 学习python os commands socket模块
import os print(os.getcwd()) #获取当前路径, 导包也是从这个路径下面才能找到 # os.chdir('./..') #返回上一级路径,再获取路径看看 # print(os ...
- 【leetcode】1073. Adding Two Negabinary Numbers
题目如下: Given two numbers arr1 and arr2 in base -2, return the result of adding them together. Each nu ...
- [转]php判断mysql_query是否成功执行
针对update 语句等会对数据表进行修改的语句 在mysql_query($sql);后面加上 $result = mysql_affected_rows(); 如果$result 值为-1表明语句 ...
- Flask学习笔记01之环境搭建
使用pycharm搭建Flask运行环境 1. 打开pycharm ,创建一个新的工程 2. 选择创建Flask项目 3. Flask项目创建成功,结构如下 4. 运行项目 5. 发送请求 over!
- Dubbo学习-4-dubbo简单案例-2-服务提供者和消费者配置
在上一篇帖子的基础上,开始使用dubbo来实现RPC调用: 根据dubbo的架构图可知,需要做以下几件事情: 1.将服务提供者注册到注册中心(暴露服务) (1)引入dubbo依赖, 这里依赖2.6.2 ...