<div id="root">
    R：<input type="text" v-model.number="r"><br>
    G：<input type="text" v-model.number="g"><br>
    B：<input type="text" v-model.number="b">
    <div class="box" :style="{backgroundColor:rgb}">
        {{rgb}}
    </div>
    <button @click="show">按鈕</button>
</div>
<script src="/vue/vue.js"></script>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            r:0 , g:0, b:0,
        },
        methods: {
            show() {
                console.log(this.rgb);
            }
        },
        //所有計算屬性都要定義到computed節(jié)點之下
        computed: {
            // 計算屬性在定義的時候，要定義成“方法格式”，在這個方法中會生成好的rgb(x,x,x)的字符串
            //實現(xiàn)了代碼的復用，只要計算屬性中依賴的數(shù)據(jù)變化了，則計算屬性會自動重新賦值
            rgb() {
                return `rgb(${this.r},${this.g},${this.b})`
            }
        }
    })
</script>

<div id="root">
    <input type="text" v-model="firstname"><br>
    <input type="text" v-model="lastname"><br>
    全名：<span>{{fullname}}</span>
</div>
<script src="/vue/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            firstname:'張',
            lastname:'三'
        },
        computed:{
            fullname:{
                //當初次讀取fullname或所依賴的數(shù)據(jù)發(fā)生變化時，get被調用
                get(){
                    console.log('get被調用了');
                    return this.firstname+'-'+this.lastname
                },
                //當主動修改fullname時，set被調用
                set(value){
                    console.log('set', value);
                    const arr = value.split('-');
                    this.firstname = arr[0]
                    this.lastname = arr[1]
                }
            }
        }
    })
</script>

<div id="root">
    <input type="text" v-model="name">
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:''
        },
        //所有的偵聽器，都應該被定義到watch節(jié)點下
        watch:{
            // 偵聽器本質上是一個函數(shù)，要監(jiān)視哪個數(shù)據(jù)的變化，就把數(shù)據(jù)名作為方法名即可
            //newVal是“變化后的新值”，oldVal是“變化之前舊值”
            name(newVal,oldVal){ //監(jiān)聽name值的變化
                console.log("監(jiān)聽到了新值"+newVal, "監(jiān)聽到了舊值"+oldVal);
            }
        }
    })
</script>

<div id="root">
    <h2>今天天氣很{{info}}</h2>
    <button @click="changeWeather">切換天氣</button>
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            isHot:true
        },
        computed:{
            info(){
                return this.isHot ? '炎熱' : '涼爽'
            }
        },
        methods:{
            changeWeather(){
                this.isHot = !this.isHot
            }
        },
    })
    vm.$watch('info',{
        handler(newVal,oldVal){
            console.log('天氣被修改了', newVal, oldVal);
        }
    })
</script>

<div id="root">
    <input type="text" v-model="name">
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            name:'admin'
        },
        watch:{
            //定義對象格式的偵聽器
            name:{
                handler(newVal,oldVal){
                    console.log(newVal, oldVal);
                },
                immediate:true
            }
        }
    })
</script>

<div id="root">
    <input type="text" v-model="info.name">
</div>
<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            info:{
                name:'admin'
            }
        },
        watch:{
            info: {
                handler(newVal){
                    console.log(newVal);
                },
                //開啟深度監(jiān)聽
                deep:true
            }
        }
    })
</script>

watch:{
    "info.name"(newVal){
        console.log(newVal);
    }
}

<div id="root">
    <input type="text" v-model="firstname"><br>
    <input type="text" v-model="lastname"><br>
    全名：<span>{{fullname}}</span>
</div>
<script src="/vue/vue.js"></script>
<script>
    const vm = new Vue({
        el:"#root",
        data:{
            firstname:'張',
            lastname:'三',
            fullname:'張-三'
        },
        //watch能開啟異步任務
        watch:{
            firstname(val){
                setTimeout(()=>{
                    this.fullname = val + '-' + this.lastname
                },1000)
            },
            lastname(val){
                this.fullname = this.firstname+'-'+val
            }
        }
    })
</script>