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>
  • 相关阅读:
    tcpdump 筛选抓包
    TCP拥塞避免
    【转载】TCP协议
    go 参数传递的是值还是引用 (转)
    go 数组指针 指针数组
    go 协程
    go 接口实现
    go函数可见性
    go 继承
    go 结构体函数
  • 原文地址:https://www.cnblogs.com/ycherry/p/11208055.html
Copyright © 2011-2022 走看看