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的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- i < sqrt(n) 和 i*i < n 那一种写法更加高效？
这两种写法效率依赖处理器.编译器和标准库.一般来说循环内的重复操作的性能差于循环外的单次操作. 参考文献 Which is more efficient to use in a for loop, i ...
- Go函数基础
在Go语言中,函数是一种基本的代码组织方式.函数能够接受输入参数并返回结果.Go语言中的函数有以下特点: 函数定义使用关键字func,后跟函数名.参数列表和返回值类型. 如果函数有返回值,则在函数定义 ...
- 2023-03-04：定义一个二维数组N*M，比如5*5数组下所示： 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0,
2023-03-04:定义一个二维数组NM,比如55数组下所示: 0, 1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0 ...
- 2022-10-27：设计一个数据结构，有效地找到给定子数组的 多数元素 。 子数组的 多数元素 是在子数组中出现 threshold 次数或次数以上的元素。 实现 MajorityChecker 类
2022-10-27:设计一个数据结构,有效地找到给定子数组的 多数元素 . 子数组的 多数元素 是在子数组中出现 threshold 次数或次数以上的元素. 实现 MajorityChecker 类 ...
- 2022-09-18：以下go语言代码输出什么？A：1；B：15；C：panic index out of range；D：doesn’t compile。 package main import
2022-09-18:以下go语言代码输出什么?A:1:B:15:C:panic index out of range:D:doesn't compile. package main import ( ...
- 2021-09-22：请你判断一个 9x9 的数独是否有效。只需要 根据以下规则 ，验证已经填入的数字是否有效即可。数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9
2021-09-22:请你判断一个 9x9 的数独是否有效.只需要 根据以下规则 ,验证已经填入的数字是否有效即可.数字 1-9 在每一行只能出现一次.数字 1-9 在每一列只能出现一次.数字 1-9 ...
- drf——restful规范、序列化反序列化、drf介绍和快速使用、drf之APIView源码
1.restful规范 # restful是一种定义API接口的设计风格,API接口的编写规范,尤其适用于前后端分离的应用模式中 这种风格的理念人为后端开发任务就是提供数据的,对外提供的是数据资源的访 ...
- sqlmap的一些简单使用命令
路径 C:\Users\Administrator\AppData\Local\Programs\Python\Python39\sqlmap post型注入 *每次使用都要重新抓包,不可以使用旧的数 ...
- 使用Drone+gitea配置自己的CICD流程
什么是CI CD CI CD一般包含三个概念:持续集成(Continuous Integration ,CI),持续交付(Continuous Delivery),持续部署(Continuous De ...
- 手记系列之六 ----- 分享个人使用kafka经验
前言 本篇文章主要介绍的关于本人从刚工作到现在使用kafka的经验,内容非常多,包含了kafka的常用命令,在生产环境中遇到的一些场景处理,kafka的一些web工具推荐等等.由于kafka这块的记录 ...