初识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的生命周期 ...
随机推荐
- E11000 duplicate key error index: test.collection.$a.b_1 dup key: { : null } 报错记录
这个一般分为两种情况,第一新增数据出现约束.而你在orm里面写了唯一约束.这种情况就比较简单,添加数据时保证数据字段唯一性就好了. 第二种情况比较难找,因为你发现你在orm里面并没有写约束,但是还是插 ...
- mongodb 基础入门教程
算是学习下来精炼的笔记,希望对大家有帮助.如果有问题欢迎大家指正. 0.概述 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保 ...
- django orm介绍以及字段和参数
Object Relational Mapping (ORM) orm介绍 orm概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数 ...
- HTML+PHP+MySQL 制作最基础的登录页面及验证
第一步 进入mysql操作终端 新建一个数据库web1:create database web1; 然后在这个数据库里面新建一张表test:create table test(user varchar ...
- C++ STL：next_permutation和prev_permutation
两个函数都在#include <algorithm>里 顾名思义,next_permutation用来求下一个排列,prev_permutation用来求上一个排列. 当前的排列不满足函数 ...
- Cloud插件，链接oracle数据库
业务场景:客户需要在Cloud中获取第三方系统的数据,但是第三方系统的数据库是oracle,这是就需要连接oracle数据库获取数据了. 需要引用Oracle.ManagedDataAccess.dl ...
- C语言118. 杨辉三角
给定一个非负整数 numRows,生成杨辉三角的前 numRows 行. 在杨辉三角中,每个数是它左上方和右上方的数的和. 示例: 输入: 5输出:[ [1], [1,1], [1,2,1], [1, ...
- mysql 时间，时间戳，字符串之间相互转换
时间转字符串 date_format(now(),'%Y-%m-%d') 时间转时间戳 unix_timestamp(now()) 字符串转时间 str_to_date('2020-01-19','% ...
- MATLAB用“fitgmdist”函数拟合高斯混合模型(一维数据)
MATLAB用“fitgmdist”函数拟合高斯混合模型(一维数据) 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 在MATLAB中“fitgmdis ...
- 杭电oj2037——今年暑假不AC（java实现）
思路:标准贪心 先把所有思路列出来: 1.优先选择开始时间最早的,经分析,不可行 2.优先选择持续时间最短的,经分析,不可行 3.优先选择结束时间最早的,经分析,可行 然后根据第三种思路实现代码就好 ...