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的生命周期 ...
随机推荐
- MogDB/OpenGauss数据库中通过参数控制抓取慢sql
MogDB/OpenGauss 数据库中通过参数控制抓取慢 sql 本文出处:https://www.modb.pro/db/221556 mogdb 数据库中可以通过打开相应的参数抓取慢 sql,该 ...
- Mybatis总体框架设计
Mybatis架构概览 Mybatis架构整体设计如下: 接口层和数据库交互的方式 Mybatis和数据库的交互方式有两种 使用传统的MyBatis提供的API: 使用Mapper接口 使用传统的My ...
- WPF 像CSS一样使用 Font Awesome 图标字体
WPF 像CSS一样使用 Font Awesome 图标字体 编写目的 WPF中使用这种图标字体不免会出现可读性差的问题,现阶段网络上有的大部分实现方式都是建立枚举,我感觉这样后续维护起来有些麻烦,需 ...
- github仓库开始启用Token认证，用户名密码模式将在2021年8月停止使用
提交代码到github原本使用github的登录账号和密码即可.现在github出于安全的考虑,将在2021年8月停止使用账号和密码的方式访问github仓库,改为token认证的方式. 创建步骤 点 ...
- 力扣121(java&python)-买卖股票的最佳时机（简单）
题目: 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格. 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股票.设计一 ...
- PolarDB-X 全局二级索引
简介: 索引是数据库的基础组件,早在1970年代,SystemR 就已经通过增加索引来支持多维度查询.单机数据库中,索引主要按照用途和使用的数据结构分为 BTree 索引.Hash 索引.全文索引.空 ...
- SysAK 应用抖动诊断篇—— eBPF又立功了！ | 龙蜥技术
简介:且看 SysAK 是如何打造一款性能开销不大.安全可靠.且灵活的关中断检测工具. 文 / 系统运维 SIG 编者按:还记得曾经风靡一时的狄仁杰探案系列之<他抖任他抖,IO诊断在我手& ...
- 阿里巴巴云原生混部系统 Koordinator 正式开源
简介: 脱胎于阿里巴巴内部,经过多年双 11 打磨,每年为公司节省数十亿的混部系统 Koordinator 今天宣布正式开源.通过开源,我们希望将更好的混部能力.调度能力开放到整个行业,帮助企业客户 ...
- 【ESSD技术解读-03】阿里云块存储企业级特性之异步复制
简介: 在大数据时代,数据就是企业的核心资产,是企业的生命线.在现实世界中,灾难时有发生,当发生灾难时,容灾能力成为企业能否生存的关键.云上容灾服务,通常称为 DRaaS(灾难恢复即服务)不但能够省 ...
- WPF 自定义控件入门 可重写的各个方法或属性的意义
本文属于 WPF 自定义控件入门系列博客.本文整理在 WPF 里面,自定义控件,非用户控件时,可以重写基类的许多方法和属性,这些方法和属性的作用和含义.方便让大家了解到自定义控件时,有哪些方法或属性可 ...