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的生命周期... 其实我的心中是有那张图的,但是 ...
随机推荐
- AspNetCore 成长杂记(一):JWT授权鉴权之生成JWT(其二)
引子 前面说了用第三方类库生成JWT的故事,给我带来了很大的方便,并且我也承诺要写一篇用常规方法生成JWT的文章(一般都是用微软官方的类库),因此才有了这篇文章. 另外,在前面的文章中,我要纠正一下一 ...
- 在vue标签代码块中定义变量
方式一: 在标签上使用:set关键字,不管什么标签都可以 <template> <h1>test</h1> <template :set="firs ...
- vue全家桶进阶之路15：自定义指令
Vue 2.x 中的自定义指令是一种可以用于扩展 Vue.js 核心功能的特性.指令可以用于操作 DOM 元素的属性.监听 DOM 事件.控制 DOM 行为等等,可以将常见的交互行为封装成指令,从而让 ...
- url函数
url() 函数看起来的格式象:url(r^/account/$', views.index, name=index),它可以接收四个参数,分别是两个必选参数:regex.view 和两个可选参数:k ...
- 【GiraKoo】Android Studio控制台乱码
[GiraKoo]Android Studio控制台乱码 启动Android Studio进行编译时,可能会遇到控制台出现异常的乱码. 本文介绍该情况的解决方案. ����: δ������쳣���� ...
- AcWing 1023. 买书
小明手里有n元钱全部用来买书,书的价格为10元,20元,50元,100元. 问小明有多少种买书方案?(每种书可购买多本) 输入格式 一个整数 n,代表总共钱数. 输出格式 一个整数,代表选择方案种数. ...
- 2022年第十四届四川省大学生程序设计大赛 A
A Adjacent Swapping 题意: 给定一个字符串,每次可以移动相邻字符,求最小移动次数可以把它变成s+s这样左右两边相同的字符串. 思路: 1:我们知道他一定是偶数长度,所以我们把字符串 ...
- java开发学习框架
Java基础 1.1. Java简介与安装 1.2. Java基本语法 1.3. 数据类型与变量 1.4. 运算符与表达式 1.5. 流程控制(分支与循环) 1.6. 数组 面向对象编程 2.1. 类 ...
- Java笔试真题及参考答案
题目 使用Swing实现一个窗口程序,窗口包括一个菜单栏,请按以下要求实现相应功能. (1)窗口标题为"GUI程序",大小为400X300, 居中显示:窗口上有一个面板,面板背景色 ...
- Python爬虫————泉州二手房数据爬取和数据可视化
1.选题的背景 我本次的主题是泉州二手房房价的调查分析. 首先通过爬虫采集链家网上所有二手房的房源数据,并对采集到的数据进行清洗:然后,对清洗后的数据进行可视化分析,探索隐藏在大量数据背后的规律:将这 ...