1. Single data binding

<div id="di">
<input type="text" :value="input_val">
</div>

<script>
var app = new Vue({
el: '#di',
data: {
input_val: 'hello world '
}
})
</script>

App.input_val ='vue'can be modified through the browser REPL environment

We can directly affect DOM elements by modifying data through vue objects, but if we modify DOM elements directly, it will not affect the data of vue objects;

2. Two way data binding v-model:

<div id="di">
    <input type="text" v-model="input_val" >
</div>

<script>
    var app = new Vue({
        el: '#di',
        data: {
            input_val: 'hello world '
        }
    })
</script>

Through the v-model instruction to display the form data, the two-way data binding is completed;

Whether DOM element or vue object, the change of data will affect another;

2.1 application scope of bidirectional data binding:

Text box & text field

<div id="di">
    <textarea v-model="inp_val"></textarea>
    <div>{{ inp_val }}</div>
</div>

<script>
    var app = new Vue({
        el: '#di',
        data: {
            inp_val: ''
        }
    })
</script>

Bind check box

<div id="di">
    //Having dinner:<input type="checkbox" value="eat" v-model="checklist"><br>
    //Sleep:<input type="checkbox" value="sleep" v-model="checklist"><br>
    {{ checklist }}
</div>

<script>
    var vm = new Vue({
       el: '#di',
        data: { checklist: []
        }
    });
</script>

Bind radio box

<div id="ap">
    //male<input type="radio" name="sex" value="male" v-model="sex">
    //female<input type="radio" name="sex" value="female" v-model="sex"> 
    <br>
    {{sex}}
</div>

<script>
    var vm = new Vue({
        el: '#ap',
        data: {
            sex: ''
        }
    });
</script>