【Vue】修饰符、表单提交方式、自定义组件的关键步骤

news2025/6/18 22:14:50

🎉🎉欢迎来到我的CSDN主页！🎉🎉

🏅我是Java方文山，一个在CSDN分享笔记的博主。📚📚

🌟推荐给大家我的专栏《Vue快速入门》。🎯🎯

👉点击这里，就可以查看我的主页啦！👇👇

Java方文山的个人主页

🎁如果感觉还不错的话请给我点赞吧！🎁🎁

💖期待你的加入，一起学习，一起进步！💖💖

请添加图片描述

目录

一、修饰符

1.1.事件修饰符

1.1.1.stop

1.1.2.prevent

1.1.3.capture

1.1.4.self

1.1.5.once

1.2.按键修饰符

1.2.1enter

1.2.2.tab

1.2.3.delete

1.2.4.esc

1.2.5.space

1.2.6 .up, .down, .left, .right

1.2.7 .ctrl, .alt, .shift, .meta

二、表单

2.1.绑定值与取值

2.2.效果演示

三、自定义组件

3.1.局部组件

3.1.1.组件传参（父传子）

3.1.2.组件传参（子传父）

3.2.全局组件

一、修饰符

1.1.事件修饰符

事件处理器➡特殊后缀（.），用于指明一个指令应该以特殊方式绑定。Vue中常用的修饰符有：v-on、v-model、v-if、v-for、v-bind等。例如，v-on:click是一个事件处理器，它会在用户点击元素时触发。如果需要阻止默认行为，可以使用.prevent修饰符。

1.1.1.stop

在Vue中，当一个事件被触发时，它会向上冒泡到父元素。如果父元素也有相同的事件处理器，那么这个事件处理器将会再次被触发。为了阻止这种事件冒泡，我们可以使用.stop修饰符。

<div @click="outerClick">
  <button @click.stop="innerClick">点击我</button>
</div>

在这个例子中，当用户点击按钮时，只会触发innerClick方法，而不会触发outerClick方法。

1.1.2.prevent

.prevent修饰符用于阻止事件的默认行为。

<a href="https://www.example.com" @click.prevent="handleClick">点击这里</a>

在这个例子中，当用户点击链接时，浏览器会默认跳转到指定的网址。但是，由于我们使用了.prevent修饰符，所以这个默认行为将被阻止。

1.1.3.capture

.capture修饰符用于在捕获阶段而不是冒泡阶段处理事件。

<div @click.capture="outerClick">
  <button @click.capture="innerClick">点击我</button>
</div>

在这个例子中，当用户点击按钮时，事件处理器会在捕获阶段被触发，而不是在冒泡阶段。这意味着，即使父元素也有相同的事件处理器，它也不会被触发。

1.1.4.self

.self修饰符用于将事件处理器绑定到当前元素的自身，而不是它的子元素。

<div @click.self="outerClick">
  <button @click.self="innerClick">点击我</button>
</div>

在这个例子中，当用户点击按钮时，只有当按钮被点击时，才会触发outerClick方法。如果按钮被点击但并没有被完全聚焦（例如，当用户点击按钮的文本），则不会触发任何方法。

1.1.5.once

.once修饰符用于确保事件处理器只被触发一次。

<button @click.once="handleClick">点击我</button>

在这个例子中，当用户点击按钮时，handleClick方法只会被触发一次，即使按钮被多次点击也不会再次触发。

 注1：什么是事件冒泡?

当我们点击最上面的div时，触发点击事件，可是随着冒泡事件的传播，在该div下面的div点击事件也会触发，这就是冒泡事件传播。

1.2.按键修饰符

通常在JavaScript中用于处理用户的键盘输入。

1.2.1enter

这个修饰符通常用于处理"Enter"键的事件。例如，当用户在输入框中按下"Enter"键时，我们可以执行一些操作，如提交表单或开始搜索。

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.key === 'Enter') {
    console.log('Enter key pressed');
  }
});

1.2.2.tab

这个修饰符通常用于处理"Tab"键的事件。例如，当用户在输入框中按下"Tab"键时，我们可以将焦点移动到下一个可编辑的元素。

document.querySelectorAll('input, button').forEach(function(element, index) {
  element.addEventListener('keydown', function(event) {
    if (event.key === 'Tab') {
      // Move to next element if it's not the last one
      if (index < this.length - 1) {
        this[index + 1].focus();
      }
    }
  });
});

1.2.3.delete

这个修饰符通常用于处理"Delete"键的事件。例如，当用户在输入框中按下"Delete"键时，我们可以删除输入的内容。

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.key === 'Delete') {
    event.preventDefault(); // Prevent the default action of deleting text
    console.log('Delete key pressed');
  }
});

1.2.4.esc

这个修饰符通常用于处理"Esc"键的事件。例如，当用户在输入框中按下"Esc"键时，我们可以取消当前的操作或关闭窗口。

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    console.log('Escape key pressed');
  }
});

1.2.5.space

这个修饰符通常用于处理"Space"键的事件。例如，当用户在输入框中按下"Space"键时，我们可以触发一个函数或执行一个操作。

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.key === ' ') {
    console.log('Space key pressed');
  }
});

1.2.6 .up, .down, .left, .right

这些修饰符通常用于处理方向键的事件。例如，当用户在输入框中按下方向键时，我们可以移动光标到上、下、左、右的某个位置。

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.key === 'ArrowUp') {
    console.log('Up arrow key pressed');
  } else if (event.key === 'ArrowDown') {
    console.log('Down arrow key pressed');
  } else if (event.key === 'ArrowLeft') {
    console.log('Left arrow key pressed');
  } else if (event.key === 'ArrowRight') {
    console.log('Right arrow key pressed');
  }
});

1.2.7 .ctrl, .alt, .shift, .meta

这些修饰符通常用于处理特殊键的事件。例如，当用户在输入框中按下Ctrl、Alt、Shift或Meta键时，我们可以执行一些特殊的操作。

document.querySelector('input').addEventListener('keydown', function(event) {
  if (event.ctrlKey) {
    console.log('Ctrl key pressed');
  }
  if (event.altKey) {
    console.log('Alt key pressed');
  }
  if (event.shiftKey) {
    console.log('Shift key pressed');
  }
  if (event.metaKey) {
    console.log('Meta key pressed');
  }
});

以上的修饰符并不是全部，感兴趣的可以去官网查阅相关资料哦！！

二、表单

2.1.绑定值与取值

为了演示效果就不分开讲解绑定值和取值，看代码就好！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
	</head>
	<h2>表单赋值与取值</h2>
	<div id="app">
		<form :model="form" @submit.prevent="submit">
			<div>
				用户：<input v-model="form.username" placeholder="请输入用户名">
			</div>
			<div>
				密码：<input v-model="form.password" placeholder="请输入密码" type="password">
			</div>
			<div>
				<label>头像<input type="file" @change="handleChange"></label>
			</div>
			<div>
				姓名：<input v-v-model.trim="form.name" placeholder="请输入您的真实姓名">
			</div>
			性别：
			<span v-for="sexs in sexList">
				<input v-model="form.sex" type="radio" name="sex" :value="sexs.id">{{sexs.name}}
			</span>
			<div>
				年龄：<input v-model.number="form.age" type="number" placeholder="请输入年龄">
			</div>
			爱好：
			<span v-for="h in hobby">
				<input type="checkbox" v-model="form.hobbies" :value="h.id" />{{h.name}}
			</span>
			
			<div>
				所属校区：
				<select v-model="form.campus">
					<option v-for="addr in address" :value="addr.id">{{addr.name}}</option>
				</select>
			</div>
			<div>
				个人信息：
				<textarea v-model.lazy="form.other" style="vertical-align: middle;" cols="30" rows="10"></textarea>
			</div>
			<div>
				<input v-model="form.accept" type="checkbox">
				阅读并接受<a href="https://blog.csdn.net/weixin_74318097?spm=1011.2415.3001.5343">《用户协议》</a>
			</div>
			<button>提交</button>
		</form>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					form: {
						hobbies: []
					},
					image: {},
					sexList:[{
						id:1,name:"女"
					},{
						id:2,name:"男"
					},{
						id:3,name:"未知"
					}],
					hobby: [{
						id: 1,
						name: '篮球'
					}, {
						id: 2,
						name: '足球'
					}, {
						id: 3,
						name: '象棋'
					}],
					address: [{
						id: 1,
						name: "上海"
					}, {
						id: 2,
						name: "深圳"
					}, {
						id: 3,
						name: "杭州"
					}, {
						id: 4,
						name: "湖南"
					}]
				}
			},
			methods: {
				submit() {
					console.log(this.form);
				},
				handleChange(event) {
					let file = event.target.files[0]
					this.form.image = file
				}
			}
		})
	</script>
</html>

上述代码有几点注意事项：

1.在<form>标签中出现了:model="form"，这是为了将form中的各项数据动态收集到vue的data中的form对象中，方便统一管理。

2.form标签上的@submit.prevent为提交时阻止表单的默认行为（跳转）。

3.v-model.trim是将输入的数据去除前后的空格；v-model.number是转换为Number类型；

v-model.lazy是失去焦点后再把数据渲染到页面上。

4.我们的爱好属性如果没有定义变量或是定义的是null和{}都不行，会选中一个全部选中。

5.我们赋值Value的时候不要直接写value因为Vue抓取不到需要写成:value

2.2.效果演示

我们看一下获取到值没有

控制台这里也获取到值了，到时候我们后台肯定接收的是JSON格式数据，通过这种方式即可。

三、自定义组件

在JavaScript中，自定义组件通常被称为自定义元素，而不是自定义标签。自定义元素是一种HTML元素，它允许您创建可重用的代码片段，这些片段可以在多个页面中使用。自定义元素是Web组件规范的一部分，它们允许您将HTML、CSS和JavaScript组合在一起，以创建可重用的组件。

自定义组件的语法与过滤器相似，所有它也有局部组件和全局组件。

3.1.局部组件

<my-button >123<my-button>

这是自定义的组件但是还没有和Vue相关联，所以页面上输出就只是123，下面我来关联一下。

<script>
		new Vue({
			el: '#app',
			components: {
				"my-button": {
					template: "<button>自定义组件</button>"
				}
			}
		})
	</script>

这样页面上展示的就是按钮了。

3.1.1.组件传参（父传子）

<div id="app">
		<my-button name="我是老子"><my-button>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
	<script>
		new Vue({
			el: '#app',
			components: {
				"my-button": {
					props:['name'],
					template: "<button>{{name}}</button>"
				},
			}
		})
	</script>

 

通过props接收自定义标签上的属性赋值给需要自定义组件在页面上显示的内容。

 

3.1.2.组件传参（子传父）

<div id="app">
		<my-button name="我老子" n="1"><my-button>
	</div>

	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	<script>
		new Vue({
			el: '#app',
			components: {
				"my-button": {
					props:['name'],
					// template代表了自定义组件在页面上显示的类容
					template:'<button @click="incrn">我被{{name}}打{{n}}次</button>',
					data:function(){
						return {
							n:1
						}
					},
					methods:{
						incrn(){
							this.n++;
						}
					}
				}
			}
		})
	</script>

 vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定 

总结：

 父Vue实例->Vue实例，通过prop传递数据

 子Vue实例->父Vue实例，通过事件传递数据

3.2.全局组件

<script type="text/javascript">
		Vue.component('my-button', {
			// props是定义组件中的变量的
			props:['m'],
			// template代表了自定义组件在页面上显示的类容
			template:'<button v-on:click="incrn">我被{{m}}点击{{n}}次</button>',
			data:function(){
				return {
					n:1
				}
			},
			methods:{
				incrn(){
					this.n++;
				}
			}
		});
		
	</script>

这就是全局组件的定义，效果就不展示了和上面的一样。

请添加图片描述

到这里我的分享就结束了，欢迎到评论区探讨交流！！

💖如果觉得有用的话还请点个赞吧 💖

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1026027.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Vue3项目中使用插槽

Vue3项目中使用插槽

前言&#xff1a; 此文章仅记录插槽的使用&#xff0c;用于自己后期学习查看。 代码实现过程中&#xff0c;HelloWorld为子组件&#xff0c;HomeView为父组件 <slot></slot>元素&#xff1a; 是一个插槽出口&#xff0c;是写在子组件中的&#xff0c;表示了父组件…
阅读更多...
81《乡村振兴战略下传统村落文化旅游设计》许少辉瑞博士生辉少许——2023学生开学季许多少年辉光三农

81《乡村振兴战略下传统村落文化旅游设计》许少辉瑞博士生辉少许——2023学生开学季许多少年辉光三农

81《乡村振兴战略下传统村落文化旅游设计》许少辉瑞博士生辉少许——2023学生开学季许多少年辉光三农
阅读更多...
【卖出备兑看涨期权策略（Covered_call）】

【卖出备兑看涨期权策略（Covered_call）】

卖出备兑看涨期权策略&#xff08;Covered_call&#xff09; 卖出备兑看涨期权策略是一种最基本的收入策略&#xff0c;该策略主要操作就是在持有标的资产的同时卖出对应的看涨期权合约&#xff0c;以此来作为从持有的标的资产中获取租金的一种方法。如果标的资产的价格上涨到…
阅读更多...
基于STC15单片机电子时钟液晶1602串口显示-proteus仿真-源程序

基于STC15单片机电子时钟液晶1602串口显示-proteus仿真-源程序

一、系统方案 1、本设计采用STC15单片机作为主控器。 2、液晶1602显示电子时钟。 3、串口显示电子时钟。 4、按键控制开启暂停清零。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 uint count0; uint8 strPhoto[8]; uint wendu0;P3M0 0x…
阅读更多...
LeetCode 332. Reconstruct Itinerary【欧拉回路,通路,DFS】困难

LeetCode 332. Reconstruct Itinerary【欧拉回路,通路,DFS】困难

本文属于「征服LeetCode」系列文章之一&#xff0c;这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁&#xff0c;本系列将至少持续到刷完所有无锁题之日为止&#xff1b;由于LeetCode还在不断地创建新题&#xff0c;本系列的终止日期可能是永远。在这一系列刷题文章…
阅读更多...
怎样获取某个文件的public方法个数

怎样获取某个文件的public方法个数

背景&#xff1a;idea 提供的list可以查看所有的构造方法&#xff0c;但是无法直接告诉我准确的数目&#xff0c;于是写了以下一个单独的类 import java.lang.reflect.Method; import java.lang.reflect.Modifier;public class MyPublicMethodCounter {public static void mai…
阅读更多...
Cento7 Docker安装Zabbix，定制自定义模板

Cento7 Docker安装Zabbix，定制自定义模板

1.先安装docker环境 yum -y install yum-utils device-mapper-persistent-data lvm2#导入docker安装库 yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.repo #按指定版本安装好docker yum install docker-ce-20.10.5 docker-ce-cli-20…
阅读更多...
vector类（顺序表）

vector类（顺序表）

文章目录 1.定义&#xff1a;接口成员函数构造成员函数析构函数赋值 2.迭代器2.1begin&#xff08;&#xff09;和end&#xff08;&#xff09;重点2.1.1应用2.1.1.1函数调用 2.1.1.2用变量接受迭代器 2.2rbegin()和rend()2.2.1应用 3.顺序表的访问&#xff08;增删查检&#x…
阅读更多...
Vue的路由使用，Node.js下载安装及环境配置教程 （超级详细）

Vue的路由使用，Node.js下载安装及环境配置教程 （超级详细）

前言&#xff1a; 今天我们来讲解关于Vue的路由使用&#xff0c;Node.js下载安装及环境配置教程 一&#xff0c;Vue的路由使用 首先我们Vue的路由使用&#xff0c;必须要导入官方的依赖的。 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务https://www.bootcdn.cn/ <…
阅读更多...
架构核心技术之分布式消息队列

架构核心技术之分布式消息队列

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 今天我们来学习分布式消息队列&#xff0c;分布式消息队列的知识结构如下图。 主要介绍以下内容&#xff1a; 同步架构和异步架构的区别。异步架构的主要组成部分&#xff1a;消息生产者、消息消费者、分布式消息队列…
阅读更多...
Vue路由及Node.js环境搭建

Vue路由及Node.js环境搭建

一、Vue路由 1.1 定义 Vue路由是指使用Vue Router插件来管理前端应用程序的导航和页面路由的过程。它允许你在单页面应用程序&#xff08;SPA&#xff09;中定义不同的路由路径&#xff0c;并将每个路径映射到相应的组件。 通过使用Vue路由&#xff0c;你可以根据URL的变化加载…
阅读更多...
无涯教程-JavaScript - ASIN函数

无涯教程-JavaScript - ASIN函数

描述 ASIN函数返回给定数字的反正弦或反正弦,并返回以弧度表示的Angular,介于-π/2和π/2之间。 语法 ASIN (number)争论 Argument描述Required/OptionalNumberThe sine of the angle you want and must be from -1 to 1.Required Notes 如果您希望ASIN函数返回的Angular以…
阅读更多...
HUAWEI华为荣耀猎人游戏本V700 i7独显2060(FRD-WFD9)原装出厂Windows10系统工厂模式(含F10还原)

HUAWEI华为荣耀猎人游戏本V700 i7独显2060(FRD-WFD9)原装出厂Windows10系统工厂模式(含F10还原)

华为HONOR荣耀笔记本原厂系统镜像包&#xff0c;安装恢复时自动创建F10一键智能还原功能 链接&#xff1a;https://pan.baidu.com/s/1_px_3Fr9qEE6jExz1eKKKg?pwdk6uc 提取码&#xff1a;k6uc 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、华为电脑管家等预装程序…
阅读更多...
基于springboot高校场馆预订系统

基于springboot高校场馆预订系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…
阅读更多...
(并查集) 1971. 寻找图中是否存在路径 ——【Leetcode每日一题】

(并查集) 1971. 寻找图中是否存在路径 ——【Leetcode每日一题】

❓ 1971. 寻找图中是否存在路径 难度&#xff1a;简单 有一个具有 n 个顶点的 双向 图&#xff0c;其中每个顶点标记从 0 到 n - 1&#xff08;包含 0 和 n - 1&#xff09;。图中的边用一个二维整数数组 edges 表示&#xff0c;其中 edges[i] [ui, vi] 表示顶点 ui 和顶点 …
阅读更多...
select in ()的时候，MySQL会自动按主键自增排序，要是按IN中给定的顺序来取，如何实现呢？

select in ()的时候，MySQL会自动按主键自增排序，要是按IN中给定的顺序来取，如何实现呢？

select * from table_name where id in ()的时候&#xff0c;MySQL会自动按主键自增排序&#xff0c;要是按IN中给定的顺序来取&#xff0c;如何实现呢&#xff1f; 比如下面这个查询结果&#xff0c;mysql会默认使用主键id的ASC自增排序结果集&#xff1a; 那么&#xff0c;…
阅读更多...
RHEL 8.8 安装部署 Zabbix 6.4 详细过程

RHEL 8.8 安装部署 Zabbix 6.4 详细过程

文章目录 前言1. 关闭系统防火墙2. 禁用 SELinux 模块3. 配置本地 YUM 源4. 配置 Zabbix 下载源5. 切换 PHP 模块版本6. 安装 Zabbix Server && Frontend && Agent7. 安装配置 MariaDB 数据库8. 为 Zabbix Server 配置数据库9. 启动 Zabbix Server 和 Agent 服…
阅读更多...
【Java 基础篇】Java 中的 `wait` 与 `notify` 方法详解

【Java 基础篇】Java 中的 `wait` 与 `notify` 方法详解

在 Java 中&#xff0c;wait 与 notify 方法是用于线程之间通信的重要工具。它们被用于实现线程的等待与唤醒&#xff0c;以及线程之间的协作。本节将深入介绍这两个方法的使用方式、作用以及一些注意事项。 wait 方法 wait 方法是 java.lang.Object 类的一个实例方法&#x…
阅读更多...
知识图谱(4)图算法

知识图谱(4)图算法

基于图有很多任务&#xff0c;比如&#xff1a; 节点分类&#xff1a;预测哪些网站是诈骗网站&#xff1b;关系预测&#xff1a;判断图中两个节点的关系&#xff1b;图分类&#xff1a;分子性质预测&#xff1b;聚类&#xff1a;社交网络分析&#xff0c;将相似用户聚类在一起…
阅读更多...
如何选择合适的官文转录供应商

如何选择合适的官文转录供应商

为什么质量不应该是唯一的考虑因素 官文记录必须准确无误——很多重要的程序&#xff08;包括法庭案件审判、严重欺诈调查和尸检调查&#xff09;成功得出结论&#xff0c;可能都依赖于记录的准确性。但是&#xff0c;在选择转录供应商时&#xff0c;还必须考虑更多因素。 官文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023