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

    生命周期函数:
      组件挂载,以及组件更新,组建销毁的时候出发的一系列方法。
      beforeCreate:实例创建之前
      created:实例创建完成
      beforeMount:模板编译之前
      mounted:模板编译完成。请求数据,操作dom放在这
      beforeUpdate:数据更新之前
      updated:数据更新完毕
      beforeDestory:实例销毁之前。页面销毁的时候保存一些数据
      destoryed:实例销毁完成

    示例代码:

    App.vue

    <template>
      <div id="app">
        <v-home v-if="flag"></v-home>
        <button @click="flag=!flag">更改v-home展示</button>
      </div>
    </template>
    
    <script>
    import Home from "./components/Home.vue";
    export default {
      name: "app",
      data() {
        return {
          flag: true
        };
      },
      components: {
        "v-home": Home
      }
    };
    </script>
    
    <style lang="scss">
    </style>

    components/Home.vue

    <template>
    <div>
        {{title}}
        <input v-model="title"/>
    </div>
    </template>
    <script>
    export default {
      data() {
        return {
          title: "我是Home组件"
        };
      },
      beforeCreate() {
        console.log("实例创建之前");
      },
      created() {
        console.log("实例创建完成");
      },
      beforeMount() {
        console.log("模板编译之前");
      },
      mounted() {
        console.log("模板编译完成");
      },
      beforeUpdate() {
        console.log("数据更新之前");
      },
      updated() {
        console.log("数据更新完毕");
      },
      beforeDestroy() {
        console.log("实例销毁之前");
      },
      destroyed() {
        console.log("实例销毁完成");
      }
    };
    </script>
    <style>
    </style>
  • 相关阅读:
    struts2+jpa+spring 泛型版小结
    PasswordEncoder
    父窗口 子窗口
    Powerdesigner的PDM(物理数据模型)生成数据库及逆向工程(将现有的数据库生成PDM)
    js 正则表达式
    <aop:config>
    CJDBC
    struts2取值
    mysql启动错误1067的解决
    杂碎
  • 原文地址:https://www.cnblogs.com/chenyishi/p/9160680.html
Copyright © 2011-2022 走看看