v-model表单输入绑定

v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。

在文本中使用，代码如下：

<div id="app" v-cloak>
   <input type="text" v-model="msg" />{{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
            data(){
                return {
                	msg:""
                }
        	}
    })
</script>

在多行文本里使用，代码如下：

<div id="app" v-cloak>
  <textarea v-model="msg"></textarea>
  {{msg}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
	new Vue({
		el:"#app",
		data(){
			return {
				msg:""
			}
		}
	})
</script>

在单个复选框中使用，代码如下：

<div id="app" v-cloak>
   <input type="checkbox" id="checkbox" v-model="checked">
   <label for="checkbox">{{ checked }}</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			checked:false
            		}
        		}
    	})
</script>

在多个复选框中使用，代码如下：

<div id="app" v-cloak>
   <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
   <label for="jack">Jack</label>
   <input type="checkbox" id="john" value="John" v-model="checkedNames">
   <label for="john">John</label>
   <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
   <label for="mike">Mike</label>
   <br>
   <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			checkedNames:[]
            		}
        		}
    	})
</script>

在单选按钮中使用，代码如下：

<div id="app" v-cloak>
   <label><input type="radio" value="1" v-model="gender">男</label>
   <label><input type="radio" value="2" v-model="gender">女</label>
   <br>
   <span>性别: {{ gender=='1'?'男':gender=='2'?'女':'' }}</span>
</div>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			gender:"1"
            		}
        		}
    	})
</script>

在选择框单选时中使用，代码如下：

<div id="app" v-cloak>
    	<select v-model="selected">
        		<option disabled value="">请选择</option>
        		<option>羊肉串</option>
        		<option>啤酒</option>
        		<option>烤馒头</option>
    	</select>
    	<span>Selected: {{ selected }}</span>
</div>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			selected:""
            		}
        		}
    	})
</script>

注意：

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在IOS中，这会使用户无法选择第一个选项。因为这样的情况下，IOS 不会触发 change 事件。因此，推荐像上面这样提供一个值为空的禁用选项。

在选择框多选时中使用，代码如下：

<div id="app" v-cloak>
   <select v-model="selected" multiple>
     <option>羊肉串</option>
     <option>啤酒</option>
     <option>烤馒头</option>
   </select>
   <span>Selected: {{ selected }}</span>
</div>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			selected:[]
            		}
        		}
    	})
</script>

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串。但是有时我们可能想把值绑定到Vue实例的一个动态属性上，这时可以用v-bind实现，并且这个属性的值可以不是字符串

绑定复选框，代码如下：

<div id="app" v-cloak>
   <input type="checkbox" v-model="toggle" true-value="yes" false-value="no"/>{{toggle}}
</div>
data(){
      return {
         toggle:""
      }
 }

绑定选择框的选项，代码如下：

<div id="app" v-cloak>
   <select v-model="selected">
     <option disabled value="">请选择</option>
     <!-- 内联对象字面量 -->
     <option :value="{ title: '羊肉串' }">羊肉串</option>
   </select>
   结果：{{selected.title}}
</div>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			selected:""
            		}
        		}
    	})
</script>

v-model修饰符

.lazy：在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 (除了输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在change事件之后进行同步，代码如下：

<div id="app" v-cloak>
    	<input type="text" v-model.lazy="message">结果：{{message}}
</div>
data(){
           return {
                	message:""
            }
}

.number：如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符，代码如下：

<input type="number" v-model.number="age">年龄：{{age}}
data(){
           return {
                age:""
           }
}

这通常很有用，因为即使在 type="number" 时，输入input元素的值也总会返回字符串类型。大家应该都知道字符串类型是无法和加号直接做运算的，会把加号当做连接符使用，通常需要把字符串类型的数字用parseInt或parseFloat转换成数字类型。而.number修饰符会自动转成数字类型。

.trim：如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符，代码如下：

姓名：<input type="text" v-model.trim="name">
 <button type="button" @click="submit()">提交</button>
<script>
    	new Vue({
        		el:"#app",
        		data(){
            		return {
                			name:""
            		}
        		},
        		methods:{
                       submit(){
                          if(this.name==''){
                    	       alert("请输入姓名");
                    	        return false;
                }
               }
        	}
   })
</script>

双向绑定原理

双向绑定的原理也叫响应式原理，面试的时候经常会问到，所以大家需要了解一下，Vue是采用对象设计模式之发布者-订阅者模式的方式，通过Object.defineProperty()属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。来完成双向绑定。

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

Object.defineProperty有三个参数，第一个：需要定义属性的当前对象，第二个：当前需要定义的属性名，第三个：属性描述符。