上篇：VUE從入門到入坑—03.樣式綁定 / 計算屬性 / 監聽|偵聽器 / 局部|全局過濾器
一、v-model指令
Vue中經常使用到<input>和<textarea>等元素，使用v-model實現這些標簽數據的雙向綁定，它會根據控件類型自動選取正確的方法來更新元素。
1.綁定文本框的內容，實現雙向數據綁定。
<div id="app">
<div>
姓名：<input type="text" v-model="name">{{name}}
</div>
</div>
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
2.v-model指令，綁定多行文本框的內容，實現雙向數據綁定。
<div id="app">
<div>
地址：<textarea v-model="address" cols="30" rows="10" ></textarea>{{address}}
</div>
</div>
new Vue({
el:'#app',
data:{
addrsess:'江蘇省，南京市，雨花臺區'
}
})
3.綁定一組單選按鈕，每個單選按鈕通過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.單個復選框，通過v-model綁定一個布爾值。
<div id="app">
<div>
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
</div>
</div>
new Vue({
el:'#app',
data:{
isOk: false
}
})
5.多個復選框，通過v-model綁定到同一個數組。
<div id="app">
<div>
喜好：
<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>
</div>
new Vue({
el:'#app',
data:{
hobbies:['吃飯','睡覺','打泡泡']
}
})
6.單選擇下拉框時，下拉框綁定一個屬性。
<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.多選擇下拉框時，給下拉框綁定一個數組，下拉框設置multiple屬性后，選擇多個項。
<div id="app">
<div>
喜歡的食物：
下拉框設置multiple屬性后，就可以選擇多個項。
<select multiple v-model="foods">
多選時，通過v-mode給下拉框綁定一個數組。
<option value="蘋果">蘋果</option>
<option value="菠蘿">菠蘿</option>
<option value="草莓">草莓</option>
<option value="蛋糕">蛋糕</option>
<option value="火龍果">火龍果</option>
</select>
{{foods}}
</div>
</div>
new Vue({
el:'#app',
data:{
foods:['蘋果','草莓','蛋糕']
}
})
二、v-model修飾符
1..lazy修飾符
添加了.lazy修飾符，可以將input事件轉為change事件，在文本框失去焦點后再更新數據。
<div id="app">
<div>
姓名：<input type="text" v-model.lazy="name">{{name}}
</div>
</div>
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
2..number修飾符
.number修飾符，在修改文本框內容時，會將修改后的內容轉為number類型。
<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修飾符，在修改文本框內容時，會自動過濾內容的首尾空格。
<div id="app">
<div>
姓名：<input type="text" v-model.trim="name">開始{{name}}結束
</div>
</div>
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
三、事件處理
@是v-on:的簡寫，通過v-on:指令綁定事件。
1.事件綁定方法不傳參
通過v-on:指令綁定事件，指定一個methods選項里面的定義的方法，調用方法時，不傳參數，默認會將事件對象作為參數傳遞。
<div id="app">
<button @click="sayHi">sayHi</button>
</div>
new Vue({
el:'#app',
methods: {
sayHi(e){
console.log(e); ??打印事件對象
alert('Hi！')
}
}
})
2.事件綁定方法傳參
調用方法時，傳的是什么參數，接的就是什么參數。
<div id="app">
<button @click="sayHello('hello')">sayHello</button>
</div>
new Vue({
el:'#app',
methods: {
sayHello(e){
console.log(e); ??打印‘hello’
alert('Hello！')
}
}
})
3.事件綁定方法既傳參又傳遞事件對象
如果傳遞了一個參數，又想再傳遞事件對象參數，就要通過$event關鍵字設置參數，該參數就是事件對象。
<div id="app">
<button @click="sayNice('Nice',$event)">sayNice</button>
</div>
new Vue({
el:'#app',
methods: {
sayNice(msg,e){
console.log(e); ??打印事件對象
alert(msg) ??彈出消息‘Nice’
}
}
})
4.行內方法
當事件梳理的代碼比較簡單時，可以將代碼直接寫在行內，注意：只能操作vue管理的數據。
<div id="app">
<button @click="age++">年齡++</button>
</div>
new Vue({
el:'#app',
data:{
age:18
}
})
四、事件修飾符
1..prevent修飾符，在事件處理程序中調用 event.preventDefault() 阻止默認行為，可以通過.prevent事件修飾符，阻止默認行為。
<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() 阻止默認行為
console.log('你好,我是box');
}
},
})
2..stop修飾符，在事件處理程序中調用 event.stopPropagation() 阻止事件冒泡，可以通過.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修飾符，讓事件方法只執行一次。
<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修飾符，控制事件在當前元素自身觸發，不在內部元素身上觸發，和.stop修飾符有點相像，區別就是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針對鍵盤事件，提供了按鍵修飾符。按鍵修飾符也可以用按鍵碼（keyCode）代替，例如：enter可以用.13代替。注意：Vue3中取消了按鍵碼。
一共有9個按鍵修飾符，分別是：.enter 是回車鍵，.tab 是tab鍵，.delete 是刪除鍵和退格鍵，.esc 是退出鍵，.space 是空格鍵，.up 是上箭頭，.down 是下箭頭，.left 是左箭頭，.right 是右箭頭
<div id="app">
<div>
<!-- 每次鍵盤彈起都會調用事件方法 -->
請輸入搜索關鍵字：<input type="text" @keyup="keyup">
</div>
<div>
<!-- 只在回車時，才會調用事件方法 -->
請輸入搜索關鍵字：<input type="text" @keyup.enter="keyup1">
<!-- 請輸入搜索關鍵字：<input type="text" @keyup.13="keyup1"> -->
</div>
</div>
new Vue({
el:'#app',
methods: {
keyup(e){
let {keyCode} = e
if(keyCode===13){
alert('搜索指定的商品')
}
},
keyup1(){
alert('搜索指定的商品')
}
}
})
六、深度響應式
1.Vue實例在初始化的時候，會將obj對象身上的所有數據，采用Object.defineProperty去封裝，做響應式處理。所謂響應式，指的是數據發生變化后，頁面自動更新。
2.但是給對象后添加的數據不會采用Object.defineProperty去封裝，所以就不再具備響應式能力了。
3.實現后添加的數據也具備響應式能力，有以下兩種方式：
(1)通過Vue的set方法，更新指定的對象屬性或數組成員；delete方法，刪除指定對象的屬性或數組的成員。
(2)通過Vue實例的$set方法，更新指定的對象屬性或數組成員，$delete方法，刪除指定對象的屬性或數組的成員。
4.更新對象例子
set方法的參數分別是：指定的對象，對象的屬性，屬性值。
delete方法的參數分別是：指定的對象，對象的屬性。
<div id="app">
<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>
{{obj}}
</div>
</div>
let vm = new Vue({
el:'#app',
data:{
obj:{
name:'張三',
age:20,
}
},
methods: {
// 添加性別
addSex(){
// 使用普通方法給對象后添加的屬性，失去了響應式
// this.obj.sex = '男'
// vue通過set方法，給對象添加響應式屬性
// Vue.set(this.obj,'sex','男')
// vue實例通過$set方法，給對象添加響應式屬性
this.$set(this.obj,'sex','男')
},
// 刪除年齡
delAge(){
// 采用delete關鍵字刪除對象的屬性后，沒有觸發頁面更新
// delete this.obj.age
// Vue的delete方法，刪除對象的屬性，并觸發響應式
// Vue.delete(this.obj,'age')
// vue實例通過$delete方法，刪除對象的屬性，并觸發響應式
this.$delete(this.obj,'age')
}
},
})
5.更新數組例子
(1)在Vue中，操作數組只能通過以下方法，才能實現響應式：push()、pop()、unshift() 、shift()、splice()、reverse()、sort()。
(2)如果想通過下標直接操作數組，也必須要使用Vue的sett和delete方法或者Vue實例的$set和$delete方法。
set方法的參數分別是：指定的數組，數組的下標，對應的數據。
delete方法的參數分別是：指定的數組，數組的下標。
<div id="app">
<div>
數組：{{arr}}
<button @click="updateArr">修改數據</button>
<button @click="addArr">添加數據</button>
<button @click="delArr">刪除數據</button>
</div>
</div>
let vm = new Vue({
el:'#app',
data:{
arr:[11,22,33,44,55]
},
methods: {
// 修改數組身上的成員
updateArr(){
// 注意：直接利用索引設置數組項，不會觸發頁面更新
// this.arr[1] = 32
// vue通過set方法，可以利用索引直接設置一個數組項
// Vue.set(this.arr,1,32)
// vue實例通過$set方法，可以利用索引直接設置一個數組項
this.$set(this.arr,1,32)
},
// 添加數組的數據
addArr(){
// this.arr[5] = 66 // 注意：采用這種方式，不會觸發頁面更新
// vue通過set方法，給數組添加響應式數據
// Vue.set(this.arr,5,66)
// vue實例通過$set方法，給數組添加響應式數據
this.$set(this.arr,5,66)
},
// 刪除數組的數據
delArr(){
// 采用delete關鍵字刪除數組下標為2的元素后，沒有觸發頁面更新
// delete this.arr[2]
// vue通過delete方法，給數組刪除數據，并觸發響應式
// Vue.delete(this.arr,2)
// vue實例通過$delete方法，給數組刪除數據，并觸發響應式
this.$delete(this.arr,2)
}
},
})
