1. 什么是雙向綁定？
- {{}}和v-bind僅是單向綁定瞬浓。只能將Model數(shù)據(jù)的值初婆，綁定到頁面表單元素上，用于顯示(M—>V)猿棉，而頁面上的更改磅叛，無法對應(yīng)修改到Model數(shù)據(jù)中(V—>×M)。
- 雙向綁定既可把程序中Model數(shù)據(jù)綁定到表單元素中顯示萨赁，第一個方向：M—>V弊琴；同時，又可把表單元素中修改的值杖爽，綁定回程序中Model數(shù)據(jù)變量上保存敲董，第二個方向：V—>M。
- 今后慰安，只要希望修改表單元素的值后腋寨，也能自動修改對應(yīng)模型數(shù)據(jù)的值，則用v-model指令進行綁定化焕。
2.如何進行雙向綁定萄窜？
- 綁定文本框和文本域
<input type="text" v-model:value="變量">
<textarea v-model:value="變量" ></textarea>
結(jié)果：文本框內(nèi)容一更新，立刻將新值自動更新回程序的變量里撒桨。
原理：v-model:value會被自動翻譯為oninput="function(){...}"事件綁定代碼查刻，并在事件處理函數(shù)中封裝修改data中變量的代碼。只要文本框內(nèi)容被修改凤类，就觸發(fā)DOM的oninput事件穗泵，自動執(zhí)行修改data中的變量的代碼。 - 綁定select元素
用不是直接修改select元素的文本谜疤，而是通過選擇option來改變select的value佃延。
例如：
<select v-model:value="orderStatus">
<option value="10">未付款</option>
<option value="20">已付款</option>
<option value="30">已發(fā)貨</option>
<option value="40">已簽收</option>
</select>
結(jié)果：select的選中項的值改變，就會立刻將新選中的option的value值更新回內(nèi)存的程序里茎截。
原理：單向綁定時：將Model中的變量值賦值給select的value屬性苇侵，然后，select元素會獲得value屬性值去和每個option的value值做比較企锌。哪個option的value等于select的value，就選中哪個option于未。修改時撕攒，<select v-model:value="×××">會被自動翻譯為：<select onchange="vue對象.變量=當(dāng)前select元素的value屬性值">陡鹃。
- 綁定radio元素
備選項的value都是固定不變的，所以肯定綁定的不是value屬性抖坪，選中與不選中radio改變的其實是它的checked屬性萍鲸。
例如：
<label><input type="radio" value="1" v-model:checked="sex">男</label>
<label><input type="radio" value="0" v-model:checked="sex">女</label>
原理：單向綁定時，v-model會拿checked屬性綁定的變量值和當(dāng)前radio的value屬性進行比較擦俐。如果綁定的變量的值等于當(dāng)前radio的vaue脊阴，就選中該radio，否則蚯瞧，如果綁定的變量值嘿期，不等于當(dāng)前radio的value，就不選中該radio埋合。
- 綁定checkbox元素
不需要和value作比較备徐，直接用checked屬性綁定到一個bool值變量即可。
<input type="checkbox" v-mode:checked="isAgree">同意
原理：單向綁定時：綁定的變量值返回true甚颂，就選中蜜猾，返回false，就不選中振诬。修改時：直接將checkbox當(dāng)前的選中狀態(tài)checked屬性值更新回模型變量上蹭睡。
簡寫形式：v-model="模型變量"，省略：value
v-model其實會自動根據(jù)當(dāng)前所在的不同表單元素赶么，切換不同的屬性綁定肩豁。
監(jiān)視函數(shù)
- 什么是監(jiān)視函數(shù)
在模型數(shù)據(jù)發(fā)生變化時，自動執(zhí)行的函數(shù) - 什么時候用監(jiān)視函數(shù)
只要希望在模型數(shù)據(jù)發(fā)生變化時禽绪，立刻執(zhí)行一項操作時蓖救，需要監(jiān)視函數(shù)監(jiān)控模型變量 - 如何用監(jiān)視函數(shù)
new Vue({
el:"×××",
data:{...}
watch:{
模型變量名(){
//想要執(zhí)行的函數(shù)操作
}
}
})
- 監(jiān)視函數(shù)的函數(shù)名，必須是要監(jiān)視的變量名印屁。
