雙向資料綁定

雙向資料綁定基于MVVM架構，vue屬于MVVM架構

<!-- 雙向資料綁定 -->
#必須在使用在表單裡面
#使用v-model綁定資料，實作動态資料變化
<h3>{{msg}}</h3>
<input type="text" v-model="msg">

#js代碼
export default {
    name: 'app',
    data() {
        return {
            msg: 'vue demo',
        }
    }
}
      

擷取動态資料

<!-- 擷取動态資料 -->
<button v-on:click="getMsg()">擷取表單資料</button>

#js代碼
methods: {
    getMsg() {
        alert(this.msg)
    }
}
      

設定表單資料

<!-- 設定動态資料 -->
<button v-on:click="setMsg()">設定表單資料</button>

#js代碼
methods: {
    setMsg(){
        this.msg = '設定後的資料';
    },
}
      

#html代碼
<input type="text" ref="textInfo"/>
<div ref="box">這裡是一個box</div>
<!-- 擷取動态資料 -->
<button v-on:click="getInfo()">擷取表單資料</button>

#js代碼
methods: {
    getInfo() {
        alert(this.$refs.textInfo.value);
        this.$refs.box.style.background = 'red';
    },
}