Vue.js 事件修饰符

Vue.js是一个用于开发 Web 用户界面的渐进式 JavaScript 框架。它是一个高性能、平易近人且通用的框架。我们可以创建单页应用程序以及全栈应用程序。它建立在 HTML、CSS 和 Javascript 之上，这使得开发人员可以更轻松地在任何阶段将 Vue.js 集成到任何应用程序中。

Vue.js 事件修饰符有助于忽略常见的事件处理，例如提交表单时不重新加载页面和其他类似问题。事件修饰符允许在 DOM 本身中处理它们。我们不需要为这些目的创建任何新组件。

Vue.js 事件修饰符：

• .stop ：点击事件的传播将停止。
• .prevent ：用于防止重新加载网页。
• .self ：如果目标元素是它自己，这用于告诉元素触发事件。
• .capture ：用于在内部元素处理事件之前处理内部元素的事件。
• .once ：用于触发事件一次。
• .passive ：用于触摸事件以提高性能。

语法：事件修饰符是指令后缀，这意味着它们作用于某些动作。我们有一个点击动作，我们希望事件修饰符停止重新加载，如下所示：

示例：在以下示例中，我们有一个带有输入元素的表单。我们使用了事件修饰符来停止重新加载网页，然后调用该函数来传递提交的值。

第 1 步：使用以下命令使用 npm node.js 包管理器创建一个新的 Vue.js 项目。

npm init vue@latest

输入项目名称并预设项目如下：

项目结构：安装成功后，会形成如下的项目结构。

项目结构

第 2 步：在 App.vue 的脚本部分中，添加一个名为 search 的数据变量，它将存储输入值并声明一个在提交表单时将调用的方法。

App.vue

export default {
  data() {
    return {
      search: "",
    };
  },
  methods: {
    submitted(e) {
      this.search = e.target[0].value;
    },
  },
};

第 3 步：在 App.vue 的模板部分，创建一个带有输入元素和提交按钮的表单。

第 4 步：使用以下命令运行项目并查看输出。

npm run dev

输出：成功构建项目后，打开http://localhost:3000，结果如下。

参考： https ://vuejs.org/guide/essentials/event-handling.html#event-modifiers