Vue v-model和v-bind主要区别

1: v-bind 只能单向绑定，单向数据绑定数据源的改动会同步到页面上，但页面输入的数据不会影响到数据源的数据。
v-model是双向绑定，页面和数据源data互通。

2: v-model使用于

• components(Vue中的组件)
• input
• select
• textarea

v-model后面直接跟以下三种属性

.number 自动将用户输入的值转化为数值类型( 用户在输入框输入的都是字符串 )
.trim 自动过滤用户输入的首位空白字符
.lazy 在"change"时而非"input"时更新（如：textarea里面输入时并没有实时获取，而是当输入框失去焦点时内容才被获取）

例如：

<div id="app">
	<input type="text" v-mode.number="n1"> + <input type="text" v-mode.number="n2"> = {{ n1 + n2 }}
  <!-- 注意：文本框获取的都是字符串，进行四则运算得进行数据类型转换 -->
  <!-- 使用.number修饰符，就能将字符串转化为数字型 -->
  
  <!-- 也可以将type设置为number，这样就只能输入数字而不能输入其他类型的字符 -->
  <input type="number" v-mode.number="n1">
</div>

const vm = new Vue({
	el: '#app',
  data: {
  	n1: 1,
    n2: 2
  },
  methods: {

  }         
})

表单控件

v-bind几乎都可以。
v-bind:class 可简写为 :class(v-bind简写为 ：)。
v-bind的关键用处在于可以改变（使用它的标签）的 各种属性,html中的属性、css的样式、对象、数组、number 类型、bool类型。

下拉select：

<div id="app">
	<input type="text" v-mode="username">  <!-- 让文本框的内容与某个数据双向绑定 -->
  <!-- 在使用v-model的时候不用再写value，因为v-model指令在底层封装的时候就对监听了文本框的value值的变化 -->
  <input type="text" :value="username">
  <!-- 双向数据绑定与单向数据绑定 -->
  <!-- 单向数据绑定：数据源的改动会同步到页面上，但页面输入的数据不会影响到数据源的数据 -->
  
  <select v-model="city">
     <option value="">请选择你的城市</option>
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">广州</option>
     <option value="4">深圳</option>
  </select>
</div>

const vm = new Vue({
	el: '#app',
  data: {
  	username:'zhangsan',
    city: ''		// city为空，默认选中“请选择你的选择城市”的选项。可以设置数字来选定默认的选项
  },
  methods: {

  }         
})

复选框checkbox：
首先要给每个复选框设置value值，然后在data中要用一个数组来与v-model绑定(因为复选框可以选中多个value值，所以要用数组来接收)

<template>
	<div id="root">
  	// 单选按钮设置相同的name属性，实现多选一的效果

		性别：男<input type="radio" name="sex" v-model="sex">
		女<input type="radio" name="sex" v-model="sex">
	
		爱好：
    抽烟<input type="checkbox" value="smoking" v-model="hobby"> 
    喝酒<input type="checkbox" value="drinking" v-model="hobby">  
    烫头<input type="checkbox" value="tangtou" v-model="hobby"> 
    
    <input type="checkbox" v-model="agree"> 已阅读并接收此协议

  </div>	
</template>

<script>
	export default {
    el: "#root"
  	data: {
    	hobby: [],		// v-model对应的值要用数组来接收，因为复选框可以选中多个value
      agree: 'false'		// 默认为false，即不勾选状态
    }
  }
</script>

• 注意：如果是只有一个复选框，勾选是否同意的情形，则不需要配置value，也不需要在data中设置数组来与v-model绑定。直接让v-model绑定一个布尔值的变量agree

补充：如何收集表单的数据？

• 在data中可以用一个userinfo对象来包裹获取到的表单的值，然后再表单提交的时候(from绑定submit方法)，处理函数中使用JSON.stringify( )方法将userinfo对象转化为字符串，输出就可以看到收集的表单数据
  注意还要阻止表单提交时自动跳转的默认行为。