Vue3+Vite实现工程化，事件绑定以及修饰符

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

• 用法：v-on:click = "handler" 或简写为  @click = "handler"
• vue中的事件名=原生事件名去掉 on 前缀  如:onClick --> click
• handler的值可以是方法事件处理器，也可以是内联事件处理器
• 绑定事件时，可以通过一些绑定的修饰符，常见的事件修饰符如下

@click.once:只触发一次事件。[重点]

@click.prevent:阻止默认事件。[重点]

@click.stop:阻止事件冒泡

@click.capture:使用事件捕获模式而不是冒泡模式

@click.self:只在事件发送者自身触发时才触发事件

<script setup>
 
    import {ref} from "vue";
 
    //响应式数据 当发生变化时，会自动更新 dom 树
    let count = ref(0);
 
    let addCount=()=>{
      count.value++;
    }
 
    let incrCount=(event)=>{
      count.value++;
      //通过事件对象阻止组件的默认行为
      event.preventDefault();
    }
 
    let sayHello=()=>{
      alert("hello world!")
    }
 
    let h01=()=>{
      alert("ho1")
    }
    let h02=()=>{
      alert("ho2")
      event.stopPropagation();    //阻止事件传播，繁殖，蔓延
    }
    let h03=()=>{
      alert("h03");
    }
 
script>
 
<template>
 
    <div>
       <h1>count的值是:{{count}}h1>
 
      
      <button v-on:click="addCount()">addCountbutton><br>
 
      
      <button @click="count++">incrCountbutton><br>
 
      
      <button @click.once="count++">addOncebutton><br>
 
      
      <a href="https://blog.csdn.net/m0_65152767?spm=1011.2124.3001.5343" target="_blank" @click.prevent="count++">preventa><br>
 
      
      <a href="https://blog.csdn.net/m0_65152767?spm=1010.2135.3001.5343" target="_blank" @click="incrCount($event)">preventa><br>
 
      <button v-on:click="sayHello">点我button>
 
      <button @click="sayHello">点我省略v-on:button>
 
      <div @click="h01" style="background-color: #abc;width: 200px;height: 200px">
        <div @click="h02" style="background-color: #cba;width: 100px;height: 100px">HELLOdiv>
        <div @click.stop="h03" style="background-color: #dfb;width: 100px;height: 100px">HELLOdiv>
      div>
    div>
 
template>