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的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- 全网最硬核 JVM 内存解析 - 1.从 Native Memory Tracking 说起
个人创作公约:本人声明创作的所有文章皆为自己原创,如果有参考任何文章的地方,会标注出来,如果有疏漏,欢迎大家批判.如果大家发现网上有抄袭本文章的,欢迎举报,并且积极向这个 github 仓库 提交 i ...
- 数据分析06-五个pandas可视化项目
数据分析-06 数据分析-06 pandas可视化 基本绘图 Series数据可视化 DataFrame数据可视化 高级绘图 代码总结 pandas可视化 基本绘图 pandas高级绘图 pandas ...
- Maven工程开发
Maven工程开发 编写pom.xml配置文件 <properties></properties>定义项目的基本信息 groupId 反向域名,定义项目组名 artifactI ...
- 2023-02-25：请用go语言调用ffmpeg，解码mp4文件并保存为YUV420SP格式文件，YUV420P不要转换成YUV420SP。
2023-02-25:请用go语言调用ffmpeg,解码mp4文件并保存为YUV420SP格式文件,YUV420P不要转换成YUV420SP. 答案2023-02-25: 使用 github.com/ ...
- 2020-08-23：描述HTTPS和HTTP的区别。
福哥答案2020-08-23: 1.地址区别http:http://开头.https:https://开头. 2.默认端口区别http:端口80.https:端口443. 3.数据传输区别http:明 ...
- 2020-11-27：go中，map的读流程是什么？
福哥答案2020-11-27:[答案来自此链接:](https://www.bilibili.com/video/BV1Nr4y1w7aa?p=12)源码位于runtime/map.go文件中的map ...
- 2021-07-19：给定一个正数N，比如N = 13，在纸上把所有数都列出来如下： 1 2 3 4 5 6 7 8 9 10 11 12 13，可以数出1这个字符出现了6次，给定一个正数N，如果把1
2021-07-19:给定一个正数N,比如N = 13,在纸上把所有数都列出来如下: 1 2 3 4 5 6 7 8 9 10 11 12 13,可以数出1这个字符出现了6次,给定一个正数N,如果把1 ...
- Django4全栈进阶之路22 项目实战（三种方式开发部门管理）：方式三：FBV+ModelForm+get_object_or_404
1.视图 @login_required def department_list_view(request): departments = Department.objects.all() retur ...
- vue全家桶进阶之路21：Vue Loader 打包单位件组件
Vue Loader 是一个 webpack 插件,它允许在单个文件中定义 Vue 组件,并将其包装为 CommonJS 模块,以便在应用程序中使用.使用 Vue Loader 打包的组件被称为单文件 ...
- 【GiraKoo】Riters瑞特斯闹钟说明书
对于闹钟这种按钮存在大量复用,长按操作的设备.说明书一旦丢失,真的很麻烦. 特准备了一个系列,专门保存使用说明书.希望能给大家提供一点帮助. 型号:RTS-1909