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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
js substring从右边获取指定长度字符串(示例代码)
Dec 23 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
Angular 4依赖注入学习教程之简介(一)
Jun 04 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
Node.js API详解之 net模块实例分析
May 18 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
JavaScript实现原型封装轮播图
Dec 27 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
实现树状结构的两种方法
2006/10/09 PHP
php循环输出数据库内容的代码
2008/05/24 PHP
PHP实现时间轴函数代码
2011/10/08 PHP
如何使用php判断服务器是否是HTTPS连接
2013/07/05 PHP
浅谈PHP中其他类型转化为Bool类型
2016/03/28 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
javascript中的关于类型转换的性能优化
2010/12/14 Javascript
node.js超时timeout详解
2014/11/26 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
2016/12/12 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
python里将list中元素依次向前移动一位
2014/09/12 Python
python比较两个列表是否相等的方法
2015/07/28 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
python制作填词游戏步骤详解
2019/05/05 Python
python如何实现DES加密
2020/09/21 Python
美国第一香水网站:Perfume.com
2017/01/23 全球购物
explicit和implicit的含义
2012/11/15 面试题
电气专业应届生求职信
2013/11/01 职场文书
保护环境倡议书100字
2014/05/19 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
个人先进事迹总结
2015/02/26 职场文书
创先争优个人总结
2015/03/04 职场文书
八年级作文之友情
2019/11/25 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript