Vue语法

1 生命周期

<template>
    <div id="app1">
        <h1>{{title}}</h1>
        <button @click="randowTitle()">改变title</button>
        <button @click="destoryVm()">销毁实例</button>
    </div>
</template>

<script type="text/javascript">
    export default{
        name:"app1",
        data:function(){
            return {title:"hello"};
        },
        methods:{
           randowTitle:function(){
               this.title='hello' +['China','World','Universe'][Math.floor(Math.random()*2.999)]
           },
           destoryVm:function(){
               this.$destroy();
           }
        },
        beforeCreate(){
            console.log('before create')
        },
        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>