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" ...
随机推荐
- be accustomed to doing|actual |acute|adapt |
Sometimes you've got to play a position that you're not accustomedto for 90 minutes, " he said. ...
- ArcGIS Server10.2忘记密码怎么办？重置ArcGIS Server Manager密码
忘记了ArcGIS Server Manager的密码不要慌张,下面简单的几步就可以重置密码. 第一步:找到ArcGIS Server的安装目录,然后找到..\ArcGIS\Server\tools\ ...
- OpenCV 基本的阈值操作
#include "opencv2/imgproc/imgproc.hpp" #include "opencv2/highgui/highgui.hpp" #i ...
- Qt OpenCV::Mat与Qt::QImage相互转换
Mat转QImage QImage mat2qim(Mat & mat) { cvtColor(mat, mat, COLOR_BGR2RGB); QImage qim((const unsi ...
- stress施压案例分析——cpu、io、mem【命令分析】
stress施压命令分析 一.stress --cpu 1 --timeout 600 分析现象?负载为啥这么高?top命令查看用户进程消耗的cpu过高(stress进程消耗的) 分析现象,可以看出 ...
- 吴裕雄--天生自然HTML学习笔记：HTML <div> 和<span>
HTML <div> 和<span> HTML 可以通过 <div> 和 <span>将元素组合起来. HTML 区块元素 大多数 HTML 元素被定义 ...
- 后端开发中，可以在Cache-Control设置的常用指令
max-age 该指令指定从当前请求开始,允许获取的响应被重用的最长时间(单位为秒.例如:Cache-Control:max-age=60表示响应可以再缓存和重用 60 秒.需要注意的是,在max-a ...
- Bar条形图
import matplotlib.pyplot as plt import numpy as np n = 12 X = np.arange(n) Y1 = (1 - X / float(n)) * ...
- OpenGL Panorama Player
JMGL_PANO star_war_eve source 1 star_war_eve source 2 1. 介绍 JMGL_PANO 是Justin开源的一个全景视频播放器(Github).基于 ...
- 招聘，api、app、web自动化，性能，持续集成，其他
招聘: api接口自动化测试 app功能自动化测试 web功能自动化测试 性能测试 自动化平台与持续集成 其他