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)
|
總結