zoukankan      html  css  js  c++  java
  • Vue: 生命周期

    <!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>
  • 相关阅读:
    2020/4/15
    2020/4/14
    2020/4/13
    2020/4/12
    2020/4/11
    2020/4/9
    PTA录入数据库题目流程
    PTA录题
    2020/4/8
    如何把mysql workbench的数据结构和数据导出到sql表中
  • 原文地址:https://www.cnblogs.com/ycherry/p/11208055.html
Copyright © 2011-2022 走看看