常用出现场景：商城点击订单提交1、使用Vue封装事件body：<template> <div> <el-button @click.once="submitOrder()">提交订单</el-button> </div></template>方法：methods: { submitOrder() { // 处理逻辑 }}2、使用原生JS事件在数据data里面声明一个flag属性data() {
Vue
中的
事件
修饰符：1、prevent:阻止默认
事件
；2、stop:阻止
事件
冒泡；3、once：
事件
只触发一次；4、capture：使用
事件
的捕获模式；5、self：只有event.target是当前操作的元素时才触发
事件
；（只有和当前
事件
触发的标签一致时才会触发）6、passive：
事件
的默认行为立即执行，无需等待
事件
回调执行完毕点完之后不会发生默认
事件
点完超链接不会发生跳转，因为prevent阻止了a标签的默认
事件
（跳转）div和button都有show
事件
，当点
击
按钮时，button会触发sh
Vue
2秒钟点
击
多次，只触发一次
事件
在开发中，有些
提交
保存按钮有时候会在短时间内被点
击
多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增
表
单
的
提交
按钮，多次点
击
就会新增多条重复的数据。
需求：防止按钮在短时间内被多次点
击
，使用防抖函数限制规定时间内只能点
击
一次。
定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。
main.js中注册
Vue
.directive('debounce', {
inserted(el, binding, vno
1. 首先需要一个
表
单
，包含报名人的姓名、手机号码、邮箱地址等信息。
2.
表
单
需要进行验证，确保用户填写的信息符合要求。
3. 在填写
表
单
的过程中，需要实时显示填写的信息是否正确。
4.
提交
按钮需要在
表
单
验证通过后才能点
击
。
5.
提交
后需要显示
提交
成功的提示信息，并且禁止用户重新
提交
。
6. 如果
提交
失败，需要显示错误信息并
允许
用户重新
提交
。
7. 可以在页面上显示已经报名的人员名
单
，方便用户查看和确认自己的报名情况。
这些都可以使用
Vue
框架实现。需要依次实现以下步骤：
1. 创建
Vue
实例，并在模板中定义
表
单
、
提交
按钮、提示信息等相关内容。
2. 使用
Vue
的
表
单
验证插件，对
表
单
进行验证。
3. 使用
Vue
的计算属性和监听器，实时显示填写的信息是否正确。
4. 在
提交
按钮上绑定一个点
击
事件
，
提交
表
单
。
5. 在
提交
成功后，使用
Vue
的条件渲染指令，显示
提交
成功的提示信息。
6. 在
提交
失败后，使用
Vue
的条件渲染指令，显示错误信息。
7. 使用
Vue
的列
表
渲染指令，将已经报名的人员名
单
显示在页面上。
以上就是一个简
单
的报名系统页面的基本框架思路，具体实现需要根据具体需求进行调整。
