vue数据双向绑定

5.Vue数据双向绑定

5.1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

5.2 怎么实现双向数据绑定

v-model

v-model 指令可以在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

测试案例：

用非v-model方式的时候，是不能双向绑定的

		
	<div id="app">     
        <input type="text"  :value="msg"  />
        <div>{
  {msg}}</div>
    </div>
    
	 <script>
	     var app = new Vue({
	         el:'#app',
	         data:{
	            msg:"hello"
	         }
	     });
	 </script>

改为v-model方式绑定：

<div id="app">     
        <input type="text"  v-model="msg"  />
        <div>{
  {msg}}</div>
    </div>
    
	 <script>
	     var app = new Vue({
	         el:'#app',
	         data:{
	            msg:"hello"
	         }
	     });
	 </script>

案例2：

   <div id="app">
        <select v-model="selected">
            <option value="">--请选择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="武汉">武汉</option>
        </select>
        <p>{
  {selected}}</p>
    </div>
     <script>
         var v= new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>

案例3：

   <div id="app">
        <input type="checkbox" id="jack" value="吃饭" v-model="checkedValues">
        <label for="jack">吃饭</label>
        <input type="checkbox" id="john" value="睡觉" v-model="checkedValues">
        <label for="john">睡觉<