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" ...
随机推荐
- “大屏，您好！” SONIQ声光揭新品“U•F•O”神秘面纱
作为全球第一批做互联网智能电视的传媒企业,SONIQ声光于4月22日在中国大饭店举行了盛大的新品发布会.其中的重头戏就是当天发布会上作为先锋部队入驻中国电视市场的"UFO".笔者作 ...
- file,path,uri互相转换
uri 转 file :File file = new File(new URI(uri.toString())); uri 转 path: Path path = Files.get(uri); f ...
- spring学习笔记四：spring常用注解总结
使用spring的注解,需要在配置文件中配置组件扫描器,用于在指定的包中扫描注解 <context:component-scan base-package="xxx.xxx.xxx.x ...
- derby数据库的了解及使用
derby数据库 一.简介 Derby 易于管理.当嵌入到客户机应用程序中时, Derby 系统不需要任何管理干预. Derby 是可嵌入的.应用程序可以将数据库管理系统( Database Mana ...
- Hello 2015
"Yeah It's on. " 前言 Hux 的 Blog 就这么开通了. 跳过废话,直接看技术实现 2015 年,Hux 总算有个地方可以好好写点东西了. 作为一个程序员, B ...
- win7/win8下vmware/VirtualBox虚拟网卡显示未识别网络的解决
http://blog.csdn.net/zengxianying/article/details/44017227
- 常见40个常用的js页面效果图
1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu= ...
- 我在linux的第一个C程序
今天在虚拟机装起了linux,根据大家学习所需要,可以安装自己喜欢的版本,我这里装的是centos 7.0版本,也正是学习的开始,现在来看看简洁大气的centos界面吧: 在centos编译C ...
- Mercurial 小结
基本操作 # 拉取 并 更新 pull pull && hg update # 撤销上一个命令(不能重复运行) hg rollback # 恢复到指定的 changeset hg st ...
- zepto.js和jquery.js函数比较有什么优点？
1.Zepto.js 是专门为现代智能手机浏览器退出的 Javascript 框架, 拥有和jQuery相似的语法, 但是和jQuery相比下来, 他有很多优点, 大小方面 , 压缩后的 zepto. ...