vue绑定事件

一、事件绑定基础语法有两种写法：

1、直接写函数名,@click="handleClick";

2、加$event,@click="handleClicks($event,参数)"参数可选,

$event是内置事件对象 ;

好处:不但可以传事件对象,还可以传其他的参数

<div id="app">

<!-- 1.普通用法 -->

<button @click="handleClick">Button</button>

<br />

<!-- 2.传入参数-->

<button @click="handleClicks($event,1,2,3)">eventButton</button>

<!-- 3.绑定对象 -->

<button v-on="{click: btnClick, mousemove: mouseMove}">特殊按钮3</button>

</div>

<script>

var vm = new Vue({

el:'#app',

methods:{

handleClick:function(e){

console.log(e)

},

handleClicks:function(e,one,two,three){

console.log(e,one,two,three)

},

btnClick() {

console.log("按钮被点击了");

},

mouseMove() {

console.log("鼠标移动");

},

}

})

</script>

二、事件修饰符：

1、@click.prevent：阻止事件的默认行为（在后面依然看可以写click要触发的函数：@click.prevent="handle"）

2、@click.stop：阻止事件向外冒泡

3、@click.self：只有在点击所在的当前这一级标签的时候才会触发事件，点击它里面的子元素标签不会触发事件。【只有在e.target = e.currentTarget的时候才执行，也就是触发事件的元素和绑定事件的元素相等的时候才会执行。】

【e.target.value：e.target表示触发事件的该DOM元素节点，e.target.value表示获取该结点的值】

4、@click.once：绑定的事件只会执行一次，执行后这个事件会解绑，不会再被执行

5、@click.capture：把冒泡机制改成捕获，冒泡是从内到外，捕获是从外到内。

<div id="app">

<!-- 点击时不希望页面进行跳转,需要阻止form表单的默认行为:@click.prevent-->

<form action="/abc" @click.prevent>

<input type="submit">

</form>

</div>

三、按键修饰符【控制按下哪个按键时，相对应的事件才会被执行】：

1、@keydown：按键按下时就会执行绑定的函数

2、@keydown.enter：只有enter键触发keydown事件才会执行绑定的函数

3、@keydown.tab：只有tab键触发keydown事件才会执行绑定的函数

<div id="app">

<!--按下enter键才触发keydown事件-->

<input @keydown.enter="handleKeyDown">

</div>

<script>

var vm = new Vue({

el:'#app',

methods:{

handleKeyDown:function(e){

console.log(e.target.value)

}

}

})

</script>

四、系统修饰符：

ctrl、alt、shift、meta

要触发绑定的函数，不仅要按下按键，同时还需要按下相应的系统修饰符按键。例如：@keydown.ctrl="handle"，必须同时按下ctrl键和其他的按键才能执行handle函数。

<div id="app">

<!--同时按下ctrl键才出发Keydown事件-->

<input @keydown.ctrl="handleKeyDown">

</div>

<script>

var vm = new Vue({

el:'#app',

methods:{

handleKeyDown:function(e){

console.log(e.target.value)

}

}

})

</script>

五、鼠标修饰符：

1、@click.right：只有点击鼠标右键才会执行。

2、@click.left：只有点击鼠标左键才会执行。

3、@click.middle：只有点击鼠标中键才会执行。

<div id="app">

<!-- 监听鼠标右键点击,右键点击才执行handleClick -->

<div @click.right="handleClick">click</div>

</div>

<script>

var vm = new Vue({

el:'#app',

methods:{

handleClick:function(e){

console.log('right')

}

}

})

</script>

原文链接：https://blog.csdn.net/weixin_54362381/article/details/119849055