[JavaScript知识库]vue学习之路（四）：v-model双向数据绑定

数据双向绑定

简单理解为：当视图中的数据发生变化的时候，数据包中的数据也要发生改变；同理，数据包中的数据改变时，视图中的数据也要发生改变，主要用于实时获取表单元素中的value值。

首先介绍一下v-model

v-model ：负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。同时需要注意，v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值，而总是将 Vue 实例的数据作为数据来源。所以应该通过 JavaScript 在组件的 data 选项中声明初始值。

下面通过两个简单的demo理解一下单向绑定和双向绑定：

单向数据绑定

	<div id="app">
        <!-- 1. 单向绑定 -->
        <input type="text" v-bind:value="msg">
        <h1>{{msg}}</h1>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello word',
            }
        })
     </script>

运行结果：
当输入框中的数据发生变化时，视图中的数据并没有发生改变，不会影响{{msg}}中的数据。

双向数据绑定demo1

    <div id="app">
     <!-- 2. 双向绑定 -->
        <input type="text" v-model="msg">
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello word',
            }
        })
	</script>

运行结果：
当输入框中的数据发生变化时，视图中的数据也发生相同的变化。

双向数据绑定demo2

	<div id="app">
        <select v-model="gender">
            <!-- 默认情况下select会直接显示第一个option的值，也就是girl -->
            <!-- 现进行数据绑定，设置默认值是boy -->
            <option value="girl">女</option>
            <option value="boy">男</option>
        </select>
        <!-- 切换option的时候，{{gender}}的值也会对应发生变化 -->
        {{gender}}
    </div>
    
    <script>
        new Vue({
            el:'#app',
            data:{
                gender:'boy',
            }
        })
	</script>

运行结果：

当切换option时，数据包中的gender会跟着一起变化。