vue组件生命周期详解


Posted in Javascript onNovember 07, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
JavaScript 放大镜 放大倍率和视窗尺寸
May 09 Javascript
js中有关IE版本检测
Jan 04 Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 Javascript
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
关于uniApp editor微信滑动问题
Jan 15 Javascript
Angular2的管道Pipe的使用方法
Nov 07 #Javascript
浅谈react 同构之样式直出
Nov 07 #Javascript
vue组件watch属性实例讲解
Nov 07 #Javascript
vue2+el-menu实现路由跳转及当前项的设置方法实例
Nov 07 #Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 #Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 #Javascript
浅谈mint-ui 填坑之路
Nov 06 #Javascript
You might like
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
JavaScript 实现??打印?理
2007/04/28 Javascript
jQuery chili图片远处放大插件
2009/11/30 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
canvas实现十二星座星空图
2017/02/14 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
Vue实现简易购物车页面
2020/12/30 Vue.js
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
python中的装饰器详解
2015/04/13 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python cv2 图像自适应灰度直方图均衡化处理方法
2018/12/07 Python
详解Python字典的操作
2019/03/04 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python ubplot使用方法解析
2020/01/10 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
新媒传信软件测试面试题
2013/02/24 面试题
2014七年级班主任工作总结
2014/12/05 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
公司与个人合作协议书
2016/03/19 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
给numpy.array增加维度的超简单方法
2021/06/02 Python