一、v-model指令和修飾符：
1.v-model指令雙向綁定的注意事項(xiàng)：
（1）、v-model指令默認(rèn)觸發(fā)的是input事件，當(dāng)文本框的值發(fā)生變化后，立刻同步給數(shù)據(jù)
（2）、?v-model綁定一組單選框，每個(gè)單選框指定相同的屬性
（3）、v-model綁定單個(gè)復(fù)選框,綁定一個(gè)boolean值? ?v-model綁定多個(gè)復(fù)選框,綁定同一個(gè)數(shù)組
（4）、單選菜單?綁定一個(gè)屬性? ?多選菜單?綁定一個(gè)數(shù)組
2.修飾符：
.lazy-----可以將input事件轉(zhuǎn)換為change事件
.trim-----用于去掉內(nèi)容首尾的空格
<input?type="text"?v-model.lazy.trim='name'>{{name}}
通過修飾符.lazy 表單中本來因?yàn)殡p向綁定而同步變化的value和data中的name屬性會(huì)在離開input表單窗口后再同步
.number-----用于將字符串轉(zhuǎn)為數(shù)字?
<input?type="text"?v-model.number='age'>
data中的age傳過來的數(shù)字是字符串的形式 加上.number后就又是數(shù)字了 可以進(jìn)行運(yùn)算
二、綁定事件、事件修飾符：
1.v-on: 縮寫是@ 綁定事件的注意事項(xiàng)：
解釋以下就是當(dāng)綁定了事件后對(duì)方法不穿參數(shù)，那么就會(huì)默認(rèn)傳一個(gè)事件對(duì)象 e 進(jìn)去
可以通過console.log(e)來查看
如果傳了參數(shù)那么方法在運(yùn)行時(shí)就會(huì)接收到這個(gè)參數(shù)
比如在上述代碼中 運(yùn)行sayHello方法時(shí)會(huì)有個(gè)? hello? 出現(xiàn)
$event 參數(shù) 就是事件對(duì)象
2.綁定樣式行內(nèi)式寫法：
3.事件修飾符：
（1）、.stop修飾符，用于阻止事件冒泡? ?子盒子的事件不會(huì)傳給父盒子
? ? ? ? ? ? ?等同于在方法中寫? e.stopPropagation();//阻止事件冒泡
（2）、.prevent修飾符，用于阻止默認(rèn)行為
? ? ? ? ? ? ?等同于在方法中寫? e.preventDefault();//阻止默認(rèn)事件
（3）、.once修飾符，用于只綁定一次事件方法(只能調(diào)用一次?后面在點(diǎn)擊就無效了)
（4）、.self修飾符，只能在自身元素上觸發(fā)，不能在子元素身上觸發(fā)
? ? ? ? ? ? ? 這個(gè)有點(diǎn)類似于冒泡，區(qū)別在于這個(gè)是 父盒子的事件不會(huì)在點(diǎn)擊子盒子時(shí)觸發(fā)
三、深度響應(yīng)式和按鍵修飾符：
1.按鍵修飾符：
Vue針對(duì)鍵盤事件，提供了按鍵修飾符。
一共有9個(gè)按鍵修飾符，分別是：
.enter?是回車鍵
.tab?是tab鍵?
.delete?是刪除鍵和退格鍵????????
.esc?是退出鍵???????
?.space?是空格鍵????????
.up?是上箭頭????????
.down?是下箭頭????????
.left?是左箭頭????????
.right?是右箭頭
2.深度響應(yīng)式：
根據(jù)圖中的代碼進(jìn)行一步步分析
（1）、addSex（）方法中，使用 this.obj.sex ='男' 來給data中的obj對(duì)象增加屬性。
這樣添加的屬性不會(huì)采用Object.defineProperties去封裝，所以，就失去了響應(yīng)式。
所以對(duì)data中的obj有影響但是對(duì)頁面沒有影響，頁面不會(huì)更新。
通過$set方法? ?this.$set(this.obj,'sex','男')? 可以給對(duì)象添加響應(yīng)式屬性。
（2）、delAge（）方法與上述同理
delete?this.obj.age? 刪除obj中的age屬性 并沒有響應(yīng)式 所以頁面不會(huì)刷新
而通過$delete方法? ? this.$delete(this.obj,'age')，刪除對(duì)象的屬性，并觸發(fā)響應(yīng)式
（3）、addArr（）方法是要給data中的arr數(shù)組添加元素
this.arr[5]=66 這個(gè)方法不觸發(fā)頁面更新
特別注意：
在vue中，操作數(shù)組，并觸發(fā)頁面更新只能使用數(shù)組的以下方法： push(),pop () ,unshift () ,shift () ,splice () ,reverse () ,sort ()
所以：
this.arr.push(66)? ?和? ?this.$set(this.arr,5,66)? ?
這兩個(gè)方法其實(shí)都可以在改變數(shù)據(jù)的同時(shí)刷新頁面
（4）、delArr（）方法刪除arr數(shù)組中的第三位（下標(biāo)為2）用splice截取一位
this.arr.splice(2,1)? ?和? ?this.$delete(this.arr,2)? ?就同上，都能夠在改變數(shù)據(jù)的同時(shí)刷新頁面
四、深度響應(yīng)式小練習(xí)：
截圖有點(diǎn)麻煩直接上代碼了 大致意思就是通過this.$set（）方法和this.$delete（）方法給data中的對(duì)象添加及刪除屬性和屬性值
<body>
????<div?id="app">
????????<div>
????????????{{obj}}
????????</div>
????????<div>
???????????屬性：<input?type="text"?v-model='key'>?
????????</div>
????????<div>
??????????屬性值：<input?type="text"?v-model='value'>??
????????</div>
????????<div>
????????????<button?@click='add'>添加屬性</button>
????????</div>
????????<div>
??????????屬性：<input?type="text"?v-model='key2'>??
????????</div>
????????<button?@click='del'>刪除屬性</button>
????</div>
????<script?src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
????<script>
????????new?Vue({
????????????el:'#app',
????????????data:{
????????????????obj:{
????????????????},
????????????????key:'',
????????????????value:'',
????????????????key2:''
????????????},
????????????methods:{
????????????????add(){
????????????????????//設(shè)置的效果為添加或者修改?如果對(duì)象沒有這個(gè)屬性?就添加?如果有?就修改
????????????????????//設(shè)置obj對(duì)象的key屬性值為value
????????????????????this.$set(this.obj,this.key,this.value)
????????????????},
????????????????del(){
????????????????????this.$delete(this.obj,this.key2)
????????????????}
????????????}
????????})
????</script>
</body>
