Vue3中的模板指令——DOM事件监听指令v-on

4.6.3 事件监听指令v-on（@）

可以使用 v-on 指令 (简写为 @) 来监听DOM事件，并在事件触发时执行对应的 JavaScript脚本，即handler事件处理函数。

用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

2. 方法事件处理器：一个指向组件实例上定义的方法的属性名或是路径。

4.6.3.1 内联事件处理器示例

    //App.vue
    <script setup>
    import {
      ref } from 'vue'
    
    const counter = ref(0)
    script>
    
    <template>
        <button @click="counter++">Add 1button>
        <p>The button above has been clicked {
  { counter }} times.p>
    template>

4.6.3.2 方法事件处理器示例

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。 v-on 也可以接受一个方法名或对某个方法的调用。

    //App.vue
    <script setup>
    import {
      ref } from 'vue'
    
    const name = ref('Vue.js')
    //事件响应处理函数
    function greet(event) {
     
      alert(`Hello ${ name.value}!`)
      // `event` is the native DOM event
      if (event) {