<div id="app-10">
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p> 
        <p>Computed reversed message: "{{ reversedMessage2() }}"</p> 
        <p>time now: "{{ now }}"</p> 
        <p>time now: "{{ now }}"</p> 
        <p>{{ fullName }}</p>
        <input v-model='firstName'></input>
        <input v-model='lastName'></input>
</div>

var app10 = new Vue({
                    el : '#app-10',
                    data : {
                        message : 'Hello',
                        firstName : 'Yao',
                        lastName : 'Jie',
                        fullName : ''
                    },
                    //computed类似于缓存，基础数据变更时才会重新计算
                    computed : {
                        reversedMessage : function (){
                            return this.message.split('').reverse().join('');
                        },
                        //二次调用now的结果一样，因为有缓存且涉及数据没有改变
                        now : function(){
                            return Date.now();
                        }
                    },
                    //methods是方法，每次调用都会执行
                    methods : {
                        reversedMessage2 : function (){
                            return this.message.split('').reverse().join('');
                        }
                    },
                    //watch相当于监测点，必须要监测data中已有的条目且在他发生改动时被调用
                    watch :{
                        firstName: function(newName){
                            this.fullName = newName + this.lastName;
                        },
                        lastName : function(newName){
                            this.fullName = this.firstName + newName;
                        }
                    }
    });