Vue的生命周期钩子

最新推荐文章于 2022-11-20 21:26:21 发布

每一天，每一步

最新推荐文章于 2022-11-20 21:26:21 发布

阅读量62

点赞数

分类专栏： Vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/u010234868/article/details/120079731

版权

Vue 专栏收录该内容

122 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <App></App>
    </div>

    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
      Vue.component('Test', {
        data() {
          return {
            msg: 'hello world',
            data: {}
          };
        },
        template: `
          <div>
            <h2>{{msg}}</h2>  
            <button @click="clickHandler">改变</button>
          </div>
        `,
        methods: {
          clickHandler() {
            this.msg = 'hello Vue';
          }
        },
        beforeCreate() {
          // 组件创建之前
          console.log(this); // 实例被创建
          console.log(this.msg); // 数据未拿到 undefined
        },
        created() {
          // 组件创建之后
          // 可以操作后端数据，数据驱动视图
          // 应用：ajax请求
          // $.ajax({
          //   type:'get',
          //   url:'',
          //   success:(data)=>{
          //     this.data = data;
          //   }
          // });
          console.log(this.msg); // hello world
        },
        beforeMount() {
          // 挂载数据到DOM之前调用
          console.log(document.getElementById('app'));
        },
        mounted() {
          // 挂载数据到DOM之后调用
          console.log(document.getElementById('app'));
        },
        beforeUpdate() {
          // 更新DOM之前，获取原始DOM
          console.log(document.getElementById('app').innerHTML);
        },
        updated() {
          // 更新DOM之后，获取最新DOM
          console.log(document.getElementById('app').innerHTML);
        },
        beforeDestroy() {
          console.log('beforeDestroy');
        },
        destroyed() {
          console.log('destroyed');
        },
        activated() {
          console.log('组件被激活了');
        },
        deactivated() {
          console.log('组件被停用了');
        }
      });
      var App = {
        data() {
          return {
            isShow: true
          };
        },
        template: `
          <div class="app">
            <!-- 失活的组件将会被缓存！防止重复渲染-->
            <keep-alive>
              <Test v-if="isShow" />
            </keep-alive>
            <button @click="isShow = !isShow">改变生死</button>
          </div>
        `
      };
      new Vue({
        el: '#app',
        data() {
          return {};
        },
        components: {
          App
        }
      });
    </script>
  </body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的生命周期钩子

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
复制链接

扫一扫

专栏目录