Vue的学习之旅-part3

Vue的学习之旅-part1

  • vue的自带指令
    • v-model的修饰符 一般用于input输入框中
    • v-model.number
    • v-model.trim
    • v-slot 作用域插槽
      • 具名插槽
      • 插槽-组件数据传递
      • 注意点1:
      • 注意点2:
    • v-on: 绑定触发事件
      • v-on监听事件的修饰符
        • 冒泡: 通过.stop阻止
        • 阻止默认行为 通过.prevent修饰符阻止
        • 键盘点击事件@keyup

前几篇博客: Vue的学习之旅-part1
前几篇博客: Vue的学习之旅-part2

博主 DTcode7 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!

书接上回,接着说vue中自带的指令,part2中讲到v-model的双向绑定,那这里接着从v-model的修饰符开始吧~

vue的自带指令

v-model的修饰符 一般用于input输入框中

v-model.lazy

输入框失去焦点、按下回车才触发数据的双向同步操作
在这里插入图片描述

v-model.number

一般情况下,v-model绑定的数据都会以string类型进行赋值存储,当我们想要让保存的数据为number数值类型时,用这个就行。 如果用 type=“number” 这只是限制input输入框的输入类型为数字,但是绑定到data中还是将数字转化为string类型进行存储了。
但是用v-model.number进行双向绑定,那么输入的内容都将被转换成number类型存储。
在这里插入图片描述
不用v-model.number修饰符进行双向绑定,那么存储的数据类型通过typeof 变量名
展示的是:string类型
在这里插入图片描述
用v-model.number修饰符进行双向绑定:在这里插入图片描述

v-model.trim

清除输入内容中左右两边的多余空格(内容中间的空格呢?)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

v-slot 作用域插槽

在这里插入图片描述

在这里插入图片描述

具名插槽

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

插槽-组件数据传递

组件中的数据,只会在组件中,只有组件内可以获取到
使用这个组件的时候,外部是不能得到这个组件内的的数据的
例题:在这里插入图片描述
在这里插入图片描述
但是,这是行不通的,因为只有 组件中才可以访问 item
想要解决这个问题:
在这里插入图片描述
绑定在 元素上的 属性 被称为插槽 prop。现在在父级作用域(调用组件的地方)中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字
在这里插入图片描述
在这里插入图片描述

注意点1:

在这里插入图片描述
在这里插入图片描述

注意点2:

在这里插入图片描述
在这里插入图片描述

v-on: 绑定触发事件

如:点击click 键盘输入keyup 鼠标移入hover等
绑定的事件传参与否
当所要触发的函数没有参数需要传入的时候,可以不写() 直接写方法名称
当所要触发的函数有参数需要传入的时候:
在这里插入图片描述
在这里插入图片描述
这里虽然形参我们叫abc,但实际上是event,默认名字就叫event
在这里插入图片描述
event对象是游览器自己生成的对象,就是在我们鼠标移动、点击等操作时游览器会自动生成event对象。 event.target.value就是当前目标的值
当所要触发的函数有参数需要传入的时候,同时也要传入event对象:
在这里插入图片描述
这里直接用$event.target.value就能直接获取到目标的值
在这里插入图片描述
在这里插入图片描述
注意:传参时,数字可以不用’ ’包裹,但是字符串如果不用’ ’包裹,则会被vue理解为data中的变量!在这里插入图片描述

v-on监听事件的修饰符

在这里插入图片描述

冒泡: 通过.stop阻止

在这里插入图片描述

阻止默认行为 通过.prevent修饰符阻止

在这里插入图片描述
在这里插入图片描述

键盘点击事件@keyup

通过.keyCode修饰符或者 .keyAlias修饰符 获取指定按键

注意: .keyCode==》是叫你写成.13 (表示enter键) .keyAlias===》是叫你写成.enter(表示enter键)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

好了好了,写太多看不完,换一篇继续:
Vue的学习之旅-part4

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

软考118-上午题-【软件工程】-能力成熟度模型

一、考试题型 选择题(13题) 二、能力成熟度模型CMM 能力成熟度模型CMM的研究目的是:提供一种评价软件承接方能力的方法,同时它可帮助软件组织改进其软件过程。 CMM 将软件过程改进分为以下5个成熟度级别: 1、初始级…

探索实践昏暗光线低光照场景下目标检测,基于YOLOv7【tiny/l/x】模型开发构建昏暗光线低光照场景下的目标检测识别系统

昏暗光线低光照条件下的目标检测问题,是机器视觉领域一个长期存在且持续受到关注的挑战。这个问题的背景主要源自现代社会对机器视觉技术的广泛需求,特别是在光线条件不佳的环境下,如夜间监控、自动驾驶、安防系统等场景。在昏暗光线或低光照…

849. Dijkstra求最短路 I

tips: 采用0x3f3f3f3f作为一个极大值: 1061109567 //是一个很大的数,可以用来代表∞; 在memset里0x3f表示为0x3f3f3f3f memset(a, 0x3f, sizeof a); //0x是十六进制的意思; memset()是对char操作,即一个…

海外媒体宣发套餐推广8个要点解析为标题-华媒舍

在当前全球化的时代背景下,海外市场的开拓对于企业的发展至关重要。而海外媒体宣传是一种有效的推广方式,可以帮助企业在全球范围内打开市场。本文将对8个海外媒体宣发套餐的推广要点进行解析,帮助企业了解如何在海外市场进行宣传推广。 1. 媒…

js,uniapp,vue,小写数字转化为大写

应用场景: 把1、2、3,转为一、二、三 方法: retBigSrt(num) {const changeNum [零, 一, 二, 三, 四, 五, 六, 七, 八, 九]const unit [, 十, 百]num parseInt(num)const getWan (temp) > {const strArr temp.toString().split().re…

论文阅读《Semantic Prompt for Few-Shot Image Recognition》

论文地址:https://arxiv.org/pdf/2303.14123.pdf 论文代码:https://github.com/WentaoChen0813/SemanticPrompt 目录 1、存在的问题2、算法简介3、算法细节3.1、预训练阶段3.2、微调阶段3.3、空间交互机制3.4、通道交互机制 4、实验4.1、对比实验4.2、组…

软件杯 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 *…

QT C++(QT对象树与内存泄漏管理,QT中文乱码问题)

文章目录 1. QT对象树与内存泄漏2. QT中文乱码 1. QT对象树与内存泄漏 #include "widget.h" #include "ui_widget.h" #include <QLabel>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//通过代码构…

SpringCloud Alibaba Sentinel 实现熔断功能

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第十六篇&#xff0c;即使用 Sentinel 实现熔断功能。 二、 Ribbon 系列 首先我们新建两个服务的提供者…

90天玩转Python—05—基础知识篇:Python基础知识扫盲,使用方法与注意事项

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇:C站最全Python标准库总结 90天玩转Python--02--基础知识篇:初识Python与PyCharm 90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装) 90天玩转Python—04—基础知识篇:Pytho…

神经网络中的超参数调整

背景 在深度神经网络学习和优化中&#xff0c;超参数调整一项必备技能&#xff0c;通过观察在训练过程中的监测指标如损失loss和准确率来判断当前模型处于什么样的训练状态&#xff0c;及时调整超参数以更科学地训练模型能够提高资源利用率。在本研究中使用了以下超参数&#x…

cocos creator 安卓包 输入法遮挡问题

问题描述 Cocos Creator开发版本&#xff1a; v2.4.x 如上效果图。该需求是&#xff0c;进入游戏后&#xff0c;随机角色名&#xff0c;可以自己编辑。在未修改前 手机输入法遮挡了游戏的编辑框&#xff0c;导致无法直观展示&#xff0c;编辑的文字。尝试各种修改清单文件wind…

2024春算法训练4——函数与递归题解

一、前言 感觉这次的题目都很好&#xff0c;但是E题....&#xff08;我太菜了想不到&#xff09;&#xff0c;别人的题解都上百行了&#xff0c;晕&#xff1b; 二、题解 A-[NOIP2010]数字统计_2024春算法训练4——函数与递归 (nowcoder.com) 这种题目有两种做法&#xff1a;…

Golang单元测试和压力测试

一.单元测试 1.1 go test工具 go语言中的测试依赖go test命令。编写测试代码和编写普通的Go代码过程类似&#xff0c;并不需要学习新的语法&#xff0c;规则和工具。 go test命令是一个按照一定约定和组织的测试代码的驱动程序。在包目录内&#xff0c;所有以_test.go为后缀名的…

自定义gitlog格式

git log命令非常强大而好用&#xff0c;在复杂系统的版本管理中扮演着重要的角色&#xff0c;但默认的git log命令显示出的东西实在太丑&#xff0c;不好好打扮一下根本没法见人&#xff0c;打扮好了用alias命令拍个照片&#xff0c;就正式出道了&#xff01; 在使用git查看lo…

物联网可视化平台

随着数字化转型的深入&#xff0c;物联网技术正在成为企业实现智能化、高效化运营的重要工具。物联网可视化平台&#xff0c;作为连接物理世界与数字世界的桥梁&#xff0c;为企业提供了直观、实时的数据展示和监控能力&#xff0c;从而在数字化转型中扮演着关键角色。 一、物…

链路代价信息、链路状态信息(链路状态通告LSA)

链路代价信息"link cost information" 通常指的是**在网络中&#xff0c;数据包从一个节点传输到另一个节点所需承担的“成本”或者“开销”&#xff0c;这个概念常用于路由算法和网络设计中**。以下是一些关键要点&#xff1a; 1. **路径开销**&#xff1a;路径开…

【iOS】UITableView性能优化

文章目录 前言一、优化的本质二、卡顿产生原因三、CPU层面优化1.使用轻量级对象2.cellForRowAtIndexPath方法中不要做耗时操作3.UITableView的复用机制4.提前计算好布局了解tableView代理方法执行顺序cell高度计算rowHeightestimatedRowHeight 高度计算进行时机rowHeight计算时…

如何采集大众点评的商家信息-简数采集器

如何使用简数采集器批量采集大众点评的店铺和活动等相关信息呢&#xff1f; 简数采集器目前不支持采集大众点评的店家和活动等信息&#xff0c;不建议采集&#xff0c;请换个采集源采集。 简数采集器采集网站文章特别简单&#xff0c;不需要懂编程写代码&#xff0c;只需填写…

基于Spring Boot的网上书城系统(带文档)

主要功能 本次设计任务是要设计一个网上书城管理系统&#xff0c;通过这个系统能够满足网上书城的管理及用户的图书信息管理及购物功能。系统的主要功能包括&#xff1a;首页、个人中心、用户管理、图书类型管理、图书分类管理、图书信息管理、我的收藏管理、系统管理、订单管…