VUE3学习笔记（细节）

最新推荐文章于 2024-04-14 13:55:52 发布

伊梦南柯

最新推荐文章于 2024-04-14 13:55:52 发布

阅读量120

点赞数

分类专栏：前端开发文章标签： vue

原文链接：https://v3.cn.vuejs.org/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中事件的调用顺序，从index.html开始到组件的渲染过程，并探讨了事件处理器的使用，包括如何传递$event、多事件处理器的实现。此外，重点讲解了Vue的事件修饰符，如.stop、.prevent、.capture等，以及它们在阻止事件传播、处理DOM事件细节中的应用。通过实例展示了如何优雅地使用修饰符优化事件处理逻辑。

摘要由CSDN通过智能技术生成

vue调用顺序 index.html -> store → router index.js → app.vue → main.js → components/组件
main.js中：

import { createApp } from "vue";
import App from "./App.vue";
import store from "./store";
import router from "./router";
import './assets/fonts/iconfont.css';
import './assets/fonts/iconfont.css';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-cn'
import "./assets/css/common.css";




const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000, locale  })
app.use(router).use(store).mount("#app");

一、事件

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn(message, event) {
    // 现在可以访问到原生事件
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

多事件处理器，事件处理程序中可以有多个方法，这些方法由逗号运算符分隔：

<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
  Submit
</button>
// ...
methods: {
  one(event) {
    // 第一个事件处理器逻辑...
  },
  two(event) {
   // 第二个事件处理器逻辑...
  }
}

事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

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

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form @submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div @click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。