Vue事件的基本操作你知道嗎
更新時(shí)間：2022年02月24日 16:18:06 作者：Tree_wws
這篇文章主要為大家詳細(xì)介紹了Vue事件的基本操作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1. 事件的基本操作
1.1 v-on
功能：綁定指定事件名的回調(diào)函數(shù)
標(biāo)準(zhǔn)寫(xiě)法： v-on:click='xxx' v-on:keyup='xxx(參數(shù))' v-on:keyup.enter='xxx' 簡(jiǎn)便寫(xiě)法： @click='xxx' @keyup='xxx' @keyup.enter='xxx'
1.1.1 v-on的小案例
<div id="root">
<!-- 需求當(dāng)點(diǎn)擊按鈕時(shí)彈出同學(xué)你好！ -->
<h1>歡迎來(lái)到{{name}}學(xué)習(xí)</h1>
<!-- v-on:xxx可以簡(jiǎn)寫(xiě)為： @xxx -->
<button v-on:click="btn1">點(diǎn)擊我進(jìn)行學(xué)習(xí)（不傳參）</button>
<button @click="btn2('hello!','同學(xué)',$event)">點(diǎn)擊我進(jìn)行學(xué)習(xí)（傳參）
//如果需要傳參數(shù)的話就在后面加（），里面寫(xiě)的就參數(shù)
</div>
<script>
/*
事件回調(diào)需要寫(xiě)在methods對(duì)象中，最終會(huì)在vm上
methods中配置的函數(shù)，不要使用箭頭函數(shù)
methods中配置的函數(shù)，this指向vm或者是組件實(shí)例化對(duì)象
*/
Vue.config.productionTip = false
var vm = new Vue({
el: '#root',
data: {
name: "清華大學(xué)"
},
methods: {
btn1() {
alert("同學(xué)你好！")
},
btn2(x, y, event) {
console.log(x, y);
console.log(event.target.innerText);
alert("同學(xué)你好！")
}
}
})
</script>
1.2 事件修飾符
Vue中的事件修飾符有6個(gè) - prevent : 阻止默認(rèn)行為 - stop : 禁止冒泡 - once : 事件只觸發(fā)一次 - capture : 使用事件捕獲模式 - self : 只有even.target所指向的操作元素才能觸發(fā)事件 - passive : 讓事件的默認(rèn)行為立即執(zhí)行<body>
<div id="root">
<!-- 1. prevent : 阻止默認(rèn)行為 -->
<a @click.prevent = "prevent">點(diǎn)擊我進(jìn)入b站</a>
<hr>
<!-- 2. stop : 禁止冒泡 -->
<div @click = "stop" class="div1">
<button @click.stop = "stop">點(diǎn)擊我觸發(fā)事件</button>
</div>
<hr>
<!-- 3. once : 事件只觸發(fā)一次 -->
<button @click.once = "once">我只能觸發(fā)一次哦</button>
<hr>
<!-- 4. capture : 使用事件捕獲模式 -->
<div class="box1" @click.capture = "capture(1)">
div1
<div class="box2" @click = "capture(2)">
div2
</div>
</div>
<hr>
<!-- 5. self : 只有even.target所指向的操作元素才能觸發(fā)事件
相當(dāng)于要滿足兩個(gè)條件
- 1. event.target必須指向self所修飾的元素
- 2. 觸發(fā)的也必須是這個(gè)元素
從某種意義上相當(dāng)于禁止了冒泡，因?yàn)槊芭蓦m然觸發(fā)上面事件
但是event.target所指向的并非是這個(gè)元素
-->
<div class="box3" @click.self = "self">
<button @click = "self">點(diǎn)擊我</button>
</div>
<hr>
<!-- 6. passive : 讓事件的默認(rèn)行為立即執(zhí)行
scroll:表示的是滾動(dòng)條進(jìn)行滾動(dòng)，滾動(dòng)條改變就觸發(fā)，并且滑到底就不能繼續(xù)觸發(fā)
wheel :表示的是鼠標(biāo)滾輪滾動(dòng),滾動(dòng)一次就觸發(fā)一次，滑到底依舊可以觸發(fā)
-->
<ul style="overflow: auto; height: 100px;" @scroll.passive = "passive">
<li style="height: 600px;"></li>
</ul>
<!-- 7. 如果想要使用多個(gè)修飾符可以使用鏈?zhǔn)叫问?-->
<!-- 需要即想要阻止冒泡，也想要禁止默認(rèn)行為 -->
<div @click = "stop" class="div1">
<a @click.stop.prevent = "stop" >點(diǎn)擊我進(jìn)入</a>
</div>
</div>
1.2.1 事件修飾符代碼解析
html代碼
<body>
<div id="root">
<!-- 1. prevent : 阻止默認(rèn)行為 -->
<a @click.prevent = "prevent">點(diǎn)擊我進(jìn)入b站</a>
<hr>
<!-- 2. stop : 禁止冒泡 -->
<div @click = "stop" class="div1">
<button @click.stop = "stop">點(diǎn)擊我觸發(fā)事件</button>
</div>
<hr>
<!-- 3. once : 事件只觸發(fā)一次 -->
<button @click.once = "once">我只能觸發(fā)一次哦</button>
<hr>
<!-- 4. capture : 使用事件捕獲模式 -->
<div class="box1" @click.capture = "capture(1)">
div1
<div class="box2" @click = "capture(2)">
div2
</div>
</div>
<hr>
<!-- 5. self : 只有even.target所指向的操作元素才能觸發(fā)事件
相當(dāng)于要滿足兩個(gè)條件
- 1. event.target必須指向self所修飾的元素
- 2. 觸發(fā)的也必須是這個(gè)元素
從某種意義上相當(dāng)于禁止了冒泡，因?yàn)槊芭蓦m然觸發(fā)上面事件
但是event.target所指向的并非是這個(gè)元素
-->
<div class="box3" @click.self = "self">
<button @click = "self">點(diǎn)擊我</button>
</div>
<hr>
<!-- 6. passive : 讓事件的默認(rèn)行為立即執(zhí)行
scroll:表示的是滾動(dòng)條進(jìn)行滾動(dòng)，滾動(dòng)條改變就觸發(fā)，并且滑到底就不能繼續(xù)觸發(fā)
wheel :表示的是鼠標(biāo)滾輪滾動(dòng),滾動(dòng)一次就觸發(fā)一次，滑到底依舊可以觸發(fā)
-->
<ul style="overflow: auto; height: 100px;" @scroll.passive = "passive">
<li style="height: 600px;"></li>
</ul>
<!-- 7. 如果想要使用多個(gè)修飾符可以使用鏈?zhǔn)叫问?-->
<!-- 需要即想要阻止冒泡，也想要禁止默認(rèn)行為 -->
<div @click = "stop" class="div1">
<a @click.stop.prevent = "stop" >點(diǎn)擊我進(jìn)入</a>
</div>
</div>
js代碼
<script>
Vue.config.productionTip = false
new Vue({
el: '#root',
data: {
},
methods:{
prevent(){
alert("禁止默認(rèn)行為");
},
stop(){
alert("禁止冒泡")
},
once(){
alert("只能觸發(fā)一次")
},
capture(x){
alert("現(xiàn)在是捕獲模式 "+x)
},
self()
{
alert("self")
},
passive(){
for (let index = 0; index < 1000; index++) {
console.log("1")
}
}
}
})
</script>
</body>
1.3 鍵盤(pán)事件
常用的按鍵別名：
1.正常使用
例如： @keyup.enter = "xxx"
- 回車(chē) enter
- 刪除 delete
- 退出 esc
- 空格 space
- 上 up
- 下 down
- 左 left
- 右 right
2. 特別的按鍵
系統(tǒng)修飾鍵 :
- ctrl,shift,alt,meta(就是window鍵)
- 換行 tab(必須配合keydown去使用)
- 配合keyup使用，當(dāng)按下修飾鍵的時(shí)候在按下其他的鍵，然后在松開(kāi)其他鍵事件才可以被觸發(fā)
- 配合keydown使用，就直接觸發(fā)事件
3.如果想要綁定其他按鍵，可以使用按鍵原始本身的key值（名字）去綁定
4.可以自定義去設(shè)置按鍵別名，Vue.config.keyCodes.自定義鍵名 = 鍵值
具體案例
<div id="root">
<h1>歡迎學(xué)習(xí){{name}}</h1>
<input type="text" @keyup="keyboard">
<br><br>
<input type="text" @keyup.huiche="keyboard">
<br><br>
<input type="text" @keyup.ctrl.y="keyboard">
</div>
<script>
Vue.config.productionTip = false
Vue.config.keyCodes.huiche = 13 //定義了一個(gè)別名
var vm = new Vue({
el: '#root',
data: {
name: "Vue"
},
methods:
{
keyboard(event){
// console.log(event.keyCode); 按鍵編碼
// console.log(event.key); 按鍵的名字
console.log(event.target.value);
}
}
})
</script>
1.4 計(jì)算屬性（computed）
1.在頁(yè)面中的使用方法：=={{方法名}}==來(lái)顯示計(jì)算結(jié)果
2.定義：要使用的屬性/變量不存在，需要通過(guò)已有的屬性計(jì)算出來(lái)的
3.原理：底層是借助了Object.defineProperty方法所提供的getter和setter
4.get函數(shù)執(zhí)行的時(shí)機(jī)：
（1）初次讀取的時(shí)候會(huì)執(zhí)行一次
（2）當(dāng)所依賴的數(shù)據(jù)發(fā)生改變時(shí)就會(huì)再次被調(diào)用
5.相比于methods的優(yōu)勢(shì)，內(nèi)部是有緩存機(jī)制（復(fù)用），效率會(huì)更高，調(diào)試會(huì)更方便
6.如果計(jì)算屬性要被修改，那必須寫(xiě)set函數(shù)去響應(yīng)修改，且set中要引起計(jì)算時(shí)依賴的數(shù)據(jù)發(fā)生改變
7.需要注意的一個(gè)特殊點(diǎn)：以下面例子舉例：get函數(shù)中return返回值的會(huì)作為fullname的值進(jìn)行返回，在控制臺(tái)可以看到是這樣的形式呈現(xiàn)fullname：xxx。
8.computed中的this指向是vm
9.簡(jiǎn)寫(xiě)形式: 基本要求就是在不使用set的情況下才可以簡(jiǎn)寫(xiě) 注意在調(diào)用的時(shí)候不要寫(xiě)成fullname()
<div id="root">
姓: <input type="text" v-model="firstname">
<br><br>
名: <input type="text" v-model="lastname">
<!-- 第一種寫(xiě)法 使用插值語(yǔ)法 -->
<!-- <h3>全名: {{firstname.slice(0,3)}} - {{lastname}}</h3> -->
<!-- 第二種寫(xiě)法 使用methods -->
<!-- <h3>全名: {{fullname()}}</h3> -->
<!-- 第三種寫(xiě)法 使用computed（計(jì)算屬性） -->
<h3>全名:{{fullname}}</h3>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: { //屬性
firstname: "張",
lastname: "三",
},
// methods:
// {
// fullname() {
// // 這里的this指向是vm
// return this.firstname.slice(0,3) + "-" + this.lastname
// }
// }
computed: {
fullname: {
/*
1. Vue已經(jīng)進(jìn)行配置過(guò)了將this指向vm
2. 當(dāng)用人去讀取fullname時(shí)，get就會(huì)被調(diào)用，但是get只被執(zhí)行一次因?yàn)閂ue做 了一個(gè)事，就是緩存，當(dāng)執(zhí)行過(guò)一次后，后面數(shù)據(jù)再去讀取會(huì)走緩存這條路。
3. return 的返回值會(huì)作為fullname的值，將fullname也拋到vm
（fullname:"張-三"）
*/
get() {
return this.firstname + "-" + this.lastname
},
set(value) {
// 當(dāng)fullname被修改時(shí)，set才會(huì)被調(diào)用
var arr = value.split("-") //按照指定字符串進(jìn)行拆分成數(shù)組
this.firstname = arr[0]
this.lastname = arr[1]
}
/*
簡(jiǎn)寫(xiě)形式: 基本要求就是在不使用set的情況下才可以簡(jiǎn)寫(xiě)
注意在調(diào)用的時(shí)候不要寫(xiě)成fullname(),這個(gè)很特殊
computed:{
fullname(){ //相當(dāng)于fullname：function(){}
return this.firstname + "-" + this.lastname
}
}
*/
}
}
})
</script>
1.5 監(jiān)視屬性（watch）
1.當(dāng)所監(jiān)視的屬性發(fā)生變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)的操作
2.監(jiān)視屬性必須要存在，才能進(jìn)行監(jiān)視
3.監(jiān)視屬性的兩種寫(xiě)法：
（1）在new Vue中配置watch
?（2）通過(guò)vm.$watch進(jìn)行監(jiān)視
4.watch里handler函數(shù)this的指向是vm
<div id="root">
<h1>今天天氣真{{weather}}</h1>
<button @click="change">切換天氣</button>
<h3>a的值是: {{a}}</h3>
<!-- 在這里面可以寫(xiě)簡(jiǎn)單的代碼 -->
<button @click = "a++">點(diǎn)擊我讓a+1</button>
</div>
<script>
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
flag: true
},
computed: {
weather() {
return this.flag ? "涼快" : "炎熱"
}
},
methods: {
change() {
return this.flag = !this.flag
}
},
watch:{
flag:{
// 第一個(gè)參數(shù)表示：修改后的值，第二個(gè)參數(shù)表示修改前的值
handler(newValue,oldValue){
console.log("flag被修改了");
},
immediate:true, //在一上來(lái)就執(zhí)行一次
deep:true //表示深層次監(jiān)視
}
}
})
vm.$watch("weather",{
immediate:true,
handler(newValue,oldValue){
console.log("weather被修改了")
}
})
1.5.1 watch和computed的區(qū)別
watch和computed的區(qū)別是：
1.watch能夠完成的功能，computed不一定可以完成，但是computed可以完成的，watch也可以完成
2.computed是依靠return的返回值（getter），所以它不能夠完成異步的任務(wù),而watch可以
3.watch是靠我們自己寫(xiě)代碼進(jìn)行修改
4.在學(xué)Vue當(dāng)中有兩個(gè)很重要的原則：
- 所有被Vue管理的函數(shù)，最好寫(xiě)成普通的函數(shù)，因?yàn)檫@樣this的指向才是vue或者組件的實(shí)例化對(duì)象
- 所有不被Vue管理的函數(shù)，最好寫(xiě)成箭頭函數(shù)（Ajax的回調(diào)函數(shù)，定時(shí)器的回調(diào)函數(shù)，Promise的回調(diào)函數(shù)），因?yàn)檫@樣this的指向才是vue或者組件的實(shí)例化對(duì)象
<div id="root">
<!-- 用watch寫(xiě)一遍姓名的案例 -->
姓: <input type="text" v-model="firstname">
<br><br>
名: <input type="text" v-model="lastname">
<h2>全名: {{fullname}}</h2>
</div>
<script >
// 需求：想要1s過(guò)后在顯示全名
Vue.config.productionTip = false
let vm = new Vue({
el: '#root',
data: {
firstname: "張",
lastname: "三",
fullname: "張 - 三"
},
watch: {
firstname: {
handler(newval) {
console.log(this); //vm
/*
這里使用箭頭函數(shù)的目的就是為了讓this指向vue
此時(shí)沒(méi)有this所以他就向外面找，外面handler的this
指向是vm所以定時(shí)器的this指向也是vm
*/
setTimeout(() => { //這里如果使用普通函數(shù)this就指向window
console.log(this); //vm
this.fullname = newval + " - " + this.lastname
}, 1000);
}
},
lastname: {
handler(newval) {
setTimeout(() => {
this.fullname = this.firstname + " - " + newval
}, 1000);
}
}
}
})
</script>
總結(jié)
以上就是今天要講的內(nèi)容，本文僅僅介紹了Vue一些基本事件的操作，希望對(duì)大家有幫助！
相關(guān)文章
這篇文章主要介紹了vue單頁(yè)緩存方案分析及實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Vue八大生命周期鉤子函數(shù),生命周期函數(shù)，就是在某個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù),本文帶你了解八大生命周期鉤子函數(shù),一起來(lái)看看吧2023-03-03
這篇文章主要介紹了element-ui中使用upload組件獲取上傳文件信息方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue配置marked鏈接添加target="_blank"的方法
這篇文章主要介紹了Vue配置marked鏈接添加target="_blank"的方法，文中給大家提到了vue實(shí)現(xiàn)類似target="_blank"打開(kāi)新窗口的代碼,感興趣的朋友參考下吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue組件傳值，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
這篇文章主要介紹了Vue的mixin策略的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)vue框架，感興趣的朋友可以了解下2020-11-11
Ant Design Vue全局對(duì)話確認(rèn)框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對(duì)話確認(rèn)框(confirm)的回調(diào)不觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue.js層疊輪播效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-11-11
Ant-design-vue Table組件customRow屬性的使用說(shuō)明
這篇文章主要介紹了Ant-design-vue Table組件customRow屬性的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10