三、表單雙向數(shù)據(jù)綁定和組件
目錄：雙向數(shù)據(jù)綁定、組件
1.雙向數(shù)據(jù)綁定
1）什么是雙向數(shù)據(jù)綁定
Vue.js是一個(gè)MVVM框架，即數(shù)據(jù)雙向綁定，即當(dāng)數(shù)據(jù)發(fā)生變化的時(shí)候，視圖也就發(fā)生變化，當(dāng)視圖發(fā)生變化的時(shí)候，數(shù)據(jù)也會(huì)跟著同步變化。這就是Vue.js的精髓之處。
值得注意的是，所說(shuō)的數(shù)據(jù)雙向綁定，一定是對(duì)于UI控件來(lái)說(shuō)的，非UI控件不會(huì)涉及到數(shù)據(jù)雙向綁定。單向數(shù)據(jù)綁定是使用狀態(tài)管理工具的前提。如果使用vuex，那么數(shù)據(jù)流也是單項(xiàng)的，這時(shí)就會(huì)和雙向數(shù)據(jù)綁定有沖突。
為什么要實(shí)現(xiàn)數(shù)據(jù)的雙向綁定
在Vue.js中，如果使用vuex，實(shí)際上數(shù)據(jù)還是單向的，之所以說(shuō)是數(shù)據(jù)雙向綁定，這是用的UI控件來(lái)說(shuō)，對(duì)于處理表單，Vue.js的雙向數(shù)據(jù)綁定用起來(lái)就特別舒服了。即兩者并不互斥，在全局性數(shù)據(jù)流使用單向，方便跟蹤；局部性數(shù)據(jù)流使用雙向，簡(jiǎn)單易操作。
2）在表單中使用雙向數(shù)據(jù)綁定
可以用v-model指令在表單<input>、<textarea>及<select>元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會(huì)根據(jù)控件類型自動(dòng)選取正確的方法來(lái)更新元素。盡管有些神奇，但v-model本質(zhì)上不過(guò)也是基礎(chǔ)語(yǔ)法。它負(fù)責(zé)監(jiān)聽(tīng)用戶的輸入事件以更新數(shù)據(jù)，并對(duì)一些極端場(chǎng)景進(jìn)行一些特殊處理。
注意：v-model會(huì)忽略所有表單元素的value、checked、selected特性的初始值而總是將Vue實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來(lái)源。應(yīng)該通過(guò)JavaScript在組件的data選項(xiàng)中聲明初始值。
①單行文本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--這里希望輸入框的值和{{ }}取值動(dòng)態(tài)綁定，實(shí)時(shí)相同，就使用v-model綁定message-->
<div id="vue">
單行文本：<input type="text" v-model="message" value="hello"/> 單行文本是：{{ message }}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: "Hello Vue"
}
});
</script>
</body>
</html>
②多行文本
<div id="vue">
多行文本：<textarea v-model="message"></textarea> 多行文本是：{{ message }}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue',
data: {
message: "Hello Textarea"
}
});
</script>
③單復(fù)選框
<div id="vue">
單復(fù)選框：
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#Vue',
data: {
checked: false
}
});
</script>
④多復(fù)選框
<div id="vue">
多復(fù)選框：
<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>
<span>選中的值：{{ checkedNames }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#Vue',
data: {
checkedNames: [ ]
}
});
</script>
⑤單選按鈕
<div id="vue">
單選按鈕：
<input type="radio" id="one" value="one" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="two" v-model="picked">
<label for="two">Two</label>
<span>選中的值：{{ picked }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#Vue',
data: {
picked: ' '
}
});
</script>
⑥下拉框
<div id="vue">
下拉框：
<select v-model="selected">
<option disabled value=" ">請(qǐng)選擇</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>選中的值：{{ selected }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#Vue',
data: {
selected: ' '
}
});
</script>
注意：如果v-model表達(dá)式的初始值未能匹配任何選項(xiàng)，<select>元素將被渲染為“未選中”狀態(tài)。在iOS中，這會(huì)使用戶無(wú)法選擇第一個(gè)選項(xiàng)。因?yàn)檫@樣的情況下，iOS不會(huì)觸發(fā)change事件。因此，更推薦像上面這樣提供一個(gè)值為空的禁用選項(xiàng)。
2.組件
1）什么是組件
組件是可復(fù)用的Vue實(shí)例，說(shuō)白了就是一組可以重復(fù)使用的模板，跟JSTL的自定義標(biāo)簽、Thymeleaf的th:fragment等框架有著異曲同工之妙。通常一個(gè)應(yīng)用會(huì)以一顆嵌套的組件樹(shù)的形式來(lái)組織：
2）第一個(gè)Vue組件
注意：在實(shí)際開(kāi)發(fā)中，并不會(huì)用以下方式開(kāi)發(fā)組件，而是采用vue-cli創(chuàng)建.vue模板文件的方式開(kāi)發(fā)，以下方法只是為了方便理解什么是組件。
使用Vue.component()方法注冊(cè)組件，格式如下：
<div id="vue">
<ul>
<my-component-li></my-component-li >
</ul>
</div>
<script type="text/javascript">
//先注冊(cè)組件
Vue.component('my-component-li', {
template: '<li>Hello li</li>'
});
//再實(shí)例化Vue
var vm = new Vue({
el: '#Vue'
});
</script>
說(shuō)明：
- Vue.component()：注冊(cè)組件
- my-component-li：自定義組件的名稱
- template：組件的模板
3）使用props屬性傳遞參數(shù)
像上面那樣用組件沒(méi)有任何意義，所以是需要傳遞參數(shù)到組件的，此時(shí)就需要使用props屬性了。
注意：默認(rèn)規(guī)則下props屬性里的值不能為大寫(xiě)。
<div id="vue">
<ul>
<my-component-li v-for="item in items" v-bind:item="item"></my-component-li >
</ul>
</div>
<script type="text/javascript">
//先注冊(cè)組件
Vue.component('my-component-li', {
props:['item'],
template: '<li>Hello l{{ item }}</li>'
});
//再實(shí)例化Vue
var vm = new Vue({
el: '#Vue',
data: {
items: ["張三","李四","王五"]
}
});
</script>
說(shuō)明：
- v-for="item in items"：遍歷Vue實(shí)例中定義的名為items的數(shù)組，并創(chuàng)建同等數(shù)量的組件。
- v-bind:item="item"：將遍歷的item項(xiàng)綁定到組件中props定義的名為item屬性上。=號(hào)左邊的item為props定義的屬性名，右邊的為item in items中遍歷的item項(xiàng)的值。
