内联事件处理

用于简单的场景，使用格式: @click='代码逻辑':

<!-- 当点击后数字加1 -->
<div class="btn" @click="num ++">{{ num }}</div>

import {ref} from 'vue'
const num = ref(0)

方法事件处理

由于内联事件处理不够灵活，因此可以接受一个方法名或对某个方法的调用。

<!-- 当点击后数字加1 -->
<div class="btn" @click="print">{{ num }}</div>

const print = (event) => { 
    num.value ++ 
    console.log(event.target)
}

方法事件处理器会自动接收原生 DOM 事件event。在上面的例子中，console.log(event.target)会输出被点击的DOM元素。

在内联处理器中调用方法

内联处理器中除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

<!-- 输出对应的参数 -->
<div class="btn" @click="mess('xiaomi')">点击</div>
<div class="btn" @click="mess('redmi')">点击</div>

const mess = (mess) => { 
    console.log(mess)
}

在内联事件处理器中访问事件参数

有的时候我们既想获取自己传入的参数也想获取原生的DOM事件，可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：

<div class="btn" @click="mess('xiaomi', $event)">点击</div>
<div class="btn" @click="(event) => mess('redmi', event)">点击</div>

const mess = (mess, event) => { 
    event.preventDefault() // 访问原生的事件
    console.log(mess) 
}