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的生命周期 ...
随机推荐
- HAProxy适配openGauss使用指导书
一.HAProxy 简介 HAProxy 是一个开源的项目,其代码托管在 Github 上,代码链接如下:HAProxy 代码链接. HAProxy 提供高可用性.负载均衡以及基于 TCP 和 HTT ...
- Unity 音频资源优化
1.声道设置 (1).不设置 单声道 音频大小为下图 (2).设置单声道 音频大小为下图 2.加载类型 (1).Decompress On Load 使用内存8.1M (2).Compressed I ...
- 老者Java，奋战一线
1 语言优劣论 世上只有两种编程语言:一种被人骂,一种没人用. Java已经诞生20多年了,依然是企业级开发中使用最广泛的语言,也是挨骂最多的语言.技术圈经常有"A语言比B语言更好" ...
- Telnet qsnctfwp
Windows 安装 Telnet 在控制面板的程序和功能中选择打开或关闭Windows功能 启用 Telnet 客户端并单击确认退出 启动终端,输入命令 telnet 打开 Telnet 客户端 在 ...
- 墨水污染的一角qsnctfwp
题目附件 在图片中最直接的信息是电话号码,将号码输入到搜索引擎,可以得到该书的出版社为:高等教育出版社. 进入高等教育出版社官网 根据物料号前四位.版次时间.印次时间,在官网中进行图书查询. 结合字数 ...
- redis 简单整理——Lua[十一]
前言 简单介绍一下Lua. 正文 为了保证多条命令组合的原子性,Redis提供了简单的事务功能以及集 成Lua脚本来解决这个问题. 前面提及到pipline,也提及到pipline 并不是原子性的,如 ...
- 重新整理.net core 计1400篇[九] (.net core 中的依赖注入的服务的消费)
前言 包含服务注册信息IServiceCollection 集合最终被用来创建作为依赖注入容器的IServiceProvider 对象. 当需要创建某个服务实例的时候(服务消费),我们通过指定服务类型 ...
- 纯钧chunjun的http-x插件修复
简介 chunjun是一款基于flink的开源数据同步工具,官方文档,其提供了很多flink官方未提供的插件供大家来使用,特别是达梦插件在国产化环境中很方便! 本次介绍的是chunjun中的一款htt ...
- flutter 移动应用程序中打开URL
url_launcher: ^6.2.5 在Flutter中,url_launcher库是用于在移动应用程序中打开URL的常用工具.它允许你通过调用系统的浏览器或其他应用程序来打开指定的URL,比 ...
- 力扣374(java&python)-猜数字大小（简单）
题目: 猜数字游戏的规则如下: 每轮游戏,我都会从 1 到 n 随机选择一个数字. 请你猜选出的是哪个数字.如果你猜错了,我会告诉你,你猜测的数字比我选出的数字是大了还是小了.你可以通过调用一个预先定 ...