码迷,mamicode.com
首页 > 其他好文 > 详细

Vue: 生命周期

时间:2019-07-18 16:39:04      阅读:62      评论:0      收藏:0      [点我收藏+]

标签:https   this   title   调用   unp   更新   created   src   rem   

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <h1>{{title}}</h1>
    <button @click="title = ‘changed‘">Update title</button>
    <button @click="destory">Destory</button>
  </div>
  <script>
    new Vue({
      el: ‘#app‘,
      data: {
        title: ‘Vuejs instance‘
      },
      methods: {
        destory: function() {
          this.$destory();
        }
      },
      // 初始化的时候调用,调用顺序为:beforeCreate-> created-> beforeMount -> mounted
      beforeCreate: function() {
        console.log(‘before created called‘);
      },
      created: function() {
        console.log(‘created called‘);
      },
      beforeMount: function() {
        console.log(‘beforeMount called‘);
      },
      mounted: function() {
        console.log(‘mounted called‘);
      },
      // beforeUpdate/updated data更新的时候调用,如果数据不更新,则不调用
      beforeUpdate: function() {
        console.log(‘beforUpdate called‘);
      },
      updated: function() {
        console.log(‘updated called‘);
      },
      // destory调用以后,所有的data不再受vuejs控制,意思是destory以后所有的方法都不再有用,移除了所有的js逻辑
      beforeDestory: function() {
        console.log(‘befor destory called‘);
      },
      destoryed: function() {
        console.log(‘destoryed called‘);
      }
    });
  </script>
</body>

</html>

 

Vue: 生命周期

标签:https   this   title   调用   unp   更新   created   src   rem   

原文地址:https://www.cnblogs.com/ycherry/p/11208055.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!