事件绑定

v-on / @

@ 是 v-on 的简写

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

<script>
export default{
    methods: {
        handleClick: () => {
			console.log('hello world')
        }
    }
}
</script>

点击 button 会打印 hello world

参数

1. 模板中不传参，则函数只可以接受到一个参数，event

   <template>
   	<button @click="handleClick"></button>
   </template>
   
   <script>
   export default{
       methods: {
           handleClick: (e) => {} // 可以拿到e
       }
   }
   </script>

2. 模板中传参，往括号中传 $event 即在函数相应位置中接受到 event ，还可同时传入其他参数

   <template>
   	<button @click="handleClick($event, 1, 2)"></button>
   </template>
   
   <script>
   export default{
       methods: {
           handleClick: (e, one, two) => {
               console.log(e) // 可以打印出 e
               console.log(one) // 1
           } 
       }
   }
   </script>

修饰符

1. 为事件添加e.stopPropagation()

<div @click.stop="fn"></div>

2. 为事件添加e.preventDefault()

<div @click.prevent="fn"></div>

可串联

<div @click.stop.prevent="fn"></div>

可以只有修饰符，不添加事件

<div @click.prevent></div>

3. 只有 e.target === e.currentTarget 时（触发元素是绑定元素）才触发

<div @click.self="fn"></div>

4. 只执行一次，执行完后解绑

<div @click.once="fn"></div>

5. 规定事件为捕获事件

<div @click.capture="fn"></div>

6. 按键修饰符

• 如按下 Enter 才执行

• <div @keydown.enter="fn"></div>

• enter 回车
• tab
• delete
• esc

7. 系统修饰符

• 只有按着系统修饰符并同时按下其他按钮才执行

• <div @keydown.ctrl="fn"></div>

• ctrl
• alt
• shift

8. 鼠标修饰符

• 按下鼠标对应键才执行

• <div @click.left="fn"></div>

• left 左键
• right 右键
• middle 中间键

9. 子组件修饰符

• 在子组件绑定的不是自定义事件（即要通过子组件$emit触发的事件），而是绑定原生事件

• <Child @click.native="fn"></Child>