一、V-model指令.
在表單元素上的使用。
默認(rèn)觸發(fā)的是input事件。當(dāng)文本框的值發(fā)生變化后，立刻同步給數(shù)據(jù)
（1）、針對(duì)文本框的雙向綁定?；居梅?。
當(dāng)內(nèi)容發(fā)生變化時(shí)，數(shù)據(jù)也發(fā)生變化
<div>
<!-- 針對(duì)文本框的雙向綁定。默認(rèn)觸發(fā)的是input事件。
當(dāng)內(nèi)容發(fā)生變化時(shí)，數(shù)據(jù)也發(fā)生變化 -->
姓名： <input type="text" v-model="name">{{name}}
</div>
vue內(nèi)容
data: {
name: '李易峰',
},
(2)、綁定多行文本域
<div>
<!-- textarea:多行文本域。cols：列。rows：行 -->
地址： <textarea cols="50" rows="5" v-model="address"></textarea>{{address}}
</div>
vue內(nèi)容
data: {
name: '李易峰',
address: "四川省，成都市，金牛區(qū)",
},
（3）、綁定一組單選框。每個(gè)單選框指定相同的屬性。
<input v-model="sex" type="radio" value="男" name="sex">男
<input v-model="sex" type="radio" value="女" name="sex">女
<span style="color: red;">{{sex}}</span>
vue:
sex: '男',
4、綁定單個(gè)復(fù)選框。需要綁定一個(gè)布爾值（Boolean）
<input type="checkbox" v-model="isOk">{{isOk}}
vue:
isOk: false,
（5）、綁定多個(gè)復(fù)選框。需要綁定同一個(gè)數(shù)組
<div>
<!-- v-model:綁定多個(gè)復(fù)選框，需要綁定同一個(gè)數(shù)組 -->
愛(ài)好：
<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="看書(shū)">看書(shū)
<input v-model="hobbies" type="checkbox" value="看電影">看電影
<input v-model="hobbies" type="checkbox" value="健身">健身
<span style="color: red;">{{hobbies}}</span>
</div>
vue:
hobbies: ['唱歌', '演戲', '旅游', '看書(shū)'],
(6)、綁定一個(gè)數(shù)組
<div>
<!-- v-model:綁定一個(gè)數(shù)組 -->
喜歡的食物：
<!-- multiple:支持多個(gè)。 -->
<select multiple v-model="foods">
<option value="火鍋">火鍋</option>
<option value="串串">串串</option>
<option value="香蕉">香蕉</option>
<option value="蘋(píng)果">蘋(píng)果</option>
<option value="德芙">德芙</option>
<option value="奶酪包">奶酪包</option>
</select>
<span style="color: salmon;">{{foods}}</span>
</div>
vue:
修飾符：
（1）、.lazy修飾符?？梢詫nput事件轉(zhuǎn)換為change事件。
<input type="text" v-model.lazy.trim="name">開(kāi)始{{name}}結(jié)束
（2）、.trim修飾符。用于去除內(nèi)容首尾空格。
<input type="text" v-model.lazy.trim="name">開(kāi)始{{name}}結(jié)束
</div>
（3）、.number修飾符。會(huì)自動(dòng)將輸入的內(nèi)容轉(zhuǎn)換為number。
年齡： <input type="text" v-model.number="age">{{age}}
二、綁定事件
1、@(v-on:)的簡(jiǎn)寫(xiě)。通過(guò)@指令綁定事件，指定一個(gè)methods選項(xiàng)里面定義的方法
（1）、調(diào)用方法時(shí)，不傳參數(shù)。默認(rèn)會(huì)將事件對(duì)象作為參數(shù)傳遞
<button @click="sayHi">sayHi</button
vue:
// e默認(rèn)參數(shù)
sayHi(e) {
console.log(e);
alert('Hi!')
},
（2）、調(diào)用方法時(shí)，穿的什么參數(shù)，接的就是什么參數(shù)。
<button @click="sayHellow('hello')">sayHellow</button>
vue:
sayHellow(e) {
console.log(e);
alert("hello")
},
####（3）、調(diào)用方法時(shí)，傳遞一個(gè)$event參數(shù)，該參數(shù)就是事件對(duì)象
···
<button @click="sayNice('Nice',$event)">sayNice</button>
vue:
sayNice(msg, e) {
console.log(e);
alert(msg)
},
(4)、當(dāng)事件處理的代碼比較簡(jiǎn)單時(shí)，可以將代碼直接寫(xiě)在行內(nèi)。注意：只能操作vue管理的數(shù)據(jù)
<button @click='age++'>年齡++</button>
vue:
data: {
age: 34
},
(5)、.prevent。事件修飾符。用于阻止默認(rèn)行為。
<div class="box" @contextmenu.prevent="showBox">
box
</div>
vue:
showBox(e) {
// 組織默認(rèn)行為
// e.preventDefault();
alert('你好，我是BOX')
},
(6)、.once:用于只綁定一次的事件方法。
<div class="one" @click.once="one">
</div>
vue:
one() {
alert('你好，我是one')
},
(7)、.stop：用于阻止事件冒泡。
<div class="one" @click.once="one">
<!-- .stop:用于阻止事件冒泡 -->
<div class="two" @click.stop="two"></div>
</div>
vue:
two(e) {
// 阻止事件冒泡
// e.stopPropagation();
alert('你好，我是two')
},
(8)、.self:只能在自身元素上觸發(fā)。不能在子元素上觸發(fā)。類(lèi)似冒泡。
<div class="box2" @click.self="showbox2">
<div class="box3">
</div>
</div>
vue:
showbox2() {
alert('你好，我是box2')
},
(9)、每次鍵盤(pán)彈起，都會(huì)調(diào)用事件函數(shù)。
請(qǐng)輸入搜索關(guān)鍵字<input type="text" @keyup="keyup">
vue:
keyup(e){
alert('你按鍵了')
},
(10)、只在按下enter（回車(chē)鍵）的時(shí)候，才會(huì)調(diào)用事件方法。
請(qǐng)輸入搜索關(guān)鍵字<input type="text" @keyup.enter="keyup1">
vue:
keyup1(e){
let {keyCode}=e
if (keyCode===13) {
alert('搜索指定的商品')
alert('你按下了回車(chē)鍵')
}
// alert('搜索指定的商品')
},
三、深度響應(yīng)式
響應(yīng)式：數(shù)據(jù)發(fā)生變化時(shí)，頁(yè)面自動(dòng)更新。
1、Vue通過(guò)$delete方法，刪除對(duì)象的屬性。并觸發(fā)響應(yīng)式
2、 在Vue中，操作數(shù)組，并觸發(fā)頁(yè)面更新，只能使用數(shù)組的以下方法.push,pop,unshift,shift,splice,reseolve,sort
arr:[11,22,33,44,55]
this.arr.push(66)
css:
<style>
#app button {
background-color: sienna;
color: wheat;
border-radius: 10px;
}
</style>
HTML:
<body>
<div id="app">
<div>
姓名： <input type="text" v-model="name">{{name}}
</div><br>
<div>
基本信息：
<input type="text" v-model="obj.name">
<input type="text" v-model.number="obj.age">
<button @click="addSex">添加性別</button>
<button @click="delAge">刪除年齡</button>
<br><br>
{{obj}}
</div><br>
<div>
數(shù)組：{{arr}}
<br><br>
<button @click="addArr">添加數(shù)據(jù)</button>
<button @click="delArr">刪除數(shù)據(jù)</button>
</div>
</div>
vue:
<script src='https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js'></script>
<script>
Vue.config.productionTip = false
new Vue({
el: "#app",
data: {
// 基本類(lèi)型數(shù)據(jù)
name: '李易峰',
// 對(duì)象類(lèi)型數(shù)據(jù)
obj: {
name: '李易峰',
age: 34,
},
arr:[11,22,33,44,55]
},
methods: {
// 添加性別
addSex() {
// obj對(duì)象里面的每一個(gè)屬性，都會(huì)采用Object.defineProperty去封裝，實(shí)現(xiàn)響應(yīng)式。
// 給對(duì)象后添加的數(shù)據(jù)，不會(huì)采用Object.defineProperty封裝。所以就失去了響應(yīng)式
// this.obj.sex = '男'
this.$set(this.obj,'sex','男')
},
// 刪除年齡
delAge(){
// 采用 delete 關(guān)鍵字刪除對(duì)象的屬性后。也沒(méi)有觸發(fā)頁(yè)面更新
// delete this.obj.age
this.$delete(this.obj,'age')
},
// 添加數(shù)組的數(shù)據(jù)
addArr(){
// this.arr[5]=66 //采用這種方式，不會(huì)觸發(fā)頁(yè)面更新
// 如果想通過(guò)下標(biāo)操作數(shù)組，也必須要使用$set和$delete方法
this.$set(this.arr,5,66)
},
delArr(){
// this.arr.splice(2,1)
this.$delete(this.arr,2)
}
},
})
</script>
