一：v-model指令
1. v-model指令默認觸發(fā)的是input事件，當(dāng)文本框的值發(fā)生變化后沟使，離開同步給數(shù)據(jù)
添加了.lazy修飾符，可以將input事件轉(zhuǎn)為change事件
.trim修飾符，用于去掉內(nèi)容的首尾空格
<div>
姓名：<input type="text" v-model.lazy.trim="name">開始{{name}}結(jié)束
</div>
2. v-model綁定一組單選框馆揉，每個單選框指定相同的屬性
性別：
<input v-model="sex" type="radio" value="男" name="sex">男
<input v-model="sex" type="radio" value="女" name="sex">女
<span style="color: red">{{sex}}</span>
</div>
3. .number修飾符，會自動將你的輸入轉(zhuǎn)為number
年齡：<input type="text" v-model.number="age">{{age+20}}
</div>
4. v-model綁定單個復(fù)選框抖拦，綁定一個boolean值
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
</div>
5. v-model綁定多個個復(fù)選框升酣，綁定同一個數(shù)組
愛好：
<input v-model="hobbies" type="checkbox" value="抽煙">抽煙
<input v-model="hobbies" type="checkbox" value="喝酒">喝酒
<input v-model="hobbies" type="checkbox" value="燙頭">燙頭
<input v-model="hobbies" type="checkbox" value="打游戲">打游戲
<input v-model="hobbies" type="checkbox" value="敲代碼">敲代碼
<input v-model="hobbies" type="checkbox" value="睡覺">睡覺
<input v-model="hobbies" type="checkbox" value="看電影">看電影
<span style="color: red;">{{hobbies}}</span>
</div>
6. 綁定一個屬性
``` <div>
<!-- 綁定一個數(shù)組 -->
喜歡的食物：
<select multiple v-model="foods">
<option value="蘋果">蘋果</option>
<option value="面包">面包</option>
<option value="香蕉">香蕉</option>
<option value="蛋糕">蛋糕</option>
<option value="草莓">草莓</option>
<option value="咖啡">咖啡</option>
<option value="葡萄">葡萄</option>
</select>
{{foods}}
</div>
##二、綁定事件
1. @是v-on:的簡寫态罪，通過v-on:指令綁定事件噩茄，指定一個methods選項里面的定義的方法， 調(diào)用方法時复颈，不傳參數(shù)绩聘，默認會將事件對象作為參數(shù)傳遞
v-on:事件名.修飾符 = 方法名() | 方法名 | 簡單的JS表達式
簡寫： @事件名.修飾符 = 方法名() | 方法名 | 簡單的JS表達式
事件名： click|keydown|keyup|mouseover|mouseout|自定義事件名
修飾符： .stop | .prevent | .once | .self | .left | .right | .middle | .up| .down | .keyCode | .keyAlias | .native | .passive
示例：
```<button @click="sayHi">sayHi</button> ```
調(diào)用方法時，傳遞是什么參數(shù)耗啦，接的就是什么參數(shù)
```<button @click="sayHello('hello')">sayHello</button>
調(diào)用方法時凿菩，傳遞一個$event參數(shù)，該參數(shù)就是事件對象
```<button @click="sayNice('Nice',$event)">sayNice</button>```
2. 事件綁定類型
//單事件帜讲、單方法
v-on:事件名.修飾符 = "方法名()" | "方法名" | "簡單的JS表達式"
//單事件衅谷、多方法
v-on:事件名.修飾符 = "[方法名1(), 方法名2()]"
//多事件、多方法
v-on:事件名1.修飾符=方法名1 v-on:事件名2.修飾符=方法名2
v-on = "{'事件名1':方法名1似将， '事件名2':方法名2}"
3.原理： 既不是屬性賦值获黔，也不是事件監(jiān)聽，完成的是事件的回調(diào)
<p id="p2" v-on:click="show()">vue事件解釋</p>
//v-on會默認為綁定事件提供一個默認函數(shù)在验，事件賦值只是將賦值的函數(shù)作為默認函數(shù)的內(nèi)部的回調(diào)函數(shù)進行執(zhí)行
//為了讓事件和vue對象產(chǎn)生關(guān)聯(lián)
let pDom2=document.getElementById("p2");
pDom2.addEventListener("click",function(){
show();
})
4.參數(shù)傳遞
事件的參數(shù)傳遞: 遵循JS的方法傳參規(guī)則玷氏，同時可取vue實例倉庫的變量
頁面方法綁定時的 參數(shù) this：會被vue直接重寫為指向于 window的對象
vue 將事件源對象 封裝成了 $event，事件源為$event.target
```<input type="button" value="傳遞參數(shù)event" v-on:click="printEvent($event)">```
5. (1)當(dāng)前事件處理的代碼比較簡單時腋舌，可以將代碼直接寫在行內(nèi)盏触，注意：只能操作Vue管理的數(shù)據(jù)
``` <button @click="age++">年齡++</button> ```
(2)事件修飾符.prevent，用于阻止默認行為
```<div class="box" @contextmenu.prevent="showbox">
box
</div>
(3).once块饺，用只綁定一次事件方法
<div class="one" @click.once="one">
(4).stop赞辩，用于阻止事件冒泡
<div class="two" @click.stop="two"></div>
(5).self，只能在自身元素上觸發(fā)刨沦，不同在子元素上觸發(fā)
<div class="box2" @click.self="showbox2">
<div class="box3"></div>
</div>
(6)每次鍵盤彈起都會調(diào)用事件方法
<div>
請輸入搜索關(guān)鍵字：<input type="text" @keyup="keyup">
</div>
(7)只在回車時诗宣，才會調(diào)用事件方法
<div>
請輸入搜索關(guān)鍵字：<input type="text" @keyup.enter="keyup1">
</div>
(8) //阻止默認行為
// e.preventDefault()
(9) // 阻止事件冒泡
// e.stopPropagation();
三、深度響應(yīng)式
例子：
<div id="app">
<div>
姓名：<input type="text" v-model="name">{{name}}
</div>
<div>
學(xué)生信息：
<input type="text" v-model="obj.name">
<input type="text" v-model.number="obj.age">
<button @click="addSex">添加性別</button>
<button @click="delAge">刪除年齡</button>
<br>
{{obj}}
</div>
<div>
數(shù)組：{{arr}}
<button @click="addArr">添加數(shù)據(jù)</button>
<button @click="delArr">刪除數(shù)據(jù)</button>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el:'#app',
data:{
//基本類型數(shù)據(jù)
name:'張三',
//對象類型數(shù)據(jù)
obj:{
name:'張三',
age:20,
},
arr:[11,22,33,44,55]
},
methods: {
//添加性別
addSex(){
// obj對象里面的每一個屬性想诅，都會采用Object.defineProperty去封裝召庞，實現(xiàn)響應(yīng)式
// 所謂響應(yīng)式岛心，指的是，數(shù)據(jù)發(fā)生變化后篮灼，頁面自動更新忘古。
// 給對象后添加的數(shù)據(jù)不會采用Object.defineProperty去封裝，所以诅诱，就失去了響應(yīng)式髓堪。
// this.obj.sex = '男'
// vue通過$set方法，給對象添加響應(yīng)式屬性
this.$set(this.obj,'sex','男')
},
//刪除年齡
delAge(){
// 采用delete關(guān)鍵字刪除對象的屬性后娘荡，也沒有觸發(fā)頁面更新
// delete this.obj.age
// vue通過$delete方法干旁，刪除對象的屬性，并觸發(fā)響應(yīng)式
this.$delete(this.obj,'age')
},
//添加數(shù)組的數(shù)據(jù)
addArr(){
// this.arr[5] = 66 //注意：采用這種方式炮沐，不會觸發(fā)頁面更新
// 在vue中争群，操作數(shù)組，并觸發(fā)頁面更新只能使用數(shù)組的以下方法：
// push,pop,unshift,shift,splice,reseolve,sort
// this.arr.push(66)
// 如果想通過下標操作數(shù)組大年，也必須要使用$set和$delete方法
this.$set(this.arr,5,66)
},
delArr(){
// this.arr.splice(2,1)
this.$delete(this.arr,2)
}
},
})
</script>
