04: vue生命周期和实例属性和方法
1.1 组件的生命周期
1、说明
1. Vue将组件看成是一个有生命的个体，跟人一样，定义了各个阶段，
2. 组件的生命周期：组件的创建过程
3. 组件生命周期钩子函数：当组件处在某个阶段，要执行某个方法，来通知我们，组件进入某个阶段，这个方法就是组件生命周期的钩子函数
4. 组件的创建过程：这些方法在组件中直接定义，会按照顺序执行，没有参数，作用域都是组件实例化对象
2、组件生命周期中依次执行的八个钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
</head>
<body>
<div id="app">
<Home></Home>
</div> <script src="vue.js"></script>
<script>
var Home = Vue.extend({
template:"<h1>I am h1!! 显示变量： {{msg}}</h1>",
data:function () {
return {
'msg':'I am msg'
}
}, // 方法1：组件实例被创建，组件属性计算之前，如data属性等
beforeCreate: function () {
console.log(111, this, arguments)
}, // 方法2：组件实例创建完成，属性已经绑定，但DOM还未生成，$el 属性还不存在
created: function () {
console.log(222, this, arguments)
}, // 方法3：模板编译/挂载之前
beforeMount: function () {
console.log(333, this, arguments)
}, // 方法4：模板编译/挂载之后（不保证组件已在document中）
mounted: function () {
console.log(444, this, arguments)
}, // 方法5：组件更新之前
beforeUpdate: function () {
console.log(555, this, arguments)
}, // 方法6：组件更新之后
updated: function () {
console.log(666, this, arguments)
}, // 方法9：组件销毁前调用
beforeDestory: function () {
console.log(777, this, arguments)
}, // 方法10：主键销毁后调用
destoryed: function () {
console.log(888, this, arguments)
}, // 方法7：组件被激活时调用（用的少）
// activated: function() {
// console.log(777, this, arguments)
// }, // 方法8：组件被移除时调用（用的少）
// deactivated: function () {
// console.log(888, this, arguments)
// }, }); Vue.component('home',Home); var app = new Vue({
el:'#app',
data:{
'isShow':true,
}
})
</script>
</body>
</html>
组件中八个钩子函数执行顺序
3、图片展示
4、组件生命周期 常用的两个过程
1）created： 实例已经创建完成，并且已经进行数据观测和事件配置
2）mounted：模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue生命周期</title>
<script src="js/vue.js"></script>
<script>
window.onload=function(){
let vm=new Vue({
el:'#itany',
data:{
msg:'welcome to itany'
},
methods:{
update(){
this.msg='欢迎来到南京网博！';
},
destroy(){
// this.$destroy();
vm.$destroy();
}
},
beforeCreate(){
alert('组件实例刚刚创建，还未进行数据观测和事件配置');
},
created(){ //常用！！！
alert('实例已经创建完成，并且已经进行数据观测和事件配置');
},
beforeMount(){
alert('模板编译之前，还没挂载');
},
mounted(){ //常用！！！
alert('模板编译之后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
},
beforeUpdate(){
alert('组件更新之前');
},
updated(){
alert('组件更新之后');
},
beforeDestroy(){
alert('组件销毁之前');
},
destroyed(){
alert('组件销毁之后');
}
});
}
</script>
</head>
<body>
<div id="itany">
{{msg}}
<br> <button @click="update">更新数据</button>
<button @click="destroy">销毁组件</button>
</div>
</body>
</html>
生命周期执行顺序
04: vue生命周期和实例属性和方法的更多相关文章
- Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡
上一篇:Vue系列(一):简介.起步.常用指令.事件和属性.模板.过滤器 一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 ...
- Vue生命周期，计算属性、方法、侦听器
vue实例和组件都有生命周期函数,beforeCreate()实例或组件没有被创建的时候执行的钩子函数:created()是实例或组件被创建完成的时候执行的钩子函 数:beforeMount()函数是 ...
- vue自带的实例属性和方法($打头)
Vue 实例内置了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = new Vue({ el: '#examp ...
- Vue生命周期 以及应用场景
首先一张官方图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子知乎上近日有人发起了一个 “react 是不是比 vue 牛皮,为什么?” 的问题,Vue.js 作者尤雨溪12月4日正面回应了该问题.以下是尤雨溪回复 ...
- vue生命周期以及vue的计算属性
一.Vue生命周期(vue实例从创建到销毁的过程,称为生命周期,共有八个阶段) 1.beforeCreate :在实例初始化之后,数据观测 (data observer) 和 event/watche ...
- Vue.js 生命周期、计算属性及侦听器
一.创建一个Vue实例 每个Vue应用都是使用Vue函数创建一个Vue实例.所有的Vue组件都是一个Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外). 数据和方法 当一个实例被创建后,它 ...
- vue生命周期的介绍
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 生命周期
一 vue的生命周期如下图所示(很清晰) 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE html> <h ...
随机推荐
- CentOS6.5 安装Storm集群
1.首先安装依赖包 [root@Hadoop-NN-01 ~]# yum install uuid* [root@Hadoop-NN-01 ~]# yum install libuuid [root@ ...
- Kotlin Linux下的环境搭建
Kotlin是JVM世界里的未来主宰,不管你信不信,我反正相信了! 好吧,如果你不糊涂,就跟着我一起学学吧,哈哈 一下载https://github.com/JetBrains/kotlin/rele ...
- iOS UI进阶-4.0 地图与定位
在移动互联网时代,移动app能解决用户的很多生活琐事,比如 导航:去任意陌生的地方 周边:找餐馆.找酒店.找银行.找电影院 在上述应用中,都用到了地图和定位功能,在iOS开发中,要想加入这2大功能 ...
- cocos JS for循环让精灵从屏幕中间往两边排列散开
//this.ShowImg[i] 需要排列什么就push加进数组里面,一个for循环计算即可 var size = this.ShowImg.length;var count = size; for ...
- UVa 202 Repeating Decimals(抽屉原理)
Repeating Decimals 紫书第3章,这哪是模拟啊,这是数论题啊 [题目链接]Repeating Decimals [题目类型]抽屉原理 &题解: n除以m的余数只能是0~m-1, ...
- Css预处理器---Less(二)
三.Less语法 (1)变量 //less代码 @nice-blue : #5B83AD; @light-blue : @nice-blue + #111; #header { color : @li ...
- Abp项目构建、swagger及代码生成器
前段时间在学习abp,在配置swagger时踩了不少坑,特此整理一下,方便同行参考.幸运的是又发现了神奇的代码生成器,分享下亲身经验. 觉得此博客非常有用的朋友可以在右侧赞助打赏下,非常感谢大家支持. ...
- Unity shader学习之阴影
Unity阴影采用的是 shadow map 的技术,即把摄像机放到光源位置上,看不到的地方就有阴影. 前向渲染中,若一光源开启了阴影,Unity会计算它的阴影映射纹理(shadow map),它其实 ...
- idea创建java的web项目
2. 3. 4. 5. 6. 步骤八: 点击那个倒立的三角形,然后点击Edit Configurations; 步骤八: 步骤九:配置tocat服务器 步骤十:哎,发现,我怎么就只有一个选项呀,art ...
- Python - 5.Exception Handling
From:http://interactivepython.org/courselib/static/pythonds/Introduction/ExceptionHandling.html Exce ...