2018年8月19日

1 定义组件

在src下新建components目录，里面新建文件Lead.vue

<template>
    <div>
        <h2 class='tt'>
            {{msg}}
        </h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am msg from Lead component'
        }
    }
}
</script>
<style scoped>
.tt{
    font-size: 10px;
    color: red;
    background-color:blue;
}
</style>

2 在App.vue中引用组件lead

<template>
  <div id="app">
     <v-lead></v-lead>
  </div>
</template>

<script>
import Lead from "./components/Lead.vue";

export default {
  name: "app",
  data() {
    return {
      thing: "thing1",
      list:[]
    }
  },
  methods:{

  },
  mounted(){

  },
  components:{
    'v-lead':Lead
  }

};
</script>

<style>

</style>

3 组件里属性的生命周期

比如css-style里面用scoped标签表示这个属性只在这个组件里面有效而不影响全局

4 组件的生命周期函数 (Lead.vue组件里定义，创建前后，挂载前后，更新前后，销毁前后，一共8个函数，其中mounted和beforeDestory比较常用）

<template>
    <div id='test'>
        <h2 class='tt'>
            {{msg}}
        </h2>
    </div>
</template>

<script>
export default {
    data(){
        return {
            'msg':'I am a msg from Lead component'
        }
    },
    methods:{},
    beforeCreate() {
                console.log('beforeCreate 创建前状态===============》');

        },
    created() {
            console.log('created 创建完毕状态===============》');

        },
    beforeMount() {
            console.log('beforeMount 挂载前状态===============》');

        },
    mounted() {
            console.log('mounted 挂载结束状态===============》');
        },
    beforeUpdate() {
            console.log('beforeUpdate 更新前状态===============》');
        },
    updated() {
            console.log('updated 更新完成状态===============》');
        },
    beforeDestroy() {
            console.log('beforeDestroy 销毁前状态===============》');
        },
    destroyed() {
            console.log('destroyed 销毁完成状态===============》');
        }    

}
</script>

<style scoped>
.tt{
    font-size: 10px;
    color: red;
    background-color:blue;
}
</style>

App.vue

<template>
  <div id="app">
     <v-lead v-if='flag'></v-lead><hr><br>
     <button @click="flag=!flag">testbutton</button>
  </div>
</template>

<script>
import Lead from "./components/Lead.vue";
export default {
  name: "app",
  data() {
    return {
      flag:true,
    }
  },
  components:{
    'v-lead':Lead
  }

};
</script>

标签：vue