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" ...
随机推荐
- worship|spurs|drowns out|frauds|expell|spray with|deposit|moist|gave a sigh
to have or show a strong feeling of respect and admiration for God or a god 敬奉,崇拜,信仰(上帝或神) On the is ...
- 一次完整的HTTP请求响应过程（很详细）
一. HTTP请求和响应步骤 图片来自:理解Http请求与响应 以上完整表示了HTTP请求和响应的7个步骤,下面从TCP/IP协议模型的角度来理解HTTP请求和响应如何传递的. 二.TCP/IP协 ...
- asp.net mvcview界面does not contain a definition
在cshtml使用linq操作数据集,自动补全是可以使用Select,但是一直提示System.Collection.GenericList' does not contain a definitio ...
- apache和tomcat的关系
apache和tomcat的关系: 举个例子:apache是一辆卡车,上面可以装一些东西如html等.但是不能装水,要装水必须要有容器(桶),tomcat就是一个桶(装像JAVA这样的水),而这个桶也 ...
- Linux那些事——GTK+, Qt, Gnome, KDE, xWindow, xOrg区别
Linux那些事--GTK+, Qt, Gnome, KDE, xWindow, xOrg区别 Linux不仅内核开源,系统配置也是高度可定制化的,其中就包括我们所熟知的图形界面,从桌面环境,主题,字 ...
- windows下的tfjs-node安装异常总结
大约有半年没有写博客了,奔波于上海这座魔都之中.险些忘了自己是个有梦想的全栈工程师 书接上回,由于个人非常厌恶python的语法,半年前发现了tensorflow.js这个宝贝(下简称tfjs),喜出 ...
- JAVA 获取网页源代码保存到本地文件
package httpget; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFoundExce ...
- 一站式自动化测试平台 http://www.Autotestplat.com
Autotestplat 一站式自动化测试平台及解决方案 自动化平台开发 3.1 自动化平台开发方案 3.1.1 功能需求 支持 API.AppUI.WebUI 性能等自动化测试,集成实现测试用例管理 ...
- Promise 的含义
Promise 的含义 Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大.它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Pro ...
- iOS多线程开发之GCD（基础篇）
总纲: GCD基本概念 GCD如何实现 GCD如何使用 队列和任务组合 一.GCD基本概念 GCD 全称Grand Central Dispatch(大中枢队列调度),是一套低层API,提供了⼀种新的 ...