雙向數(shù)據(jù)綁定

雙向數(shù)據(jù)綁定基于MVVM框架，vue屬于MVVM框架

MVVM：M等于model，V等于view，即model改變影響view，view改變影響model

1.雙向數(shù)據(jù)綁定

<!-- 雙向數(shù)據(jù)綁定 -->
#必須在使用在表單里面
#使用v-model綁定數(shù)據(jù)，實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)變化
<h3>{{msg}}</h3>
<input type="text" v-model="msg">

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

獲取動(dòng)態(tài)數(shù)據(jù)

<!-- 獲取動(dòng)態(tài)數(shù)據(jù) -->
<button v-on:click="getMsg()">獲取表單數(shù)據(jù)</button>

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

設(shè)置表單數(shù)據(jù)

<!-- 設(shè)置動(dòng)態(tài)數(shù)據(jù) -->
<button v-on:click="setMsg()">設(shè)置表單數(shù)據(jù)</button>

#js代碼
methods: {
    setMsg(){
        this.msg = '設(shè)置后的數(shù)據(jù)';
    },
}

2.使用ref綁定數(shù)據(jù)（使用ref進(jìn)行dom操作）

#html代碼
<input type="text" ref="textInfo"/>
<div ref="box">這里是一個(gè)box</div>
<!-- 獲取動(dòng)態(tài)數(shù)據(jù) -->
<button v-on:click="getInfo()">獲取表單數(shù)據(jù)</button>

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