VUE3学习笔记（细节）

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 修饰符。

VUE3学习笔记（细节）相关推荐

Vue3学习笔记- NPM包管理工具
导语这篇分享是关于Vue3 系列的学习知识的整理的开始,能够对大家学习带来帮助.也是对自己能力的一种提升. 学习大纲认识NPM 安装NPM 使用NPM NPM中级用法了解package.js ...
转载于掘金的vue3学习笔记
声明:转载于掘金的文章,原文地址:https://juejin.cn/post/7005140118960865317/,本文只是自用. 一.简介 2020年9月18日,Vue.js发布3.0版本,代 ...
【Vue】菜头学前端 - vue3学习笔记
目录简介一.创建项目 1.使用vue-clli创建 2.使用Vite创建二.Composition API(组合式API) 1.setup函数 2.ref函数和reactive函数 1.ref函 ...
Vue3学习笔记：了解并使用Pinia状态管理
Vue3是一个流行的JavaScript框架,它允许您构建交互式的Web应用程序.Vue3中使用的状态管理工具是Vuex,但是有一种新的状态管理工具叫做Pinia,它提供了更简单.更轻量级的状态管理方 ...
Vue3 学习笔记 —— 破坏式更新、自定义指令 directive
目录 1. 什么叫破坏式更新? 2. Vue3 中的自定义指令 2.1 自定义指令的生命周期 2.1.1 Vue2 Vs Vue3 的自定义指令生命周期 2.1.2 自定义指令的生命周期中,接收的参数 ...
Vue3 学习笔记 —— Teleport、keep-alive
目录 1. Teleport 传送组件 1.1 为什么要使用 Teleport 1.2 如何使用 Teleport 1.3 Teleport 源码 2. keep-alive 缓存组件 2.1 为什么 ...
vue3学习笔记 Composition API setup
一.Composition API优势相对于vue2的option API Vue3的Composition API设计更有优势 Composition(组合式)Api 功能分组 Compositi ...
Vue3学习笔记01：使用NPM方法安装Vue3
文章目录一.使用淘宝NPM镜像 (一)为何使用淘宝镜像 (二)安装淘宝NPM镜像 (三)查看淘宝NPM镜像版本二.使用CNPM安装Vue最新稳定版 (一)安装Vue最新稳定版 (二)查看Vue命令 ...
vue3学习笔记（ref, reactive, setup, hook...）
目录一.搭建项目二.常用的Composition API 1.ref函数(实现响应式) 2.reactive函数 3.vue2和vue3响应式的区别 4. setup参数 5.计算属性和监视 6. ...

VUE3学习笔记（细节）

一、事件

VUE3学习笔记（细节）相关推荐

最新文章

热门文章