vue中v-model详解
vue 中经常使用到 <input> 和 <textarea> 这类表单元素，vue 对于这些元素的数据绑定和我们以前经常用的 jQuery 有些区别。vue 使用 v-model 实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
v-model 本质上是一个语法糖。如下代码<input v-model="test">本质上是 <input :value="test" @input="test = $event.target.value">，其中 @input 是对 <input> 输入事件的一个监听:value="test" 是将监听事件中的数据放入到 input，下面代码是 v-model 的一个简单的例子。在这边需要强调一点，v-model 不仅可以给 input 赋值还可以获取 input 中的数据，而且数据的获取是实时的，因为语法糖中是用 @input 对输入框进行监听的。可以在如下 div 中加入 <p>{{test}}</p> 获取 input 数据，然后去修改 input 中数据会发现 <p></p> 中数据随之改变。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div id="app"> <input v-model="test"> <!-- <input :value="test" @input="test= $event.target.value"> --><!--语法糖--></div><script src="/resources/js/vue.js"></script><script> new Vue({ el: '#app', data: { test: '这是一个测试' } });</script> |
1.v-model 在 input 的下拉框、单选按钮、复选框中的应用
如下面代码，分别是 v-model 在 input 不同的组件中的应用，但是大体用法相同。注意：像下面代码中复选框这样需要接收多条数据的情况下，在 data 里面应该由数组与其对应二不是字符串。
这里有一个值绑定的问题，不管是下拉框或者单选按钮还是复选框，我们都可以在对应的标签内设置 value。以下拉框为例，我们在 <option> 中添加了 vulue=“A 被选”，当我们选择第一个下拉框 A 的时候，在 selected 中的字符串为‘A 被选 '，如果我们不在 <option> 中设置 value 值的话那么 selected 中的字符串将是 <option> 中的值‘A'。
这里还有一个和 vue 无关的问题，比较简单，但是由于平时主要做后台 java 开发没太注意这个前端问题。以下面的单选按钮代码为例，<label> 标签内有一个 for 元素与 input 中的 id 值对应 (两个值相同)，刚开始不太理解为什么这么写，这个对前端人员来说应该是一个很简单的问题。这样写的目的没有其它任何作用，只是 label 元素为鼠标改进了可用性，在点击 label 的时候也相当于点击了对应的 input 控件，点击 label 标签也可以触发 input 标签控件。例如单选按钮在加了 for 之后点击 small 也可以选择对应按钮，但是如果不加 for 是没有任何反应的。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
<!--下拉框--><div id="app"> <select v-model="selected"> <option value="A被选">A</option> <option value="B被选">B</option> <option value="C被选">C</option> </select> <span>Selected: {{ selected }}</span></div><script src="/resources/js/vue.js"></script><script> new Vue({ el: '#app', data: { selected: '' } });</script><!--单选按钮--><div id="app"> <input type="radio" id="small" value="small_value" v-model="picked"> <label for="small">small</label> <br> <input type="radio" id="big" value="big_value" v-model="picked"> <label for="big">big</label> <br> <span>Picked: {{ picked }}</span></div><script src="/resources/js/vue.js"></script><script> new Vue({ el: '#app', data: { picked: '' } })</script><!--复选框--><div id="app"> <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames"> <label for="one">选项一</label> <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames"> <label for="two">选项二</label> <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames"> <label for="three">选项三</label> <br> <span>Checked names: {{ checkedNames }}</span></div><script src="/resources/js/vue.js"></script><script> new Vue({ el: '#app', data: { checkedNames: [] } })</script> |
2.v-model 修饰符
v-model 也可以和.lazy、.trim 和.number 这些修饰符一起使用。
|
1
2
3
4
5
6
|
<!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件进行同步 --><input v-model.lazy="msg" ><!--去除字符串首尾的空格--><input v-model.trim="msg"><!--将数据转化为值类型--><input v-model.number="age" type="number"> |
.trim 和.number 的用法比较简单，这里就不做过多解释。.lazy 相当于一个延迟加载的过程。在上面我们讲过 <input v-model="test"> 相当于一个语法糖<input :value="test" @input="test = $event.target.value">，而<input v-model.lazy="msg" >则相当将 input 的实时更新改为一个 change 事件，v-model.lazy 只有当焦点移除 input 时才会触发事件。下图 1 位 v-model 效果，图 2 位 v-model.lazy 效果。
下面在单独给大家介绍下 vue 中 v-model 使用
v-model 用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：
1. v-bind 绑定一个 value 属性
2. v-on 指令给当前元素绑定 input 事件
自定义组件使用 v-model，应该有以下操作：
1. 接收一个 value prop
2. 触发 input 事件，并传入新值
在原生表单元素中：
|
1
|
<input v-model="inputValue"> |
相当于
|
1
|
<input v-bind:value="inputValue" v-on:input="inputValue = $event.target.value"> |
在自定义组件中
|
1
|
<my-component v-model="inputValue"></my-component> |
相当于
|
1
|
<my-component v-bind:value="inputValue" v-on:input="inputValue = argument[0]"></my-component> |
这个时候，inputValue 接受的值就是 input 事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要 $emit 去触发 input 的事件。
|
1
|
this.$emit('input', value) |
总结