【Vue】修饰符表单提交方式自定义组件

news2024/11/26 18:40:03

🎉🎉欢迎来到我的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/1023607.html

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

相关文章

[MySQL]基本介绍及安装使用详细讲解

[MySQL]基本介绍及安装使用详细讲解

简单介绍 数据库 (DataBase)&#xff0c;简称DB 顾名思义&#xff0c;即存储数据的仓库&#xff0c;数据是有组织的进行存储 数据库管理系统(DataBase Management System)&#xff0c;简称DBMS 管理数据库的大型软件 SQL(Structured Query Language)&#xff0c;简称SQL&…
阅读更多...
（附12306抢票脚本）国庆长假马上来啦，Python分析【去哪儿旅游攻略】数据，制作可视化图表

（附12306抢票脚本）国庆长假马上来啦，Python分析【去哪儿旅游攻略】数据，制作可视化图表

目录 前言环境使用模块使用数据来源分析 代码实现导入模块请求数据解析保存 数据可视化导入模块、数据年份分布情况月份分布情况出行时间情况费用分布情况人员分布情况 前言 2023年的中秋节和国庆节即将来临&#xff0c;好消息是&#xff0c;它们将连休8天&#xff01;这个长假…
阅读更多...
java学习--day10 （继承）

java学习--day10 （继承）

文章目录 day9作业今天的内容1.继承1.1.生活中的继承1.2.Java中继承1.3关于父类子类的内存分析1.4重写【重点】1.5重载【overload】 day9作业 1.构造代码块和构造方法的区别 &#xff5b;代码块 &#xff5d; public 类名 () {} 都是实例化一个对象的时候执行的 只不过构造代码…
阅读更多...
VSCode『SSH』连接服务器『GUI界面』传输

VSCode『SSH』连接服务器『GUI界面』传输

前言 最近需要使用实验室的服务器训练带有 GUI 画面的 AI 算法模型&#xff08;pygame&#xff09;&#xff0c;但是我是使用 SSH 连接的&#xff0c;不能很好的显示模型训练的效果画面&#xff0c;所以下面将会讲解如何实现 SSH 连接传输 Linux GUI 画面的 注&#xff1a;我们…
阅读更多...
面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

面试官：什么是虚拟DOM？如何实现一个虚拟DOM？说说你的思路

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 一、什么是虚拟DOM 二、为什么需要虚拟DOM 三、如何实现虚拟DOM 小结 一、什么是虚拟DOM 虚拟 DOM &#xff08…
阅读更多...
统计物理学复习----粒子的最概然分布

统计物理学复习----粒子的最概然分布

热力学中&#xff0c;每个粒子都是相同的统计物理学中&#xff0c;每个粒子是有差别的&#xff0c;对差别的不同处理方式决定了不同的统计理论理论力学中&#xff0c;质点可以用r个广义坐标与r个广义动量描述&#xff0c;这2r个变量的基构成了一个参数空间 经典统计理论 自由粒…
阅读更多...
WorkPlus打造企业移动门户，实现高效协作与便捷访问

WorkPlus打造企业移动门户，实现高效协作与便捷访问

在移动互联网的时代&#xff0c;企业对于高效的协作和便捷的访问需求日益增长。WorkPlus作为领先品牌&#xff0c;致力于打造企业移动门户&#xff0c;帮助企业实现高效协作与便捷访问。本文将重点介绍WorkPlus如何通过创新的解决方案&#xff0c;为企业提供定制化的企业移动门…
阅读更多...
netty server端启动源码阅读分析

netty server端启动源码阅读分析

服务端的启动通过ServerBootstrap类来完成&#xff0c;ServerBootstrap内有以下主要属性 ServerBootstrap extends AbstractBootstrap {//处理channel连接事件的线程组EventLoopGroup group;//处理channel其它事件的线程组EventLoopGroup childGroup;//创建channel的工厂类Cha…
阅读更多...
基于PyTorch搭建Mask-RCNN实现实例分割

基于PyTorch搭建Mask-RCNN实现实例分割

基于PyTorch搭建Mask-RCNN实现实例分割 在这篇文章中&#xff0c;我们将讨论 Mask RCNN Pytorch 背后的理论以及如何在 PyTorch 中使用预训练的 Mask R-CNN 模型。 1. 语义分割、目标检测和实例分割 在之前的博客文章里介绍了语义分割和目标检测&#xff08;如果感兴趣可以参…
阅读更多...
【golang】调度系列之P

【golang】调度系列之P

调度系列 调度系列之goroutine 调度系列之m 在前面两篇中&#xff0c;分别介绍了G和M&#xff0c;当然介绍的不够全面&#xff08;在写后面的文章时我也在不断地完善前面的文章&#xff0c;后面可能也会有更加汇总的文章来统筹介绍GMP&#xff09;。但是&#xff0c;抛开技术细…
阅读更多...
华为云云耀云服务器L实例使用教学 | 访问控制-安全组配置规则 实例教学

华为云云耀云服务器L实例使用教学 | 访问控制-安全组配置规则 实例教学

文章目录 访问控制-安全组什么叫安全组安全组配置默认安全组配置安全组配置实例安全组创建安全组模板配置安全组模板&#xff1a;通用Web服务器 配置安全组规则安全组配置规则功能介绍修改允许特定IP地址访问Web 80端口服务建立仅允许访问特定目的地址的安全规则配置网络ACL对实…
阅读更多...
开源数字孪生基础设施

开源数字孪生基础设施

开源数字孪生基础设施 开源数字基础设施 开源数字基础设施 开源软件是基础设施发展的一种模式&#xff0c;这是在2007年美国科学基金会发布的《认识基础设施&#xff1a;动力机制、冲突和设计》中得出的结论。在这份55页的报告中三次集中谈到了开源软件&#xff08;Open Sourc…
阅读更多...
1999-2018年地级市经济增长数据

1999-2018年地级市经济增长数据

1999-2018年地级市经济增长数据 1、时间&#xff1a;1999-2018年 2、指标&#xff1a; 行政区划代码、城市、年份、地区生产总值_当年价格_全市_万元、地区生产总值_当年价格_市辖区_万元、人均地区生产总值_全市_元、人均地区生产总值_市辖区_元、地区生产总值增长率_全市_…
阅读更多...
MySQL使用C语言链接

MySQL使用C语言链接

MySQL使用C语言链接 MySQL connect接口介绍mysql_initmysql_real_connectmysql_querymysql_store_result\mysql_use_result()mysql_num_rowsmysql_num_fieldsmysql_fetch_fieldsmysql_fetch_rowmysql_close MySQL connect 使用C语言来连接数据库&#xff0c;本质上就是利用一些…
阅读更多...
「聊设计模式」之命令模式（Command）

「聊设计模式」之命令模式（Command）

&#x1f3c6;本文收录于《聊设计模式》专栏&#xff0c;专门攻坚指数级提升&#xff0c;助你一臂之力&#xff0c;带你早日登顶&#x1f680;&#xff0c;欢迎持续关注&&收藏&&订阅&#xff01; 前言 在面向对象设计中&#xff0c;设计模式是重要的一环。设计…
阅读更多...
c:Bubble Sort

c:Bubble Sort

/*****************************************************************//*** \file SortAlgorithm.h* \brief 业务操作方法* VSCODE c11* \author geovindu,Geovin Du* \date 2023-09-19 ***********************************************************************/ #if…
阅读更多...
前端知识以及组件学习总结

前端知识以及组件学习总结

JS 常用方法 js中字符串常用方法总结_15种常见js字符串用法_<a href"#">leo</a>的博客-CSDN博客 <script>var str"heool"console.log(str.length);console.log(str.concat(" lyt"));console.log(str.includes("he&quo…
阅读更多...
WebPack5基础使用总结(一)

WebPack5基础使用总结(一)

WebPack5基础使用总结 1、WebPack1.1、开始使用1.2、基本配置 2、处理样式资源2.1、处理Css资源2.2、处理Less资源2.3、处理Sass和Scss资源2.4、处理Styl资源 3、处理图片资源3.1、输出资源情况3.2、对图片资源进行优化 4、修改输出资源的名称和路径4.1、自动清空上次打包资源 …
阅读更多...
想了解期权分仓交易和开户？这里告诉你。

想了解期权分仓交易和开户？这里告诉你。

期想了解期权分仓交易和开户&#xff1f;这里告诉你。权就是合约交易&#xff0c;通过买卖认购和认沽期权合约实现未来是否能赚钱&#xff0c;具备做多和做空T0双向交易机制&#xff0c;期权分仓开户就是零门槛开通期权账户&#xff0c;下文介绍想了解期权分仓交易和开户&#…
阅读更多...
经验分享｜作为程序员之后了解到的算法知识

经验分享｜作为程序员之后了解到的算法知识

欢迎关注博主 六月暴雪飞梨花 或加入【六月暴雪飞梨花】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023