vue組件生命週期

<

!doctype html>

<html>

 <head>

 <meta charset="UTF-8">

 <title>生命周期title>

 <script src="js/vue.js">script>

 head>

 <body>

 <div id="container">

  <p>{{msg}}p>

  <button @click="isShow = !isShow">切换是否显示组件button>

  <my-component v-if="isShow">my-component>

 div>

 <script>

  Vue.component("my-component",{

   template:`

     <div>

      <button @click="handleClick">Click Mebutton>

      <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>

转载于:https://my.oschina.net/u/3669210/blog/1648033

你可能感兴趣的:(javascript)