一帘靡、 雙向綁定:
問題: 使用傳統(tǒng)的:value綁定表單元素的內容時，雖然界面中更新了表單元素的內容瓤帚，但是程序中的變量里卻無法獲得新的表單元素內容描姚。
原因: 單向綁定: 只能將程序中的變量值，更新到頁面中顯示戈次。無法實時將頁面中的修改的新值轩勘，反向更新回程序中的變量里。（只能從Model->View怯邪，不會從View->Model）比如: :value就是一種單向綁定.
解決: vue中其實提供了雙向綁定的方式:
1). 什么是雙向綁定: 既能將程序中的變量值绊寻，更新到頁面中顯示。又能實時將頁面中的修改的新值悬秉，反向更新回程序中的變量里澄步。（既能從Model->View，又能從View->Model）
2). 何時: 今后搂捧，只要想實時獲得/收集用戶在界面上輸入或選擇的表單元素的新值時驮俗，都要用雙向綁定。
3). 如何: <表單元素 v-model="變量">
view->model
4). 結果: 只要界面上用戶修改了表單元素的值允跑，v-model就會立刻自動將新表單元素值更新回程序中data中的變量里保存王凑。-
示例: 使用雙向綁定實現(xiàn)點按鈕搜索
圖片1.png
圖片2.png
v-model.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素包裹
1.2 找可能發(fā)生改變的位置
本例中: 只有文本框的內容可能發(fā)生變化，所以用:value來綁定文本框的內容聋丝。
1.3 找觸發(fā)事件的元素
本例中: 點按鈕觸發(fā)事件索烹，執(zhí)行搜索操作-->
<div id="app">
<input v-model="str">
<button @click="search">百度一下</button>
</div>
<script>
//2. 創(chuàng)建new Vue()對象, 監(jiān)視id為app的區(qū)域
var vm=new Vue({
el:"#app",
//3. 創(chuàng)建模型對象:
//3.1 創(chuàng)建data對象
//本例中: 因為界面中只需要一個變量，所以
data:{
str:"" //保存用戶在界面上文本框中輸入的內容弱睦。開局百姓，內容為""
},
//3.2 創(chuàng)建methods對象
//本例中: 因為界面中只需要一個事件處理函數(shù)，所以
methods:{
search(){
if(this.str!==""){
console.log(`搜索${this.str}相關的內容...`);
}
}
}
})
</script>
</body>
</html>
運行結果:
圖片3.png
5. 原理: 雙向綁定的原理: 自動綁定input或change事件+訪問器屬性+虛擬DOM樹
(1). v-model會自動給表單元素綁定input或change事件
(2). 每當界面中表單元素的值發(fā)生改變時况木，就能自動調用事件處理函數(shù)垒拢。
(3). 在事件處理函數(shù)中旬迹，可以獲得當前表單元素的內容，實時賦值給data中的變量求类。
(4). 示例: 使用:value和事件模擬實現(xiàn)雙向綁定:
_v-model2.html
圖片4.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素包裹
1.2 找可能發(fā)生改變的位置
本例中: 只有文本框的內容可能發(fā)生變化奔垦，所以用:value來綁定文本框的內容。
1.3 找觸發(fā)事件的元素
本例中: 點按鈕觸發(fā)事件尸疆，執(zhí)行搜索操作-->
<div id="app">
<!--DOM中每個文本框都有一個input事件
每當在文本框中輸入或刪除了內容時就會實時觸發(fā)椿猎。-->
<input :value="str" @input="input">
<button @click="search">百度一下</button>
</div>
<script>
//2. 創(chuàng)建new Vue()對象, 監(jiān)視id為app的區(qū)域
var vm=new Vue({
el:"#app",
//3. 創(chuàng)建模型對象:
//3.1 創(chuàng)建data對象
//本例中: 因為界面中只需要一個變量，所以
data:{
str:"" //保存用戶在界面上文本框中輸入的內容寿弱。開局犯眠，內容為""
},
//3.2 創(chuàng)建methods對象
//本例中: 因為界面中只需要一個事件處理函數(shù)，所以
methods:{
input(e){
//DOM中:
//當前文本框的內容
//賦值給
//data中的str
this.str=e.target .value
},
search(){
if(this.str!==""){
console.log(`搜索${this.str}相關的內容...`);
}
}
}
})
</script>
</body>
</html>
運行結果:
圖片5.png
6. 按回車執(zhí)行搜索: vue中的事件修飾符:
(1). 問題: @keyup可以為元素綁定鍵盤按下后抬起事件症革。但是筐咧，任何按鍵都可以觸發(fā)這個事件。不是我們想要的地沮！我們希望只有按回車鍵時才能觸發(fā)事件嗜浮。
(2). 解決: vue中專門定義了事件修飾符用來限制事件的行為:
比如: @keyup.13="事件處理函數(shù)"
只限于按13號鍵/回車鍵時才能觸發(fā)事件羡亩。
- watch: (監(jiān)視)
(1). 什么是: 專門在變量值被修改時自動執(zhí)行一項任務的特殊監(jiān)視函數(shù).
(2). 何時: 今后摩疑，只要希望一個變量的值一改變，就能立刻執(zhí)行一個操作時畏铆。都用watch
(3). 如何:
new Vue({
el:"#app",
data:{ 變量名: 值, ... },
methods:{},
watch:{
變量名(){
}
}
})
- 示例: 實現(xiàn)按回車搜索和一邊輸入一邊執(zhí)行搜索
_v-model3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素包裹
1.2 找可能發(fā)生改變的位置
本例中: 希望文本框內容改變雷袋，程序中變量自動接到新值，就必須用v-model雙向綁定.
1.3 找觸發(fā)事件的元素
本例中: 點按鈕觸發(fā)事件辞居，執(zhí)行搜索操作-->
<div id="app">
<input v-model="str" @keyup.13="search">
<button @click="search">百度一下</button>
</div>
<script>
//2. 創(chuàng)建new Vue()對象, 監(jiān)視id為app的區(qū)域
var vm=new Vue({
el:"#app",
//3. 創(chuàng)建模型對象:
//3.1 創(chuàng)建data對象
//本例中: 因為界面中只需要一個變量楷怒，所以
data:{
str:"" //保存用戶在界面上文本框中輸入的內容。開局瓦灶，內容為""
},
//3.2 創(chuàng)建methods對象
//本例中: 因為界面中只需要一個事件處理函數(shù)鸠删，所以
methods:{
search(){
if(this.str!==""){
console.log(`搜索${this.str}相關的內容...`);
}
}
},
//因為希望str變量值一變，立刻自動執(zhí)行搜索操作
watch:{
str(){
this.search();
}
}
})
</script>
</body>
</html>
運行結果:
圖片6.png
9. 不同表單元素上的雙向綁定效果:
(1). 文本框/textarea :
v-model會自動獲得value屬性值贼陶，并自動更新回程序中data中的變量里保存刃泡。
(2). 單選按鈕(radio):
a. 特點: 一組單選按鈕有多個radio組成。且每個radio的value值都是固定寫死的碉怔。
b. 如何: 要在每個備選的radio中都寫上v-model=sex
<input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="0" v-model="sex">女
c. 原理:
1). html中，一組相同name名的radio撮胧，只能選一個
2). v-model每次只會把選中的一個radio的value值自動更新回程序中變量里桨踪。
3). 如果程序中的變量值改變，也會影響頁面上radio的選中狀態(tài)芹啥。v-model會取回變量值和當前radio的value值做比較锻离。哪個radio的value值與變量值相等铺峭，哪個radio就選中。
d. 示例: 選擇性別:
圖片7.png
_v-model_radio.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
性別: <input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="0" v-model="sex">女
<br/>
<h3>您選擇的性別是:{{sex}}</h3>
</div>
<script>
new Vue({
el:"#app",
data:{
sex:1
}
})
</script>
</body>
</html>
運行結果:
image.png
(3). select:
a. 特點:
1). 一個select元素汽纠，包含多個option元素
2). select元素中每個value值也都是在每個option上寫死的逛薇！
b. 如何: v-model只寫在select元素上一份即可！
<select v-model="變量">
<option value="備選值1">xxx</option>
<option value="備選值2">xxx</option>
<option value="備選值3">xxx</option>
c. 原理:
1). 首次加載頁面時: v-model讀取出變量的當前值和每個option的value值作比較疏虫。哪個option的value值與變量值相等永罚，select就選中哪個option
2). 每當用戶切換了select下的選中項時，v-model只會將選中的一個option的value值自動更新回程序中data中變量里保存卧秘。
d. 示例:選擇城市呢袱，顯示城市圖片
圖片8.png
_v-model_select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素
1.2 找可能發(fā)生變化的位置:
本例中: 2處:
select的選中項會被用戶主動改變，所以翅敌，應該用雙向綁定
img元素的src屬性值會被程序自動改變羞福，所以，應該用單向綁定-->
<div id="app">
請選擇城市: <select id="sel" v-model="src">
<option value="img/bj.jpg">北京</option>
<option value="img/sh.jpg">上海</option>
<option value="img/hz.jpg">杭州</option>
</select><br/>
<br/>
<br/>
<img style="width:300px" :src="src">
</div>
<script>
//2. 創(chuàng)建new Vue()對象
new Vue({
el:"#app",
//3. 創(chuàng)建模型對象
//本例中: 界面中雖然有兩處變化蚯涮，但是治专，兩處變化用的是同一個變量。
data:{
src:"img/bj.jpg"
}
})
</script>
</body>
</html>
運行結果:
圖片9.png
(4). checkbox單用:
a. 特點: 沒有value屬性遭顶。用戶選中與不選中改的是checked屬性张峰。
b. 如何: <input type="checkbox" v-model="變量">
c. 原理:
1). v-model直接操作和讀取checked屬性
2). 首次加載頁面時，v-model讀取變量值棒旗。如果變量值為true喘批，則當前checkbox選中。如果變量值為false铣揉，則當前checkbox不選中
3). 當用戶切換了選中狀態(tài)饶深，則v-model會直接將checked屬性值更新回程序中data中變量里。且值還是bool類型的true或false逛拱。
d. 示例: 點同意敌厘，啟用元素:
圖片10.png
_v-model_checkbox.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--VUE 3步
1. 做界面
1.1 唯一父元素
1.2 找可能發(fā)生變化的位置:
本例中: 2大類情況
checkbox自己的checked狀態(tài)會被用戶主動改變，所以應該用v-model綁定
其它三個表單元素的disabled屬性會被程序自動改變朽合，所以應該用:單向綁定俱两。
又因為選中checkbox會影響其它元素的disabled，所以旁舰，checkbox和其它元素的disabled屬性使用的是同一個變量锋华。
-->
<div id="app">
<br/>
用戶名:<input :disabled="!agree"><br/>
<br/>
密碼:<input :disabled="!agree" type="password"><br/>
<br/>
<input type="checkbox" v-model="agree">同意<br/>
<br/>
<button :disabled="!agree">注冊</button>
</div>
<script>
//2. 創(chuàng)建new Vue()對象
new Vue({
el:"#app",
//3. 創(chuàng)建模型對象
//本例中: 界面上只需要一個變量agree
data:{
agree:false, //表示用戶是否同意，開局箭窜，默認為不同意
}
})
</script>
</body>
</html>
運行結果:
圖片11.png
圖片12.png
