vue3学习基础之事件绑定

<script setup>
import { nextTick, ref } from "vue";

function clickA() {
  console.log("点击了a标签，点击事件传递到了外层p标签");
}
function clickStop() {
  console.log("点击了a标签，点击事件停止向外层传递");
}
function clickOnce() {
  console.log("只能点击1次");
}
function clickSelf() {
  console.log("点击了外层p标签");
}
function clickOuter() {
  console.log("点击事件传递到了外层p标签或者点击了p标签");
}
function clickCapture() {
  console.log("捕获模式，事件先被外层捕获");
}
function onSubmit() {
  console.log("提交数据");
}

const count = ref(5);

function increment() {
  count.value += 1;
}
async function increment_nextTick() {
  count.value += 1;
  count.value += 1;
  count.value += 1;
  await nextTick();
}

let url = "https://www.baidu.com/";
</script>
<template>
  <div>
    <!-- 事件修饰符 -->
    <div>
      <p @click="clickOuter">
        <button @click.stop="clickStop">单击事件将停止传递</button>
        <button @click.once="clickOnce">点击事件最多被触发一次</button>
        <a @click.stop.prevent :href="url">修饰语可以使用链式书写</a>
      </p>
      <p @click.self="clickSelf">
        <button @click="clickA">仅当 event.target 是元素本身时才会触发事件处理器,例如：事件处理器不来自子元素</button>
      </p>
      <p @click.capture="clickCapture">
        <button @click="clickA">
          添加事件监听器时，使用 `capture` 捕获模式，例如：指向内部元素的事件，在被内部元素处理前，先被外部处理
        </button>
      </p>
      <form @submit.prevent="onSubmit">
        提交事件将不再重新加载页面
        <button type="submit">submit</button>
      </form>
    </div>

    <div>
      <p>
        COUNT: {{ count }}
        <button @click="increment">+1</button>
        <button @click="increment_nextTick">+3</button>
      </p>
    </div>
  </div>
</template>
<style scoped>
p {
  border: 1px solid red;
  padding: 0.5rem 1rem;
}
button,
a {
  border: 1px solid blue;
  margin-left: 1rem;
}
</style>