2021-7-12 VUE的生命周期
挂载：
beforeCreate
created
beforeMount
mounted：el挂载到实例上时运行
更新：
beforeUpdate
updated
销毁：
beforeDestory
destoryed
各自出现的时机如下列代码所示：在log中查看
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<input type="button" name="" value="更新" @click="update">
<input type="button" name="" value="销毁" @click="destory">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg:''
},
methods:{
update:function(){
this.msg="new";
},
destory:function(){
this.$destroy();
}
},
beforeCreate:function(){
console.log("beforeCreate");
},
created:function(){
console.log("created");
},
beforeMount:function(){
console.log("beforeMount");
},
mounted:function(){
console.log("mounted");
},
beforeUpdate:function(){
console.log("beforeUpdate");
},
updated:function(){
console.log("updated");
},
beforeDestroy:function(){
console.log("beforeDestory");
},
destroyed:function(){
console.log("destroyed");
}
})
</script>
</body>
</html>
2021-7-12 VUE的生命周期的更多相关文章
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 8.vue的生命周期
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- 如何解释vue的生命周期才能令面试官满意？
当面试官问:"谈谈你对vue的生命周期的理解",听到这句话你是不是心里暗自窃喜:这也太容易了吧,不就是beforeCreate.created.beforeMount.mounte ...
- vue之生命周期
vue的生命周期的过程提供了我们执行自定义逻辑的机会,好好理解它的生命周期,对我们很有帮助. 1.vue实例的生命周期(vue2.0) 2.生命周期描述:(参考截图) 3.例子 window.vm = ...
- vue的生命周期的理解
Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例从创建到销毁的过程,就是生命周期 ...
- vue笔记-生命周期
生命周期钩子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- vue 关于生命周期
序言: 1. vue 单组件的生命周期: 2. vue 父子组件的生命周期: 3. axios 异步请求 与 vue 的组件周期: 一.vue 每个组件的生命周期 关于每个组件的生命周期,官方文档里也 ...
- Vue：生命周期
一.什么是vue的生命周期 Vue中的生命周期是指组件从创建到销毁的一系列过程.看下面这张官方文档的图: 从图片中可以看出Vue的整个生命周期包括8个状态,按照先后顺序分别为: beforeCreat ...
- 深入理解Vue的生命周期
谈到Vue的生命周期,相信许多人并不陌生.但大部分人和我一样,只是听过而已,具体用在哪,怎么用,却不知道.我在学习vue一个多礼拜后,感觉现在还停留在初级阶段,对于mounted这个挂载还不是很清楚. ...
- vue笔记 - 生命周期第二次学习与理解
对于刚接触vue一两个月.才仅仅独立做过一两个vue项目的小白来说,以前一直自我感觉自己知道vue的生命周期, 直到前两天去面试,面试官让我说一下vue的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- class(类)和构造函数(原型对象)
构造函数和class的关系,还有面向对象和原型对象,其实很多人都会很困惑这些概念,这是第二次总结这些概念了,之前一次,没有class类,其实了解了构造函数,class也就很容易理解了 一. 构造函数和 ...
- Django笔记三十二之session登录验证操作
本文首发于公众号:Hunter后端 原文链接:Django笔记三十二之session登录验证操作 这一篇笔记将介绍 session 相关的内容,包括如何在系统中使用 session,以及利用 sess ...
- [C++提高编程] 3.7 list容器
文章目录 3.7 list容器 3.7.1 list基本概念 3.7.2 list构造函数 3.7.3 list 赋值和交换 3.7.4 list 大小操作 3.7.5 list 插入和删除 3.7. ...
- 基于.Net5+Vue+iView前后端分离通用权限开源系统
在Github上,.Net通用的权限框架非常多,功能也都比较强大,但是对于很多初学者来说,想要从零学习框架的搭建,就比较困难了. 所以,今天给大家推荐一套比较简单的前后端分离通用权限系统. 项目简介 ...
- 在 CentOS 上搭建 Mumble 服务器
Mumble 服务器搭建 前言 Mumble 是一个开源.低延迟.高质量的语音通话平台.可以在多个平台搭建,并且有多个开源的客户端(Windows.Linux.Android.MacOS).这是 官网 ...
- 2020-11-17：java中，吞吐量优先和响应时间优先的回收器是哪些？
福哥答案2020-11-17:对于吞吐量优先的场景,就只有一种选择,就是使用 PS 组合(Parallel Scavenge+Parallel Old ).对于响应时间优先的场景,在 JDK1.8 的 ...
- 2020-12-06：mysql中，多个索引会有多份数据吗？
福哥答案2020-12-06: 数据不会有多份,索引有几个就有几份.聚簇索引存数据和索引,非聚簇索引存索引,聚簇索引只有一个,非聚簇索引可以有多个.
- Python连接es笔记二之查询方式汇总
本文首发于公众号:Hunter后端 原文链接:Python连接es笔记二之查询方式汇总 上一节除了介绍使用 Python 连接 es,还有最简单的 query() 方法,这一节介绍一下几种其他的查询方 ...
- Dapr在Java中的实践 之 环境准备
Dapr简介 Dapr (Distributed Application Runtime)是一个可移植的.事件驱动的运行时,它使任何开发人员都可以轻松地构建运行在云和边缘上的弹性.无状态和有状态的应用 ...
- 【VS Code 与 Qt6】QCheckBox的图标为什么不会切换？
本篇专门扯一下有关 QCheckBox 组件的一个问题.老周不水字数,直接上程序,你看了就明白. #include <QApplication> #include <QWidget& ...