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的生命周期 ...
随机推荐
- Grafana 系列-统一展示-1-开篇
系列文章 Grafana 系列文章 Grafana 简介 Grafana 是 Grafana Labs 的第一款也是最重要的产品.它的定位是可视化, 用于监控展示 和 可观察性. 是当前最为完善.流行 ...
- Native API在HarmonyOS应用工程中的使用指导
HarmonyOS的应用必须用js来桥接native.需要使用ace_napi仓中提供的napi接口来处理js交互.napi提供的接口名与三方Node.js一致,目前支持部分接口,符号表见ace_ ...
- 【译】宣布在 Visual Studio 17.10 预览2中为 ARM64 架构提供 SSDT
我们很高兴地宣布在 ARM64 中为 Visual Studio 推出 SQL Server Data Tools(SSDT).这个增强是在令人兴奋的17.10预览版2中发布的.arm64 上 Vis ...
- 重新点亮linux 命令树————网络故障排除[十一五]
前言 简单整理一下网络故障不可达命令. 正文 ping 是否能ping traceroute 追踪路由跳转 mtr 检查数据包是否丢失 nslookup telnet 端口是否可达 tcpdump 能 ...
- Java面试题：为什么HashMap不建议使用对象作为Key?
HashMap 是一种基于哈希表的动态数据结构,它允许使用任意不可变对象作为键(key)来存储和检索数据.然而,在某些情况下,使用对象作为 HashMap 的键可能会遇到一些问题. 首先,我们需要明确 ...
- .Net与AI的强强联合：AntSK知识库项目中Rerank模型的技术突破与实战应用
随着人工智能技术的飞速发展,.Net技术与AI的结合已经成为了一个新的技术热点.今天,我要和大家分享一个令人兴奋的开源项目--AntSK,这是一个基于.net平台构建的开源离线AI知识库项目.在这个项 ...
- 力扣633(java&python)-平方数之和（中等）
题目: 给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a2 + b2 = c . 示例 1: 输入:c = 5输出:true解释:1 * 1 + 2 * 2 = 5示例 2: 输 ...
- 从0到1使用Webpack5 + React + TS构建标准化应用
简介: 本篇文章主要讲解如何从一个空目录开始,建立起一个基于webpack + react + typescript的标准化前端应用. 作者 | 刘皇逊(恪语)来源 | 阿里开发者公众号 前言 本篇文 ...
- 实时数仓入门训练营：Hologres性能调优实践
简介: <实时数仓入门训练营>由阿里云研究员王峰.阿里云资深技术专家金晓军.阿里云高级产品专家刘一鸣等实时计算 Flink 版和 Hologres 的多名技术/产品一线专家齐上阵,合力搭建 ...
- Cube 技术解读 | 支付宝新一代动态化技术架构与选型综述
简介: 支付宝客户端的动态化技术经历三个阶段:现阶段也就是第三阶段是实体组件+部分光栅化的hybrid模式,Cube 就是该模式下的产物. 如标题所述,笔者将持续更新<Cube 技术解读& ...