初识Vue--生命周期
初学Vue，写一些随记谨防忘记，不足之处谢谢指出！！！
本文可以直接复制自行创建一个HTML页面，查看结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="dom()">点击</button>
<hr/>
<button @click="del()">销毁</button>
{{msg}}
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
msg: "我爱学Vue！！！"
}, /*创建之前，$el(并未接管#app) $data均为undefined*/
beforeCreate() {
console.log("---------------beforeCreate----------------")
console.log("el：" + this.$el)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.$data)
console.log(this)
}, /*创建，$el为undefined(并未接管#app) $data已获取数据*/
created() {
console.log("---------------created----------------")
console.log("el：" + this.$el)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.$data)
},
/*挂载之前，$el已接管#app $data获取数据 但是并未将数据渲染*/
beforeMount() {
console.log("---------------beforeMount----------------")
console.log("el：" + this.$el.innerHTML)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.$data)
},
/*挂载之前，$el已接管#app $data获取数据 并将数据渲染 页面成型*/
mounted() {
console.log("---------------mounted----------------")
console.log("el：" + this.$el.innerHTML)
console.log(this.$el)
console.log("data：" + this.$data)
},
beforeUpdate() {
console.log("---------------beforeUpdate----------------")
console.log("el：" + this.$el.innerHTML)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
updated() {
console.log("---------------updated----------------")
console.log("el：" + this.$el.innerHTML)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
beforeDestroy() {
console.log("---------------beforeDestroy----------------")
console.log("el：" + this.$el.innerHTML)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
destroyed() {
console.log("---------------destroyed----------------")
console.log("el：" + this.$el.innerHTML)
console.log(this.$el)
console.log("data：" + this.$data)
console.log(this.msg)
},
methods: {
dom() {
this.msg = "我爱Vue-初学！！！"
console.log(this)
},
del() {
this.$destroy();
}
} });
</script>
</html>
初识Vue--生命周期的更多相关文章
- vue生命周期的介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 生命周期
一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...
- 详解vue生命周期
vue生命周期 @(vue)[生命周期] 前言 在使用vue一个多礼拜后,感觉现在还停留在初级阶段,虽然知道怎么和后端做数据交互,但是对于mounted这个挂载还不是很清楚的.放大之,对vue的生命周 ...
- 关于vue生命周期
官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...
- vue生命周期的理解
我从官网上下载了一张vue生命周期的图,接下来实际分析一波vue到底执行了什么东西. 1.我们在使用vue时必不可少的操作就是 var vm = new Vue({}),这样我们就创建了一个vue的实 ...
- Vue生命周期，面试常见问题
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
- 面试题之（vue生命周期）
在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...
- [转] Vue生命周期
Vue生命周期 这是Vue文档里关于实例生命周期的解释图 那么下面我们来进行测试一下 <section id="app-8"> {{data}} </sectio ...
- vue生命周期、钩子函数
https://segmentfault.com/a/1190000011381906 详解生命周期和钩子函数 每个vue实例再被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期 ...
随机推荐
- defender 书荐
2018全年度推荐: 1.[法]大仲马——基督山伯爵 2.[美]加西亚·马尔克斯——百年孤独 3.[法]大仲马——三个火枪手 2019第一季度推荐: 1.霍达——穆斯林的葬礼 2.[苏联]尼·奥斯特洛 ...
- 在系统下使用命令安装gnome图形界面程序
yum groupinstall "GNOME Desktop" "Graphical Administration Tools" reboot 记得别忘了更新 ...
- CSS标题线（删除线贯穿线效果）实现之一二
缘起 其实看到这个问题,心里已经默默把代码已经码好了~,不就想下面这样嘛:JSBIN代码示例 嗯,是的,我们日常确实基本上就是用的这种方式,也没啥问题呀~,来个背景色定下位就欧拉欧拉的了. 不过,因为 ...
- P3768 简单的数学题 [杜教筛，莫比乌斯反演]
\[\sum_{i=1}^{n}\sum_{j=1}^{n} ij\gcd(i,j)\] \[=\sum_{d=1}^{n} d \sum_{i=1}^{n}\sum_{j=1}^{n} ij[\gc ...
- php 字符串常用函数
数组.字符串和数据库是我们函数里面最.最.最常用的三类函数. 当然PHP的字符串函数也有很多.我们最常使用的两个系列的字符串: 1.单字节字符串处理函数 2.多字节字符串处理函数 3.字符串编码转换函 ...
- [Err] 1248 - Every derived table must have its own alias
问题描述 [Err] 1248 - Every derived table must have its own alias 问题原因 这句话的意思是说每个派生出来的表都必须有一个自己的别名 我的Mys ...
- openWRT和LuCI
openwrt是一套集成在板子上的系统,通过ip进入到其页面上 Luci是lua和UCI统一配置接口的合体,实现路由的网页配置界面(相当于一个前端框架)
- unrecognized import path "golang.org/x/*"的解决办法
由于国内网络原因,因此访问https://golang.org/网站会被限制.所以在go get下载其他第三方包的时候,如果这个第三方包又引用了https://golang.org/x/下的包,通常会 ...
- Failed to set locale, defaulting to C
echo "export LC_ALL=en_US.UTF-8" >> /etc/profile source /etc/profile 没有设置local环境
- js监听页面copy事件添加版权信息
个人博客 地址:http://www.wenhaofan.com/article/20180921103346 1.介绍 当页面需要做版权保护时,比如当用户copy我们网站的文章时,我们会希望在他co ...