上篇：VUE從入門(mén)到入坑—03.樣式綁定 / 計(jì)算屬性 / 監(jiān)聽(tīng)|偵聽(tīng)器 / 局部|全局過(guò)濾器
一、v-model指令
Vue中經(jīng)常使用到<input>和<textarea>等元素，使用v-model實(shí)現(xiàn)這些標(biāo)簽數(shù)據(jù)的雙向綁定胞皱，它會(huì)根據(jù)控件類(lèi)型自動(dòng)選取正確的方法來(lái)更新元素邪意。
1.綁定文本框的內(nèi)容，實(shí)現(xiàn)雙向數(shù)據(jù)綁定反砌。
<div id="app">
<div>
姓名：<input type="text" v-model="name">{{name}}
</div>
</div>
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
2.v-model指令抄罕，綁定多行文本框的內(nèi)容，實(shí)現(xiàn)雙向數(shù)據(jù)綁定于颖。
<div id="app">
<div>
地址：<textarea v-model="address" cols="30" rows="10" ></textarea>{{address}}
</div>
</div>
new Vue({
el:'#app',
data:{
addrsess:'江蘇省，南京市嚷兔，雨花臺(tái)區(qū)'
}
})
3.綁定一組單選按鈕森渐，每個(gè)單選按鈕通過(guò)v-model綁定相同的屬性。
<div id="app">
<div>
性別：
<input v-model="sex" type="radio" value="g" name="sex">男
<input v-model="sex" type="radio" value="m" name="sex">女
<span style="color: red">{{sex}}</span>
</div>
</div>
new Vue({
el:'#app',
data:{
sex:'g'
}
})
4.單個(gè)復(fù)選框冒晰，通過(guò)v-model綁定一個(gè)布爾值同衣。
<div id="app">
<div>
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
</div>
</div>
new Vue({
el:'#app',
data:{
isOk: false
}
})
5.多個(gè)復(fù)選框，通過(guò)v-model綁定到同一個(gè)數(shù)組壶运。
<div id="app">
<div>
喜好：
<input v-model="hobbies" type="checkbox" value="吃飯">吃飯
<input v-model="hobbies" type="checkbox" value="睡覺(jué)">睡覺(jué)
<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>
</div>
new Vue({
el:'#app',
data:{
hobbies:['吃飯','睡覺(jué)','打泡泡']
}
})
6.單選擇下拉框時(shí)耐齐，下拉框綁定一個(gè)屬性。
<div id="app">
<div>
城市：
<select v-model="city">
<option value="北京">北京</option>
<option value="南京">南京</option>
<option value="上海">上海</option>
<option value="深圳">深圳</option>
</select>
<span style="color: red;">{{city}}</span>
</div>
</div>
new Vue({
el:'#app',
data:{
city: '南京'
}
})
7.多選擇下拉框時(shí)蒋情，給下拉框綁定一個(gè)數(shù)組埠况，下拉框設(shè)置multiple屬性后，選擇多個(gè)項(xiàng)棵癣。
<div id="app">
<div>
喜歡的食物：
下拉框設(shè)置multiple屬性后辕翰，就可以選擇多個(gè)項(xiàng)。
<select multiple v-model="foods">
多選時(shí)狈谊，通過(guò)v-mode給下拉框綁定一個(gè)數(shù)組喜命。
<option value="蘋(píng)果">蘋(píng)果</option>
<option value="菠蘿">菠蘿</option>
<option value="草莓">草莓</option>
<option value="蛋糕">蛋糕</option>
<option value="火龍果">火龍果</option>
</select>
{{foods}}
</div>
</div>
new Vue({
el:'#app',
data:{
foods:['蘋(píng)果','草莓','蛋糕']
}
})
二、v-model修飾符
1..lazy修飾符
添加了.lazy修飾符河劝，可以將input事件轉(zhuǎn)為change事件壁榕，在文本框失去焦點(diǎn)后再更新數(shù)據(jù)。
<div id="app">
<div>
姓名：<input type="text" v-model.lazy="name">{{name}}
</div>
</div>
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
2..number修飾符
.number修飾符赎瞎，在修改文本框內(nèi)容時(shí)牌里，會(huì)將修改后的內(nèi)容轉(zhuǎn)為number類(lèi)型。
<div id="app">
<div>
年齡：<input type="text" v-model.number="age">{{age+20}}
</div>
</div>
new Vue({
el:'#app',
data:{
age: 18
}
})
3..trim修飾符
trim修飾符煎娇，在修改文本框內(nèi)容時(shí)二庵，會(huì)自動(dòng)過(guò)濾內(nèi)容的首尾空格。
<div id="app">
<div>
姓名：<input type="text" v-model.trim="name">開(kāi)始{{name}}結(jié)束
</div>
</div>
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
三缓呛、事件處理
@是v-on:的簡(jiǎn)寫(xiě)催享，通過(guò)v-on:指令綁定事件。
1.事件綁定方法不傳參
通過(guò)v-on:指令綁定事件哟绊，指定一個(gè)methods選項(xiàng)里面的定義的方法因妙，調(diào)用方法時(shí)，不傳參數(shù)，默認(rèn)會(huì)將事件對(duì)象作為參數(shù)傳遞攀涵。
<div id="app">
<button @click="sayHi">sayHi</button>
</div>
new Vue({
el:'#app',
methods: {
sayHi(e){
console.log(e); ??打印事件對(duì)象
alert('Hi铣耘！')
}
}
})
2.事件綁定方法傳參
調(diào)用方法時(shí)，傳的是什么參數(shù)以故，接的就是什么參數(shù)蜗细。
<div id="app">
<button @click="sayHello('hello')">sayHello</button>
</div>
new Vue({
el:'#app',
methods: {
sayHello(e){
console.log(e); ??打印‘hello’
alert('Hello！')
}
}
})
3.事件綁定方法既傳參又傳遞事件對(duì)象
如果傳遞了一個(gè)參數(shù)怒详，又想再傳遞事件對(duì)象參數(shù)炉媒，就要通過(guò)$event關(guān)鍵字設(shè)置參數(shù)，該參數(shù)就是事件對(duì)象昆烁。
<div id="app">
<button @click="sayNice('Nice',$event)">sayNice</button>
</div>
new Vue({
el:'#app',
methods: {
sayNice(msg,e){
console.log(e); ??打印事件對(duì)象
alert(msg) ??彈出消息‘Nice’
}
}
})
4.行內(nèi)方法
當(dāng)事件梳理的代碼比較簡(jiǎn)單時(shí)吊骤，可以將代碼直接寫(xiě)在行內(nèi)，注意：只能操作vue管理的數(shù)據(jù)静尼。
<div id="app">
<button @click="age++">年齡++</button>
</div>
new Vue({
el:'#app',
data:{
age:18
}
})
四白粉、事件修飾符
1..prevent修飾符，在事件處理程序中調(diào)用 event.preventDefault() 阻止默認(rèn)行為鼠渺，可以通過(guò).prevent事件修飾符鸭巴，阻止默認(rèn)行為。
<div id="app">
<div @contextmenu.prevent='showbox' class="box"></div>
<!-- <div @contextmenu='showbox' class="box"></div> -->
</div>
new Vue({
el:'#app',
methods: {
showbox(e){
// e.preventDefault() 阻止默認(rèn)行為
console.log('你好,我是box');
}
},
})
2..stop修飾符拦盹，在事件處理程序中調(diào)用 event.stopPropagation() 阻止事件冒泡奕扣，可以通過(guò).stop事件修飾符綁定給子元素，阻止事件冒泡掌敬。
<div id="app">
<div class="one" @click='one'>
<!-- <div class="two" @click='two'></div> -->
<div class="two" @click.stop='two'></div>
</div>
</div>
new Vue({
el:'#app',
methods: {
one(){
console.log('你好惯豆，我是one');
},
two(e){
// e.stopPropagation() 阻止事件冒泡
console.log('你好，我是two');
}
},
})
3.once修飾符奔害，讓事件方法只執(zhí)行一次楷兽。
<div id="app">
<div class="one" @click.once='one'>
<!-- <div class="two" @click='two'></div> -->
<div class="two" @click.stop='two'></div>
</div>
</div>
new Vue({
el:'#app',
methods: {
one(){
console.log('你好，我是once');
},
two(e){
// e.stopPropagation() 阻止事件冒泡;
console.log('你好华临，我是two');
}
},
})
4..self修飾符芯杀，控制事件在當(dāng)前元素自身觸發(fā)，不在內(nèi)部元素身上觸發(fā)雅潭，和.stop修飾符有點(diǎn)相像揭厚，區(qū)別就是self是綁定給父元素的。
<div id="app">
<div class="one" @click.self='one'>
<div class="two" @click='two'></div>
</div>
new Vue({
el:'#app',
methods: {
one(){
console.log('你好扶供，我是self');
},
two(){
console.log('你好筛圆，我是two');
}
},
})
五、按鍵修飾符
Vue針對(duì)鍵盤(pán)事件椿浓，提供了按鍵修飾符太援。按鍵修飾符也可以用按鍵碼（keyCode）代替闽晦，例如：enter可以用.13代替。注意：Vue3中取消了按鍵碼提岔。
一共有9個(gè)按鍵修飾符仙蛉，分別是：.enter 是回車(chē)鍵，.tab 是tab鍵碱蒙，.delete 是刪除鍵和退格鍵荠瘪，.esc 是退出鍵，.space 是空格鍵赛惩，.up 是上箭頭巧还，.down 是下箭頭，.left 是左箭頭坊秸，.right 是右箭頭
<div id="app">
<div>
<!-- 每次鍵盤(pán)彈起都會(huì)調(diào)用事件方法 -->
請(qǐng)輸入搜索關(guān)鍵字：<input type="text" @keyup="keyup">
</div>
<div>
<!-- 只在回車(chē)時(shí)，才會(huì)調(diào)用事件方法 -->
請(qǐng)輸入搜索關(guān)鍵字：<input type="text" @keyup.enter="keyup1">
<!-- 請(qǐng)輸入搜索關(guān)鍵字：<input type="text" @keyup.13="keyup1"> -->
</div>
</div>
new Vue({
el:'#app',
methods: {
keyup(e){
let {keyCode} = e
if(keyCode===13){
alert('搜索指定的商品')
}
},
keyup1(){
alert('搜索指定的商品')
}
}
})
六澎怒、深度響應(yīng)式
1.Vue實(shí)例在初始化的時(shí)候褒搔，會(huì)將obj對(duì)象身上的所有數(shù)據(jù)，采用Object.defineProperty去封裝喷面，做響應(yīng)式處理星瘾。所謂響應(yīng)式，指的是數(shù)據(jù)發(fā)生變化后惧辈，頁(yè)面自動(dòng)更新琳状。
2.但是給對(duì)象后添加的數(shù)據(jù)不會(huì)采用Object.defineProperty去封裝，所以就不再具備響應(yīng)式能力了盒齿。
3.實(shí)現(xiàn)后添加的數(shù)據(jù)也具備響應(yīng)式能力念逞，有以下兩種方式：
(1)通過(guò)Vue的set方法，更新指定的對(duì)象屬性或數(shù)組成員边翁；delete方法翎承，刪除指定對(duì)象的屬性或數(shù)組的成員。
(2)通過(guò)Vue實(shí)例的$set方法符匾，更新指定的對(duì)象屬性或數(shù)組成員叨咖，$delete方法，刪除指定對(duì)象的屬性或數(shù)組的成員啊胶。
4.更新對(duì)象例子
set方法的參數(shù)分別是：指定的對(duì)象甸各，對(duì)象的屬性，屬性值焰坪。
delete方法的參數(shù)分別是：指定的對(duì)象趣倾，對(duì)象的屬性。
<div id="app">
<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>
let vm = new Vue({
el:'#app',
data:{
obj:{
name:'張三',
age:20,
}
},
methods: {
// 添加性別
addSex(){
// 使用普通方法給對(duì)象后添加的屬性某饰，失去了響應(yīng)式
// this.obj.sex = '男'
// vue通過(guò)set方法誊酌，給對(duì)象添加響應(yīng)式屬性
// Vue.set(this.obj,'sex','男')
// vue實(shí)例通過(guò)$set方法部凑，給對(duì)象添加響應(yīng)式屬性
this.$set(this.obj,'sex','男')
},
// 刪除年齡
delAge(){
// 采用delete關(guān)鍵字刪除對(duì)象的屬性后，沒(méi)有觸發(fā)頁(yè)面更新
// delete this.obj.age
// Vue的delete方法碧浊，刪除對(duì)象的屬性涂邀，并觸發(fā)響應(yīng)式
// Vue.delete(this.obj,'age')
// vue實(shí)例通過(guò)$delete方法，刪除對(duì)象的屬性箱锐，并觸發(fā)響應(yīng)式
this.$delete(this.obj,'age')
}
},
})
5.更新數(shù)組例子
(1)在Vue中比勉，操作數(shù)組只能通過(guò)以下方法，才能實(shí)現(xiàn)響應(yīng)式：push()驹止、pop()浩聋、unshift() 、shift()臊恋、splice()衣洁、reverse()、sort()抖仅。
(2)如果想通過(guò)下標(biāo)直接操作數(shù)組坊夫，也必須要使用Vue的sett和delete方法或者Vue實(shí)例的$set和$delete方法。
set方法的參數(shù)分別是：指定的數(shù)組撤卢，數(shù)組的下標(biāo)环凿，對(duì)應(yīng)的數(shù)據(jù)。
delete方法的參數(shù)分別是：指定的數(shù)組放吩，數(shù)組的下標(biāo)智听。
<div id="app">
<div>
數(shù)組：{{arr}}
<button @click="updateArr">修改數(shù)據(jù)</button>
<button @click="addArr">添加數(shù)據(jù)</button>
<button @click="delArr">刪除數(shù)據(jù)</button>
</div>
</div>
let vm = new Vue({
el:'#app',
data:{
arr:[11,22,33,44,55]
},
methods: {
// 修改數(shù)組身上的成員
updateArr(){
// 注意：直接利用索引設(shè)置數(shù)組項(xiàng)，不會(huì)觸發(fā)頁(yè)面更新
// this.arr[1] = 32
// vue通過(guò)set方法渡紫，可以利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)
// Vue.set(this.arr,1,32)
// vue實(shí)例通過(guò)$set方法到推，可以利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)
this.$set(this.arr,1,32)
},
// 添加數(shù)組的數(shù)據(jù)
addArr(){
// this.arr[5] = 66 // 注意：采用這種方式，不會(huì)觸發(fā)頁(yè)面更新
// vue通過(guò)set方法惕澎，給數(shù)組添加響應(yīng)式數(shù)據(jù)
// Vue.set(this.arr,5,66)
// vue實(shí)例通過(guò)$set方法环肘，給數(shù)組添加響應(yīng)式數(shù)據(jù)
this.$set(this.arr,5,66)
},
// 刪除數(shù)組的數(shù)據(jù)
delArr(){
// 采用delete關(guān)鍵字刪除數(shù)組下標(biāo)為2的元素后，沒(méi)有觸發(fā)頁(yè)面更新
// delete this.arr[2]
// vue通過(guò)delete方法集灌，給數(shù)組刪除數(shù)據(jù)悔雹，并觸發(fā)響應(yīng)式
// Vue.delete(this.arr,2)
// vue實(shí)例通過(guò)$delete方法，給數(shù)組刪除數(shù)據(jù)欣喧，并觸發(fā)響應(yīng)式
this.$delete(this.arr,2)
}
},
})
