vue组件生命周期
分为4个阶段：
create/mount/update/destroy
每一个阶段都对应着有自己的处理函数
create: beforeCreate created
初始化
mount: beforeMount mounted
和挂载相关的处理
update: beforeUpdate updated
根据要更新的数据 做逻辑判断
destroy:beforeDestroy destroyed
清理工作
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--点击的时候isShow进行取反 -->
<button @click="isShow = !isShow">切换是否显示组件</button>
<my-component v-if="isShow"></my-component>
</div>
<script>
Vue.component("my-component",{
template:`
<div>
<button @click="handleClick">Click Me</button>
<h1>component:{{count}}</h1>
</div>
`,
data:function(){
return {
count:0
}
},
methods:{
handleClick:function(){
this.count++;
}
},
beforeCreate: function () {
console.log('准备创建组件');
},
created: function () {
console.log('组件创建完毕');
},
beforeMount: function () {
console.log('组件的模板准备挂载到DOM');
},
mounted: function () {
console.log('挂载完毕');
},
beforeUpdate: function () {
console.log('准备更新了');
},
updated:function(){
console.log('更新完成');
},
beforeDestroy: function () {
console.log('准备destroy');
},
destroyed: function () {
console.log('destroy完成');
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs",
isShow:true
}
})
</script>
</body>
</html>
生命周期练习，需要那阶段写那个阶段
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期练习</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
data:function(){
return {
myOpacity:0
}
},
template:` <h1 v-bind:style="{opacity:myOpacity}">透明度将改变
</h1>`,
mounted:function(){
setInterval(function(){
this.myOpacity += 0.1;
if(this.myOpacity>1){
this.myOpacity = 0;
}
}.bind(this),1000)
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue组件生命周期的更多相关文章
- Vue 组件生命周期钩子
Vue 组件生命周期钩子 # 1)一个组件从创建到销毁的整个过程,就称之为组件的生命周期 # 2)在组件创建到销毁的过程中,会出现众多关键的时间节点, 如: 组件要创建了.组件创建完毕了.组件数据渲染 ...
- vue组件生命周期详解
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法.这是因为箭头函数绑定了父上下文,因此this与你期 ...
- Vue ---- 组件文件分析 组件生命周期钩子 路由 跳转 传参
目录 Vue组件文件微微细剖 Vue组件生命周期钩子 Vue路由 1.touter下的index.js 2.路由重定向 3.路由传参数 补充:全局样式导入 路由跳转 1. router-view标签 ...
- vue 学习一 组件生命周期
先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期,而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeC ...
- vue父子组件生命周期执行顺序
之前写了vue的生命周期,本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程,以及各个生命周期的特点.然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事.然后写了一段 ...
- Vue父子组件生命周期执行顺序及钩子函数的个人理解
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- vue 源码详解（二）： 组件生命周期初始化、事件系统初始化
vue 源码详解(二): 组件生命周期初始化.事件系统初始化 上一篇文章 生成 Vue 实例前的准备工作 讲解了实例化前的准备工作, 接下来我们继续看, 我们调用 new Vue() 的时候, 其内部 ...
- Vue.JS快速上手（组件生命周期）
一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...
随机推荐
- Houdini：也许是你未曾听过的最振奋人心的 CSS 进化
原文链接:Houdini: Maybe The Most Exciting Development In CSS You’ve Never Heard Of更多译文将陆续推出,欢迎点赞+收藏+关注我的 ...
- 封装class类--不分割类名
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用eclipse怎么打war包？
用eclipse怎么打war包? 在服务器上部署很多都是用war包进行部署的,eclipse是很友好的支持把java项目打成war包的,下面就把打war的经验写出来,供大家参考 百度经验:jingya ...
- 学习MyBatis时报的错
初学MyBatis第一天跟着敲代码,一直报错,报错到崩溃,错误如下 org.apache.ibatis.exceptions.PersistenceException: ### Error query ...
- PHP程序员要看的书单
想提升自己,还得多看书!多看书!多看书! 下面是我收集到的一些PHP程序员应该看得书单及在线教程,自己也没有全部看完.共勉吧! Github地址:https://github.com/52fhy/ph ...
- CodeMix使用教程：构建自定义DevStyle主题
[MyEclipse CI 2019.4.0安装包下载] DevStyle主题允许开发人员自定义工作台,无论是喜欢带有明亮图标的浅色背景还是带有柔和色彩的神色背景,开发人员都可以将工作台调整到适合的色 ...
- 使用logrotate轮询nginx和apache日志
使用logrotate轮询nginx和apache日志 文章目录 [隐藏] 配置nginx 配置apache 使用logrotate轮询日志很方便,配置也很简单. 配置nginx 1.建立/e ...
- CSS3——制作正在加载页面loading...
今天做了好多小东西,还挺开心的~ <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 【leetcode】581. Shortest Unsorted Continuous Subarray
题目如下: 解题思路:本题我采用的是最简单最直接最粗暴的方法,把排序后的nums数组和原始数组比较即可得到答案. 代码如下: /** * @param {number[]} nums * @retur ...
- C#删除文件夹的文件
using System.IO; //判断文件是不是存在if(File.Exists(@"文件路径")){//如果存在则删除File.Delete(@"文件路径" ...