新浦京81707con > 功能介绍 > js_脚本之家,vue组件生命周期详解_vue

原标题:js_脚本之家,vue组件生命周期详解_vue

浏览次数:73 时间:2019-12-22

vue组件生命周期精解,vue生命周期详细解释

正文实例为大家享用了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组件生命周期的切实代码,供大家参谋,具体内容如下 分为4个等第: cr...

正文实例为我们享受了vue组件生命周期的切切实实代码,供大家参照他事他说加以考查,具体内容如下

正文实例解析了vue生命周期。分享给大家供我们参谋,具体如下:

create/mount/update/destroy

种种Vue实例都留存完整的生命周期,经验从创设、开头化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等大器晚成雨后冬笋进度。如下图所示

每贰个等第都对应着有谐和的管理函数

钩子函数

create: beforeCreate created

vue的欧洲经济共同体生命周期可分为八个品级:初阶化阶段、运维阶段和销毁阶段。共存在超级多钩子函数,他们在vue生命周期不一样的等第张开操作,列举如下:

mount: beforeMount mounted

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed beforeCreate

葡京赌场88807手机平台,update: beforeUpdate updated

透过new Vue(卡塔尔成立vue实例,vue的生命周期便拉开了开场,首先会实施beforeCreate钩子函数。那时的vue实例只是一个空壳,还未有挂载DOM成分,不恐怕访谈到多少和真诚的dom,日常不做操作。

依赖要更新的数据 做逻辑判别

created

destroy:beforeDestroy destroyed

其一时候曾经得以应用到数码,也足以改进数据,在那修改数据不会触发updated函数和不会触发别的钩子函数,通常能够在这里地做起来数据的拿走。

本文由新浦京81707con发布于功能介绍,转载请注明出处:js_脚本之家,vue组件生命周期详解_vue

关键词: 之家 详解 生命周期 脚本 小结

上一篇:字典,

下一篇:没有了