Vue3事件绑定（v-on）

事件的绑定

我们可以使用 v-on 来监听 DOM 事件，并在事件触发时执行对应的 Vue的JavaScript代码。

• 用法：v-on:click="handler" 或简写为 @click="handler"
• vue中的事件名=原生事件名去掉on 前缀 如:onClick --> click
• handler的值可以是方法事件处理器,也可以是内联事件处理器
• 绑定事件时,可以通过一些绑定的修饰符,常见的事件修饰符如下
  • .once：只触发一次事件。[重点]
  • .prevent：阻止默认事件。[重点]
  • .stop：阻止事件冒泡。
  • .capture：使用事件捕获模式而不是冒泡模式。
  • .self：只在事件发送者自身触发时才触发事件。

<script setup type="module">
  import {ref} from 'vue'
  // 响应式数据 当发生变化时,会自动更新 dom树
  let count=ref(0)
  let addCount= ()=>{
    count.value++
  }
  let incrCount= (event)=>{
    count.value++
    // 通过事件对象阻止组件的默认行为
    event.preventDefault();
    
  }
</script>

<template>
  <div>
    <h1>count的值是:{{ count }}</h1>
    <!-- 方法事件处理器 -->
    <button v-on:click="addCount()">addCount</button> <br>
    <!-- 内联事件处理器 -->
    <button @click="count++">incrCount</button> <br>
    <!-- 事件修饰符 once 只绑定事件一次 -->
    <button @click.once="count++">addOnce</button> <br>
    <!-- 事件修饰符 prevent 阻止组件的默认行为 -->
    <a href="http://www.atguigu.com" target="_blank" @click.prevent="count++">prevent</a> <br>
    <!-- 原生js方式阻止组件默认行为 (推荐) -->
    <a href="http://www.atguigu.com" target="_blank" @click="incrCount($event)">prevent</a> <br>
  </div>
</template>

<style scoped>

</style>