vue 實(shí)現(xiàn)click同時(shí)傳入事件對(duì)象和自定義參數(shù)
僅僅傳入自定義參數(shù)
HTML
<div id="app"> <button @click="tm(123)">ddddd</button> </div>
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})
僅僅傳入事件對(duì)象
HTML
<div id="app"> <button @click="tm">ddddd</button> </div>
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e){
console.log(e);
}
}
})
同時(shí)傳入事件對(duì)象和自定義參數(shù)
HTML
<div id="app"> <button @click="tm($event,123)">ddddd</button> </div>
JS代碼
new Vue({
el:'#app',
methods:{
tm:function(e,value){
console.log(e);
console.log(value);
}
}
})
補(bǔ)充：vue常用事件之v-on:click 以及事件對(duì)象，事件冒泡，事件默認(rèn)行為
其實(shí)v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown.......
以下click為例
注意：所有的v-on都可以簡(jiǎn)寫為@，比如說(shuō)v-click可以簡(jiǎn)寫為@click
1.監(jiān)聽事件
可以用 v-on 指令監(jiān)聽 DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。通常來(lái)講就是監(jiān)聽dom觸發(fā)一些操作，這些操作（比如點(diǎn)擊）觸發(fā)后執(zhí)行的動(dòng)作（js）可有直接寫在后面
v-on:click="item+=1"
eg:
<template>
<div >
<input type="button" value="clickme" v-on:click="item+=1"/>
<div>{{item}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
item:1
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
結(jié)果：
可以看見每點(diǎn)擊一次綁定的值就增加1.也就是說(shuō)可以吧js的操作放在事件觸發(fā)的后面。但是有時(shí)候邏輯太復(fù)雜的時(shí)候?qū)懺诶锩婢蜁?huì)造成混亂，視圖和邏輯混淆。所以click后面可以接一個(gè)方法，把所有處理邏輯的方法封裝在一個(gè)函數(shù)里面click的時(shí)候調(diào)用
2.事件處理方法
v-on:click="greet"
eg：
<template>
<div >
<input type="button" value="clickme" v-on:click="greet"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function () {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
this.res='Hello ' + this.name + '!';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
可以看見點(diǎn)擊之后執(zhí)行了greet方法里面js邏輯
3.帶參數(shù)的時(shí)間綁定方法：
同上，唯一區(qū)別是攜帶了參數(shù)
v-on:click="greet(name)"
<template>
<div >
<input type="button" value="clickme" v-on:click="greet(name)"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept) {
// `this` 在方法里指向當(dāng)前 Vue 實(shí)例
this.res='Hello ' + reccept+1 + '!';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果一致。對(duì)方法的調(diào)用同樣可以一個(gè)方法多處多次的調(diào)用
4.內(nèi)聯(lián)處理器中的方法
也就是說(shuō)在方法里面調(diào)用其他的方法,這里的其他方法可以是js原生的方法比如阻止冒泡呀等等，也可以是自定義的方法
v-on:click="greet(name,$event)"
eg:
<template>
<div >
<input type="button" value="clickme" v-on:click="greet(name,$event)"/>
<div>{{res}}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
name : 1,
res:""
}
},
methods:{
greet: function (reccept,event) {
if (reccept===1) this.say()
},
say:function () {
this.res="我調(diào)用了"
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
5.事件對(duì)象
$event 拿到當(dāng)前點(diǎn)擊事件的事件對(duì)象，比如click就是拿到當(dāng)前點(diǎn)擊的dom事件對(duì)象信息
v-on:click="greet($event)"
eg:
<template>
<div >
<input type="button" value="clickme" v-on:click="greet($event)"/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
greet: function (ev) {
alert(ev.clientX)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
6.事件冒泡
當(dāng)不阻止事件冒泡的時(shí)候會(huì)彈兩次
eg
<template>
<div >
<div @click="show1($event)">
<div @click="show2($event)">點(diǎn)擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
那么但阻止冒泡后就只會(huì)彈一次
eg:原生js阻止冒泡
ev1.cancelBubble=true
<template>
<div >
<div @click="show1($event)">
<div @click="show2($event)">點(diǎn)擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function (ev) {
alert(1)
},
show2: function (ev1) {
ev1.cancelBubble=true
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
那么vue自己封裝的阻止冒泡方法呢？
@click.stop="show2()"
eg:
<template>
<div >
<div @click="show1()">
<div @click.stop="show2()">點(diǎn)擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show1: function () {
alert(1)
},
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
7.阻止默認(rèn)行為：
比如：如下右鍵之后會(huì)將默認(rèn)的菜單帶出來(lái)
<template>
<div >
<div>
<div @contextmenu="show2()">右鍵點(diǎn)擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
效果：
那么就有了阻止默認(rèn)行為
ev1.preventDefault();
eg:
<template>
<div >
<div>
<div @contextmenu="show2($event)">右鍵點(diǎn)擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
ev1.preventDefault();
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
點(diǎn)擊后默認(rèn)菜單將不會(huì)顯示（PS早360瀏覽器右鍵無(wú)效）
vue里面的封裝的阻止默認(rèn)行為的方法：
@contextmenu.prevent="show2()"
eg:
<template>
<div >
<div>
<div @contextmenu.prevent="show2()">右鍵點(diǎn)擊我呀</div>
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
hide : true
}
},
methods:{
show2: function (ev1) {
alert(2);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
8.其他事件修飾符
用法都一樣就不再贅述
.capture
.self
.once
<!-- 阻止單擊事件繼續(xù)傳播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重載頁(yè)面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修飾符可以串聯(lián) --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修飾符 --> <form v-on:submit.prevent></form> <!-- 添加事件監(jiān)聽器時(shí)使用事件捕獲模式 --> <!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進(jìn)行處理 --> <div v-on:click.capture="doThis">...</div> <!-- 只當(dāng)在 event.target 是當(dāng)前元素自身時(shí)觸發(fā)處理函數(shù) --> <!-- 即事件不是從內(nèi)部元素觸發(fā)的 --> <div v-on:click.self="doThat">...</div>
使用修飾符時(shí)，順序很重要；相應(yīng)的代碼會(huì)以同樣的順序產(chǎn)生。因此，用 @click.prevent.self 會(huì)阻止 所有的點(diǎn)擊 ，而 @click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊。
2.1.4 新增
<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 --> <a v-on:click.once="doThis"></a>
不像其它只能對(duì)原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。如果你還沒(méi)有閱讀關(guān)于組件的文檔，現(xiàn)在大可不必?fù)?dān)心。
<!-- the scroll event will not cancel the default scroll behavior --> <div v-on:scroll.passive="onScroll">...</div>
Vue 為這些修飾符額外提供了 .passive 修飾符來(lái)提升移動(dòng)端的性能。
舉個(gè)例子，在滾動(dòng)的時(shí)候，瀏覽器會(huì)在整個(gè)事件處理完畢之后再觸發(fā)滾動(dòng)，因?yàn)闉g覽器并不知道這個(gè)事件是否在其處理函數(shù)中被調(diào)用了 event.preventDefault()。.passive 修飾符用來(lái)進(jìn)一步告訴瀏覽器這個(gè)事件的默認(rèn)行為不會(huì)被取消。
不要把 .passive 和 .prevent 一起使用。被動(dòng)處理函數(shù)無(wú)法阻止默認(rèn)的事件行為。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教。
相關(guān)文章
最近在學(xué)習(xí)vue,感覺(jué)路由守衛(wèi)這個(gè)地方知識(shí)點(diǎn)挺多的,而且很重要,下面這篇文章主要給大家介紹了關(guān)于vue3中7種路由守衛(wèi)的使用大全,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例
這篇文章主要介紹了Vue實(shí)現(xiàn)一種簡(jiǎn)單的無(wú)限循環(huán)滾動(dòng)動(dòng)畫的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過(guò)程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過(guò)程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要介紹了vue強(qiáng)制刷新組件的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
vue在自定義組件上使用v-model和.sync的方法實(shí)例
自定義組件的v-model和.sync修飾符其實(shí)本質(zhì)上都是vue的語(yǔ)法糖,用于實(shí)現(xiàn)父子組件的"數(shù)據(jù)"雙向綁定,下面這篇文章主要給大家介紹了關(guān)于vue在自定義組件上使用v-model和.sync的相關(guān)資料,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue使用Element el-upload 組件的相關(guān)知識(shí)，在研究學(xué)習(xí)基本使用的過(guò)程中遇到很多問(wèn)題，今天特此把問(wèn)題記錄分享到腳本之家平臺(tái),需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue中v-show和v-if的異同 ，通過(guò)代碼詳解v-show用法，本文給大家介紹的非常詳細(xì)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了vue如何通過(guò)src引用assets中的圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Django+Vue.js搭建前后端分離項(xiàng)目的示例
本篇文章主要介紹了Django+Vue.js搭建前后端分離項(xiàng)目的示例，具有一定參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了計(jì)算屬性和偵聽器，文章以介紹計(jì)算屬性、偵聽器的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)你有所幫助2021-11-11