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的应用 ...
随机推荐
- JAVA中自定义properties文件介绍
Gradle中的使用 1. 使用gradle.properties buid.gradle 和 gradle.properties可以项目使用,在同一个项目中,build.gradle可以直接获取其同 ...
- Linux 解决E: Sub-process /usr/bin/dpkg returned an error code (1)错误
在用apt-get安装软件时出现了类似于 install-info: No dir file specified; try --help for more information.dpkg: 处理 g ...
- Vue Google浏览器插件 Vue Devtools无法使用的解决办法
1.插件安装不必多说 一定要用Vue.js 开发版 Vue.min.js 在控制面板就不会显示 2.本地调试 用的是file://协议 修改插件允许访问文件网址 打上对勾
- Gcc如何知道文件类型。
Linux系统不区分扩展名,但是GCC编译器通过扩展名区分. GCC是根据扩展名来编译源文件的.
- Spring基础13——Spring表达式语言：SpEL
1.SpEL简介 Spring表达式语言(简称SpEL):是一个支持运行时查询和操作对象图的强大的表达式语言.语法上类似于EL:SpEL使用#{...}作为界定符,所有在大框号中的字符都将被认为是Sp ...
- PAT Advanced 1007 Maximum Subsequence Sum (25 分)
Given a sequence of K integers { N1, N2, ..., NK }. A continuous subsequence is defined to ...
- Codeforces 913 二进制背包(柠檬水) 暴力贪心特殊背包(选题)
A B C 给你N(N<=30)种水瓶每种水瓶有无限个 每个的体积是2^(i-1)价格是cost[i] 要求你花最少的钱弄出L体积的水 先从前到后扫一遍cost[i+1]=min(cost[i+ ...
- Python 基本数据类型详解
1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647在64位系统上,整数的位数为64位,取值范围为-2* ...
- App开发工具
软件下载: 链接:https://pan.baidu.com/s/1yaAko1svHW3v3kdn6mSgxQ提取码:rrcd 参考文档地址: http://dev.dcloud.net.cn/mu ...
- 关于softmax稳定性问题
因为softmax中指数函数,很容易超出计算机表达的最大值,所以采用分子分母同时乘N的方法,N一般为最大值.