Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
第4节 Vue的生命周期（钩子函数）
Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。
其实在Vue的官网有一张图已经很好的诠释了生命周期，直接贴图，然后上程序代码。
直接来看一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>生命周期</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>生命周期</h1>
<hr>
<div id="app">
{{count}}
<p><button @click="add">add</button></p>
</div>
<button onclick="app.$destroy()">销毁</button>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
count:1
},
methods:{
add:function(){
this.count++;
}
},
beforeCreate:function(){
console.log('1-beforeCreate 初始化之前');
},
created:function(){
console.log('2-created 创建完成');
},
beforeMount:function(){
console.log('3-beforeMount 挂载之前');
},
mounted:function(){
console.log('4-mounted 被挂载之后');
},
beforeUpdate:function(){
console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
console.log('6-updated 被更新后');
},
activated:function(){
console.log('7-activated');
},
deactivated:function(){
console.log('8-deactivated');
},
beforeDestroy:function(){
console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){
console.log('10-destroyed 销毁之后')
}
})
</script>
</body>
</html>
同样的，试验一下：
点击add按钮后：
点击销毁后：
Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）的更多相关文章
- vue之生命周期钩子函数之运用
一.什么是生命周期钩子函数: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等.同时在这个过程中也会运行 ...
- vue的生命周期钩子函数
一.vue生命周期图示 二.钩子函数执行时间 beforeCreate 在创建实例之前,data只声明但没有赋值 在实例初始化之后,数据观测 (data observer) 和 event ...
- vue.js生命周期钩子函数及缓存
在使用vue.js进行开发时,使用最多的就是created.mounted.activated. 由于有些情况下,我们需要复用某些组件,因此需要用到keep-alive. 当引入keep-alive时 ...
- VUE的生命周期——钩子函数
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- 关于 vue 生命周期 钩子函数 事件
vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染->更新->渲染.卸载等一系列过程,我们称这是vue的生命周期. 通俗的将就是vue实例从创建到销毁 ...
- Vue 2.0 生命周期-钩子函数理解
Vue 2.0 + 生命周期钩子在项目过程中经常用到,所以闲下来整理了下,直接复制下面的实例运行: <!DOCTYPE html> <html lang="en" ...
随机推荐
- [LC] 253. Meeting Rooms II
Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] (si ...
- python循环删除list中的元素
直接上例子: a = [1,2,3,4,5,6] for i in a: a.remove(i) print(a) 返回:[2, 4, 6] 循环a,想删除a的所有元素,但实际确有数据保留了下来,这是 ...
- pycharm中无法导入pip安装的包
https://blog.csdn.net/mdxiaohu/article/details/82430060 2020.1.20 练习通过python操作数据库的时候需要导入一个包,因为看代码写的是 ...
- html和jsp页面中把文本框禁用，只能读不能写的方法
方法常用有三种: 第一种,使用 onfocus="this.blur()" <input name="deptno" type="text& ...
- tf.estimator
estimator同keras是tensorflow的高级API.在tensorflow1.13以上,estimator已经作为一个单独的package从tensorflow分离出来了.estimat ...
- Python---13面向对象编程
一.类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法, ...
- Mysql数据导出到excel-基于python
阅读本文大概需要 6分钟. 数据除了在测试平台显示,有时候也会习惯用excel以及邮件展示,那么我们可以在测试平台上加一个导出excel功能,方便操作,下面介绍主要代码以及逻辑. 使用操作数据库的py ...
- Job Shop
flow shop: 如果每个作业需要在每个处理机上加工,而且每个作业的工序也相同,即在处理机上加工的顺序相同,则这种多类机的环境称为同顺序作业或流水作业. job shop: 如果每个作业需要在每个 ...
- 重大改革！Python，最接近人工智能的语言~将被加入高考科目！
就在前几天,和一位浙江省高校的信息技术老师聊天,我得到了一个震惊的消息: 明年,浙江省信息技术教材将不会在使用晦涩难懂的VB语言,而是改学更简单易懂的Python语言.也就是说, Python语言将纳 ...
- CSS 技巧汇总
CSS 选择符优先级 !important 声明>内联样式(style)>id 选择符(#id)>类选择符(.class)＝伪类选择符(:hover )＝属性选择符([attr] ) ...