上一级页面：vue-js-学习索引

本系列关注前端部分,根据学习路线图达到学习Vue.js的目的

developer路线图developer-roadmap/translations/chinese at master · kamranahmedse/developer-roadmap

前言

预先工作

新建src/components/TestEventHandling.vue

<script>

export default {
  data() {
    return {
      message: "Hello Vue! Test XXXX.vue !",
    };
  },
  methods: {
    doSomething() {
      alert("弹窗！！！");
    },
  },
  computed: {},
};
</script>

<template>
  <div class="greetings">
    <h1>{{ message }}</h1>
  </div>
</template>

<style scoped>
h1 {
  font-weight: 500;
  font-size: 2.6rem;
  top: -10px;
}

h3 {
  font-size: 1.2rem;
}

.greetings h1,
.greetings h3 {
  text-align: center;
}

@media (min-width: 1024px) {
  .greetings h1,
  .greetings h3 {
    text-align: left;
  }
}
</style>

/src/App.vue中

<script setup>
// 旧的
import HelloWorld from "./components/HelloWorld.vue";

// ....

//新导入的
import TestEventHandling from "./components/TestEventHandling.vue"

更改/src/App.vue的template

<template>
  <!-- 这里旧的别动 -->
  <main>
    <TestEventHandling />
  </main>
</template>


事件处理

监听事件、内联事件处理器、方法事件处理器、在内联处理器中调用方法

全部做过，没难点

注意一下这里的event，event 是 DOM 原生事件

methods: {
  greet(event) {
    // 方法中的 `this` 指向当前活跃的组件实例
    alert(`Hello ${this.name}!`)
    // `event` 是 DOM 原生事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}

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

这里，我没有实际操作过DOM，对我来说比较新鲜，知道就行了

方法事件处理器，会默认传递DOM给方法事件处理器

内联事件处理器稍微麻烦一点，语法就在这节

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

事件修饰符

这个很重要，用的多了就熟了，随用随查

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

使用修饰符时需要注意调用顺序

使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为

而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。

• event.preventDefault() 表示调用我们自定义的方法，而且阻止默认的点击事件执行，比如说选中复选框是点击复选框的默认行为。使用这个方法后，就会阻止默认的点击复选框行为
• event.stopPropagation() 阻止捕获和冒泡阶段中当前事件的进一步传播。即阻止事件的进一步传播。可以看这个链接的示例5：Examples - Web API 接口参考 | MDN (mozilla.org)
• 对应到vue中，有对应这两个方法的事件修饰符：
  • .stop
  • .prevent

按键修饰符

随用随查

vue-js-学习-7-表单输入绑定

vue-js-学习-7-表单输入绑定

参考、引用、致谢