Vue——生命周期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.1.2/vue.global.js"></script> </head>
<body> <div id="app">
<p ref="p1">{{num}}</p>
<input type="text" v-model="num">
</div> <script> vm = Vue.createApp({
data() {
return {
num: 0,
}
},
beforeCreate() {
console.log("--------data数据被赋值到vm对象之前---------");
console.log("this", this);
console.log("num:", this.num);
console.log("$el", this.$el);
},
created() { // 重点掌握，最常用，开发中一般会在这里编写ajax代码，发送http请求获取来自服务端的数据
console.log("--------data数据被赋值到vm对象之后---------");
console.log("this", this);
console.log("num:", this.num);
console.log("$el", this.$el);
this.num = 10
},
beforeMount() {
console.log("--------把data数据渲染到HTML模板之前---------");
console.log("this", this);
console.log("num:", this.num);
console.log("$el", this.$el);
},
mounted() { // 重点掌握，最常用，开发中一般会在这里编写页面初始化的操作，一般就是根据条件/状态，进行页面跳转，改变页面的特效。
console.log("--------把data数据渲染到HTML模板之后---------");
console.log("this", this);
console.log("num:", this.num);
console.log("$el", this.$el.parentElement);
},
beforeUpdate() {
console.log("--------data数据发生改变以后，同步到HTML模板之前，此时data和模板的数据是不一致的---------");
console.log("this", this);
console.log("num:", this.num);
console.log("$el", this.$el.parentElement);
},
updated() {
console.log("--------data数据发生改变以后，同步到HTML模板之后，此时data和模板中的数据保持一致---------");
alert(123)
console.log("this", this);
console.log("num:", this.num);
console.log("$el", this.$el.parentElement.innerHTML);
} }).mount('#app')
</script> </body>
</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的生命周期 ...
随机推荐
- WPF开发随笔收录-操作注册表
一.前言 在windows平台软件开发过程中,注册表的操作是经常会遇到的一个场景.今天记录一下在操作注册表时遇到的一些坑: 二.正文 1.操作注册表,于是直接从网上找了一段代码来用 /// <s ...
- Kafka的实现细节
Kafka的实现细节 一.Topic和Partition 在Kafka中的每一条消息都有一个topic.一般来说在我们应用中产生不同类型的数据,都可以设置不同的主题.一个主题一般会有多个消息的订阅者, ...
- 力扣597(MySQL)-好友申请Ⅰ：总体通过率（简单）
题目: 此表没有主键,它可能包含重复项.该表包含发送请求的用户的 ID ,接受请求的用户的 ID 以及请求的日期. 此表没有主键,它可能包含重复项.该表包含发送请求的用户的 ID ,接受请求的用户的 ...
- 菜鸟 CPaaS 平台微服务治理实践
简介: 在使用 MSE 的云产品之后,对 PaaS 平台层来说,避免很多重复功能的建设.在我们业务侧实际落地的远不止如上列举的场景,比如:服务优雅停机.注册中心等能力,均解决了业务侧的微服务治理上的难 ...
- 阿里云 MSE 支持 Go 语言流量防护
简介: OpenSergo 开源项目联合 Sentinel 项目,正在制定.完善限流降级标准,方便不同语言应用通过统一控制面来实现统一的微服务治理.阿里云微服务引擎(MSE)也会逐步支持 OpenSe ...
- SQL 开发任务超 50% ！滴滴实时计算的演进与优化
摘要:Apache Flink 是一个分布式大数据处理引擎,可对有限数据流和无限数据流进行有状态计算.可部署在各种集群环境,对各种大小的数据规模进行快速计算.滴滴基于 Apache Flink 做了大 ...
- RedShift到MaxCompute迁移实践指导
简介: 本文主要介绍Amazon Redshift如何迁移到MaxCompute,主要从语法对比和数据迁移两方面介绍,由于Amazon Redshift和MaxCompute存在语法差异,这篇文章讲解 ...
- [GPT] Vue 的 methods 中使用了 addEventListener，如何在 addEventListener 的匿名函数参数中访问 Vue data 变量
在 Vue 的 methods 方法中使用 addEventListener时,你可以使用 箭头函数 来访问 Vue 实例的数据. 箭头函数不会创建自己的作用域,而是继承父级作用域的上下文.以下是 ...
- k8s-1.28版本多master部署
一.环境准备 k8s集群角色 IP 主机名 安装相关组件 kubernetes版本号 控制节点 192.168.10.20 master apiserver.controller-manager.sc ...
- RT-Thread 堆区大小设置
一.利用栈区的空间作为堆区 看过我之前的笔记的小伙伴都知道,以前我是通过申请栈区的空间使用的,感兴趣的小伙伴可以看我之前的笔记,RT-Thread移植到stm32. 在board.c文件文件中的代码如 ...