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

🎉🎉欢迎来到我的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 oneif (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 textconsole.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.mzph.cn/news/85513.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

识别准确率达 95%,华能东方电厂财务机器人实践探索

摘 要&#xff1a;基于华能集团公司大数据与人工智能构想理念&#xff0c;结合东方电厂实际工作需要&#xff0c;财务工作要向数字化、智能化纵深推进&#xff0c;随着财务数字化转型和升级加速&#xff0c;信息化水平不断提升&#xff0c;以及内部信息互联互通不断加深&#x…

git之撤销工作区的修改和版本回溯

有时候在工作区做了一些修改和代码调试不想要了,可如下做 (1)步骤1:删除目录代码,确保.git目录不能修改 (2)git log 得到相关的commit sha值 可配合git reflog 得到相要的sha值 (3)执行git reset --hard sha值,可以得到时间轴任意版本的代码 git reset --hard sha值干净的代…

算法基础之高精度总结

目录 高精度算法分类 高精度加减乘除的异同点 加和乘 相同点 减和除 相同点 不同点 处理前导0的方式 高精度算法分类 分类&#xff1a;加、减、乘、除 其中加减乘都适用于两个数都是高精度&#xff0c;除法因为除数是高精度的话不好用整除的方法&#xff0c;所以除法时…

代码随想录算法训练营 单调栈part01

一、每日温度 739. 每日温度 - 力扣&#xff08;LeetCode&#xff09; 从左到右除了最后一个数其他所有的数都遍历一次&#xff0c;最后一个数据对应的结果肯定是 0&#xff0c;就不需要计算。遍历的时候&#xff0c;每个数都去向后数&#xff0c;直到找到比它大的数&#x…

【Node.js】定时任务cron:

文章目录 一、文档&#xff1a;【Nodejs 插件】 二、安装与使用【1】安装【2】使用 三、cron表达式&#xff1a;{秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)}四、案例&#xff1a; 一、文档&#xff1a; 【说明文档】https://www.npmjs.com/package/cron 【Cron表…

中国核动力研究设计院使用 DolphinDB 替换 MySQL 实时监控仪表

随着仪表测点的大幅增多和采样频率的增加&#xff0c;中国核动力研究设计院仪控团队原本基于 MySQL 搭建的旧系统已经无法满足大量数据并发写入、实时查询和聚合计算的需求。他们在研究 DB-Engines 时序数据库榜单时了解到国内排名第一的 DolphinDB。经过测试&#xff0c;发现其…

齿轮减速机设备类网站pbootcms模板(PC端+手机端自适应)

齿轮减速机设备类网站pbootcms模板-手机端自适应&#xff0c;优化SEO效果 模板介绍&#xff1a; 这是一款基于PbootCMS内核开发的模板&#xff0c;专为机械设备和加工机械类企业设计。该模板具有简洁简单的页面设计&#xff0c;易于管理&#xff0c;同时还附带测试数据。通过使…

ID保持的人像生成

AIGC真实人像写真&#xff0c;也即输入一些图片&#xff0c;生成图片里对应人物在不同场景和风格下的图片。妙鸭相机作为AIGC领域一款成功的收费产品为大家展示了如何使用AIGC技术只需要少量的人脸图片建模&#xff0c;即可快速提供真/像/美的个人写真&#xff0c;在极短的时间…

Linux--线程 共享内存空间

线程_共享内存空间 //线程_共享内存空间#include <stdio.h> #include <pthread.h>int g_data 0;void *func1(void *arg) {printf("t1: %ld thread is create!\n",(unsigned long)pthread_self());printf("t1: param is %d \n",*((int *)arg)…

Python —— pytest框架

1、认识pytest框架 1、搭建自动化框架的思路与流程 1、搭建自动化测试框架的思路和流程&#xff0c;任意测试手段流程都是一致的&#xff1a;手工测试、自动化测试、工具测试 手工测试&#xff1a;熟悉业务 —— 写用例 —— 执行用例并记录结果 —— 生成测试报告自动化测试…

一、 计算机网络概论

一、计算机网络概论 1、计算机网络概述 1.1、概念 计算机网络是一个将分散的、具有独立功能的计算机系统&#xff0c;通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统 是一些互连的、自治的计算机系统的集合 以能够相互共享资源的方…

搭建部署属于自己的基于gpt3.5的大语言模型(基于flask+html+css+js+mysql实现)

一、简介 本项目是一个基于GPT-3.5模型的聊天机器人网站&#xff0c;旨在为用户提供一个简便、直接的方式来体验和利用GPT-3.5模型的强大功能。项目以Flask为基础&#xff0c;构建了一个完整的Web应用程序&#xff0c;其中包含了多个前端页面和后端API接口&#xff0c;能够处理…

研究生选控制嵌入式还是机器视觉好?

研究生选控制嵌入式还是机器视觉好&#xff1f; 我是嵌入式/硬件方向转的算法&#xff0c;现在是公司的算法负责人&#xff0c;如果再让我选一次&#xff0c;我是不会再选嵌入式方 向&#xff0c;嵌入式如果只做技术是没前途的。 你要是有一定自学能力&#xff0c;能自己在学校…

make: /bin/nvcc: Command not found 解决找不到nvcc

首先输入nvcc -V查看nvcc路径&#xff0c;发现报错Command nvcc not found&#xff0c;接下来我们就要解决这个问题。 1&#xff09;进入cuda的bin目录cd /usr/local/cuda/bin&#xff0c;ls查看是否有nvcc 说明存在nvcc但cuda路径没有添加系统变量 2&#xff09;在bin目录下输…

[Model.py 03]Modification for creating terrain matrix3.

Other 2 function. get_rectangle_coordinates函数 def get_rectangle_coordinates(self, x1, y1, x2, y2):获得由&#xff08;x1,y1&#xff09;&#xff08;x2,y2&#xff09;所围成的矩阵边上的坐标列表# Ensure (x1, y1) is the bottom-left corner and (x2, y2) is the t…

大数据 Hive 数据仓库介绍

目录 一、​​数据仓库概念 二、场景案例&#xff1a;数据仓库为何而来&#xff1f; 2.1 操作型记录的保存 2.2 分析型决策的制定 2.3 OLTP 环境开展分析可行吗&#xff1f; 2.4 数据仓库的构建 三、数据仓库主要特征 3.1 面向主题性&#xff08;Subject-Orient…

BOM与DOM--记录

BOM基础&#xff08;BOM简介、常见事件、定时器、this指向&#xff09; BOM和DOM的区别和联系 JavaScript的DOM与BOM的区别与用法详解 DOM和BOM是什么&#xff1f;有什么作用&#xff1f; 图解BOM与DOM的区别与联系 BOM和DOM详解 JavaScript 中的 BOM&#xff08;浏览器对…

无源供电无线测温系统的应用意义

电力系统设备在长期的运行中&#xff0c;往往会产生老化或过热现象&#xff0c;如果没有及时发现和解决&#xff0c;可能会造成严重的火灾事故。由于变电站设备地理位置偏远&#xff0c;对于其维护和监控&#xff0c;管理人员不能做到面面俱到&#xff0c;巡检和维护的难度较大…

使用香橙派学习Linux udev的rules 并实现U盘的自动挂载

在之前编程首先语音刷抖音的博文里提到过udev&#xff0c;现在回顾一下&#xff1a; 什么是udev&#xff1f; udev是一个设备管理工具&#xff0c;udev以守护进程的形式运行&#xff0c;通过侦听内核发出来的uevent来管理/dev目录下的设备文件。udev在用户空间运行&#xff0c;…

基础课-解析几何

1.平面直角坐标系 两点A(x1,y1)与B(x2,y2)之间的距离: 2.两点斜率公式 3.点到直线的距离 平行线之间的距离 4.平面直线方程的几种形式 点斜式 点P(x0,y0),斜率为k的直线方程:y-y0k(x-x0) 5.圆