Vue.js（4）- 生命周期
2024-09-29 05:50:36
当new的时候，就创建了一个vue实例，这个实例就是vue框架的入口，也是VM层
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue-2.5.16.js"></script>
</head> <body>
<div id="app">
<input type="text" v-model="message">
<h2>{{message}}</h2>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
message: 'my words'
},
beforeCreate() {
console.group("beforeCreate");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
created() {
console.group("created");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
beforeMount() {
console.group("beforeMount");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
mounted() {
console.group("mounted");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
beforeUpdate() {
console.group("beforeUpdate");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
updated() {
console.group("updated");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
beforeDestroy() {
console.group("beforeDestroy");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
destroyed() {
console.group("destroyed");
console.log("%c%s", "color:red", "el : " + this.$el);
console.log("%c%s", "color:red", "data : " + this.$data);
console.log("%c%s", "color:red", "message: " + this.message)
},
})
</script>
</body> </html>
最新文章
- 解决 vs2010 联接sql 2005 时 报错未能加载文件或程序集“Microsoft.SqlServer.Management.Sdk.Sfc
- 利用js对象的特性,去掉数组中的重复项
- 20145222黄亚奇《Java程序设计》第10周学习总结
- apply与call
- Problem 1010 - 素数环问题
- ng机器学习视频笔记（二） ——梯度下降算法解释以及求解θ
- 纪念一下学写pipeline时脑子里的坑
- webservice生成客户端代码
- Feign源码解析系列-那些注解们
- Java：注解Annotation（元数据）
- win10 linux 子系统 所在 目录
- Unity Shader 景深效果
- 电脑异常断电，IDEA崩溃
- 如何通过cmd命令进入到某个硬盘的文件夹
- web开发常见bug汇总
- Feature Toggle JUnit
- 【eclipse】svn在线安装
- AndroidStudio-Error Please select Android SDK
- 突破技术管理，IT人中年危机变契机
- 【python常见面试题】之python 中对list去重的多种方法