zoukankan      html  css  js  c++  java
  • vue的生命周期(钩子函数)

    <template>
        <header v-on:click="changetitle">
            <h1>{{title1}}{{title}}</h1>
        </header>
    </template>
    
    <script>
    export default {
     name: 'app-header',
      props:{
        title:{
          type:String,
          
        }
      },
     data(){
        return {
            title1: 'Vue.js Demo'
        }
     },
     components: {
    
     },
      methods:{
        changetitle:function () {
          //this.title='changed!'
          this.$emit('titlechanged','子向父组件传值')
        }
      },
      beforeCreate() {
        alert('组件实例化之前执行的函数!')
      },
      created() {
       alert('组件实例化完毕但是页面还未显示!')
      },
      beforeMount() {
       alert('组件挂载前,页面仍未展示,但是虚拟dom已经配置!')
      },
      mounted() {
       alert('组件挂载后,此方法执行后,页面显示!')
      },
      beforeUpdate() {
       alert('组件更新前,页面仍未更新,但是虚拟dom已经配置!')
      },
      updated() {
       alert('组件更新,此方法执行后,页面显示!')
      },
      beforeDestroy() {
       alert('组件销毁前!')
      },
      destroyed() {
       alert('组件销毁!')
      }
    
    
    }
    </script>
    
    <style scoped>
    header {
        background-color: lightgreen;
        padding: 10px;
    
    }
    h1 {
        color: #222 ;
        text-align: center;
    }
    </style>
    

      

  • 相关阅读:
    Java
    Java
    Python 浮点数类型的精度问题
    Ubuntu下pip的更新问题
    初章
    第二次结对编程作业
    第一次结对编程作业
    Shengnan的《构建之法》读书笔记
    Backend事后诸葛亮
    ASE Alpha Sprint
  • 原文地址:https://www.cnblogs.com/randomlee/p/10368076.html
Copyright © 2011-2022 走看看