vuejs 2 生命周期钩子函数 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue LifeCircle Hooks</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <button style="border:1px red solid" @click="change_message">change message</button>
        <b>{{newMessage}}</b>
    </div>
     <script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
     <script>
        var vue = new Vue({
            el:'#app',
            data:{
                message:'hello,world'
            },
            methods:{
                //用es6 语法省略:function
                change_message(){
                    this.message='I am changed'
                }
            },
            //life circle hooks
            beforeCreate:function(){
                console.log('=======before create')
                console.log(this.message)
                console.log(this.$el)
            },
            created:function(){
                console.log('=======created')
                console.log(this.message)
                console.log(this.$el)
            },
            beforeMount:function(){
                console.log('=======beforeMount')
                console.log(this.message)
                console.log(this.$el)
            },
            mounted:function(){
                console.log('=======mounted')
                console.log(this.message)
                console.log(this.$el)
            },
　　　　　　　//频繁调用
            beforeUpdate:function(){
                console.log('=======beforeUpdate')
                console.log(this.message)
                console.log(this.$el)
            },
　　　　　　　//频繁调用
            updated:function(){
                console.log('=======updated')
                console.log(this.message)
                console.log(this.$el)
            },
            beforeDestory:function(){
                console.log('=======beforeDestory')
                console.log(this.message)
                console.log(this.$el)
            },
            destoryed:function(){
                console.log('=======destoryed')
                console.log(this.message)
                console.log(this.$el)
            },
            watch:{
                message(newValue,oldValue){
                    console.log(oldValue + '==>' + newValue)
                }
            },
            computed:{
                newMessage(){
                    return this.message + ' balabala'
                }
            }
        })

        //另外一种写法 打印的顺序不一样 这个改变在中间
        // vue.$watch('message',function(newValue,oldValue){
        //     console.log(oldValue + '-->' + newValue)
        // })
     </script>
</body>
</html>

 

posted @ 2017-05-05 18:10  JonasYu  阅读(2919)  评论(0)    收藏  举报