Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
​
​
<div id="app" class="text-center">
  <h3>Let's check out the lifecycle of this hur' child.</h3>
  <h4>Check the console!</h4>
  
  <button @click="toggleShow" class="btn btn-primary">
    <span v-if="isShowing">Hide child</span>
    <span v-else>Show child</span>
  </button>
  
  <hr>
  
  
  <!-- 無使用 keep-alive -->
  <!-- <app-child v-if="isShowing"></app-child> -->
  
  
  <!-- 使用 keep-alive -->
  <keep-alive>
    <app-child v-if="isShowing"></app-child>
  </keep-alive>
  
</div>
​
​
  
<script type="text/x-template" id="childarea">
  <div>
    <h4>Hello! {{ text }}</h4>
    <input type="text" class="form-control" v-model="text">
  </div>
</script>
  
  <!-- development version, includes helpful console warnings -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
​
</body>
</html>
 
const Child = {
  template: '#childarea',
  data: function () {
    return {
      text: 'Vue data 資料狀態'
    }
  },
  beforeCreate() {
    console.log(`beforeCreate! ${this.text}`);
  }, 
  created() {
    alert(`created! ${this.text}`);
  }, 
  beforeMount() {
    alert(`beforeMount! ${this.text}`);
  }, 
  mounted() {
    alert(`mounted! ${this.text}`);
  },
  updated () {
    console.log(`updated! ${this.text}`);
  },
  activated () {
    alert(`activated! ${this.text}`);
  },
  deactivated () {
    alert(`deactivated! ${this.text}`);
  },
  beforeDestroy() {
    console.log(`beforeDestroy! ${this.text}`);
  }, 
  destroyed() {
    console.log(`destroyed! ${this.text}`);
  }
};
​
new Vue({
  el: '#app',
  data() {
    return {
      isShowing: false 
    }
  },
  methods: {
    toggleShow() {
      this.isShowing = !this.isShowing;
    }
  },
  components: {
    appChild: Child
  }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers