当前位置：首页 > news >正文

学学vue-2

news 2025/9/15 18:01:16

1.7 指令修饰符

@keyup.enter：监听键盘回车事件，回车触发事件@keyup.enter代码
v-model修饰符：
- v-model.trim：去首尾空格
- v-model.number：变数字（如果是数字的话，转变为数字）
@事件名.stop：阻止冒泡现象，如果在大盒子中嵌套小盒子，点击小盒子之后，小盒子响应，之后大盒子也会相应，因为小盒子在大盒子所包含的区域当中，使用stop可以阻止这种冒泡行为（可以通过在小盒子中添加e.stopPropagation()解决但是太长了）在小盒子的点击事件中直接写@click.stop即可达成效果
@事件名.prevent：阻止默认行为：比如写了一个超链接，把@click写成@click.prevent就不会跳转了上面三个修饰符
v-bind对于控件样式增强：
- v-bind控制class。[v-bind class](#v-bind class)
  - 语法：:class="对象/数组"
  - 对象键就是名，值是bool，如果值为true就有这个类，反之没有这个类
    数组中所有的类都会添加到盒子中，本质是一个class列表
  - ```
  对象：<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>
  数组：<div class="box" :class="[ 类名1， 类名2， 类名3]"></div>
```
- 对象，适用场景：一个类名来回切换
  数组，适用场景：批量添加或者删除
- v-bind行内样式(style)增强，操作style。[v-bind style](#v-bind style)
  - 语法：:style="样式对象"（style中的json键值对需要将值引起来，否则报错）
  - 适用场景：某个属性动态设置
  - ```
  <div class="box" :style="{ css属性名1: css属性值, css属性名2: css属性值2}"></div>
```

@keyup.enter代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h3>@keyup.enter → 监听回车事件</h3><input @keyup.enter='fn' v-model='username' type="text"></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: ''},methods: {fn (e) {if (e.key === 'Enter') {console.log('键盘回车键触发', this.username)}}}})</script>
</body>
</html>

在这里插入图片描述

上面三个修饰符

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 100px;height: 100px;background-color: pink;position: relative;}.inner{width: 50px;height: 50px;background-color: cornflowerblue;position: absolute;top: 0;left: 0;}</style>
</head>
<body><div id="app"><h3>v-model修饰符 .trim .number</h3>姓名：<input v-model.trim="username" type="text"><br>年龄：<input v-model.number="age" type="text"><br><h3>@事件名.stop → 阻止冒泡</h3><div @click='outerFn' class='outer'><div @click.stop='innerFn' class='inner'>子块</div></div><h3>@事件名.prevent → 阻止默认行为</h3><a @click.prevent href="https://www.baidu.com">阻止默认行为</a></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: "#app",data: {username: '',userage: ''},methods: {outerFn(){alert("外部点击")},innerFn(e){// e.stopPropagation()alert("内部点击")}}})</script>
</body>
</html>

在这里插入图片描述

v-bind class

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jd导航栏</title><style>/* 移除所有元素的默认外边距和内边距，以便更好地控制布局 */  * {  margin: 0;  padding: 0;  }  /* 设置无序列表的显示方式为Flex布局，并添加底部边框和内边距 */  ul {  display: flex; /* 使用Flexbox布局 */  border-bottom: 2px solid #e01222; /* 底部边框为2px宽的实线，颜色为#e01222 */  padding: 0 10px; /* 内边距设置为左右各10px，上下为0 */  }  /* 设置列表项的样式，包括宽度、高度、行高、移除列表符号以及文本居中对齐 */  li {  width: 100px; /* 每个列表项的宽度为100px */  height: 50px; /* 每个列表项的高度为50px */  line-height: 50px; /* 设置行高为50px，以实现垂直居中文本 */  list-style: none; /* 移除列表项前的默认项目符号 */  text-align: center; /* 文本在列表项中居中对齐 */  }  /* 设置列表项内链接的样式，包括显示方式、移除下划线、字体加粗和文本颜色 */  li a {  display: block; /* 将链接的显示方式设置为块级元素 */  text-decoration: none; /* 移除链接文本的下划线 */  font-weight: bold; /* 字体加粗 */  color: #333333; /* 文本颜色为深灰色#333333 */  }  /* 当链接具有active类时，改变其背景色和文本颜色 */  li a.active {  background-color: #e01222; /* 背景色变为#e01222（红色） */  color: #fff; /* 文本颜色变为白色 */  }</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index"><a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> <script>const app = new Vue({el: "#app",data: {activeIndex: 2,list: [{id: 1, name: '京东秒杀'},{id: 2, name: '每日特价'},{id: 3, name: '品类秒杀'}]}})</script>
</body>
</html>

在这里插入图片描述

v-bind style

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.progress-bar {  width: 100%; /* 进度条的总宽度 */  height: 20px; /* 与内部元素高度一致 */  border-radius: 10px; /* 圆角与内部元素一致 */  background-color: #e0e0e0; /* 外部容器的背景色，通常为灰色或浅色 */  overflow: hidden; /* 确保内部元素超出部分不可见 */  box-sizing: border-box; /* 使得padding和border包含在总宽度内 */  }  .inner {  width: 50%; /* 初始宽度，实际使用时可能通过JavaScript动态设置 */  height: 100%; /* 填满外部容器的高度 */  border-radius: 10px; /* 圆角与外部容器一致 */  text-align: right; /* 如果需要文本对齐，但通常进度条内部不放置文本 */  position: relative; /* 如果需要内部元素定位 */  background-color: #409eff; /* 进度条的颜色 */  background-size:  20px 20px; /* 这行通常用于背景图片，对于纯色背景不需要 */  transition: all 1s; /* 过渡效果（1s应为时间） */  }</style>
</head>
<body><div id="app"><!-- 外层盒子 灰色 --><div class="progress-bar"><!-- 内层盒子 蓝色 --><div class="inner" :style="{ width: percent + '%'}"><span>{{ percent }}%</span></div></div><button @click="percent = 25">25%</button><button @click="percent = 50">50%</button><button @click="percent = 75">75%</button><button @click="percent = 100">100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
</body>
</html>

在这里插入图片描述

1.8 v-model表单元素

常见的单元表格都可以使用v-model进行绑定关联→快速获取或者设置表单元素的值。他会根控件类型自动选取正确的元素类型

使用v-model绑定关联以后可以在data中快速取走上传的数据

常见表单元素：

表单元素	自动关联类型
输入框input:text	value
文本域textarea	value
复选框input:checkbox	checked
单选框input:radio	checked
下拉菜单select	value

radio的name和value（结合v-model使用这两个属性）（原生语法）：

name属性实现给两个选项按钮分组，实现同时只有一个属性被选中
value实现给表单的value属性，用于提交后台的数据，配合name使用
name用于给用户看的是不会向后端传递什么数据的，使用value实现向后端传递数据

性别：<input v-model="gender" type="radio" name="gender" value="1">♂<input v-model="gender" type="radio" name="gender" value="2">♀<br><br>

原生语法：

option需要设置value值提交给后台
select的value值关联了选中的option的value值

在网页元素查找中因为没有显式指定元素，所以当前选中的元素会使用$0作为变量名来展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><div id="app"><h3>简历投递</h3>姓名：<input v-model="username" type="text"><br><br>是否单身：<input v-model="isSingle" type="checkbox"><br><br>性别：<input v-model="gender" type="radio" name="gender" value="1">♂<input v-model="gender" type="radio" name="gender" value="2">♀<br><br>所在城市：<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">北京</option><option value="104">北京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea><button>立即注册</button></div><script>const app = new Vue({el: "#app",data: {username: '',isSingle: false,gender: '1',cityId: '102',desc: ''}})</script>
</body>
</html>

1.9 计算属性

基于现有的数据，计算出来的新属性，依赖的数据变化，就会重新计算（vue是数据驱动的）

语法：

在vue实例中声明computed配置项，一个计算属性对应一个函数
使用起来和普通属性一样使用{{ 计算属性名 }}

computed: {计算属性名 () {基于现有数据逻辑return res}
}

计算属性就是将一段求值代码进行封装，在调用的时候，因为属性名是一个配置项调用不些括号，写括号会出现没有这个函数定义的错误，网页会直接崩溃

计算属性computed和method方法：

computed计算属性：封装一段数据的处理，求得一个结果。语法：
- 写在computed配置项中
- 作为属性，直接使用→this.计算属性{{ 计算属性 }}
method方法：给实例提供一个方法，调用以处理业务逻辑。语法：
- 写在method配置项中
- 作为方法，需要调用→this.方法名() {{ 方法() }} @事件名=“方法名”
计算属性是有缓存的，这种缓存特性会将计算出的结果进行缓存，依赖项变化，会重新计算并在再次缓存
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

计算属性的完整写法：

computed: {计算属性名: {get() {逻辑return res;}set(修改值) {逻辑return res;}}
}

参考文献

黑马程序员：https://www.bilibili.com/video/BV1HV4y1a7n4/
菜鸟教程：https://www.runoob.com/vue2/vue-tutorial.html

学学vue-2

1.7 指令修饰符 keyup.enter：监听键盘回车事件，回车触发事件keyup.enter代码 v-model修饰符： v-model.trim：去首尾空格v-model.number：变数字（如果是数字的话，转变为数字） 事件名.…...

编程日记 2024/9/12 10:15:13

什么是 Grafana？

什么是 Grafana？ Grafana 是一个功能强大的开源平台，用于创建、查看、查询和分析来自多个来源的数据。通过可视化仪表盘（Dashboard），它能够帮助用户监控实时数据、生成历史报告，甚至进行预测分析。Grafana…...

编程日记 2024/9/12 10:13:11

【Prompt Engineering：思维树 (ToT)、检索增强生成 (RAG)、自动推理并使用工具 (ART)】

思维树 (ToT) 对于需要探索或预判战略的复杂任务来说，传统或简单的提示技巧是不够的。最近，Yao et el. (2023)(opens in a new tab) 提出了思维树（Tree of Thoughts，ToT）框架，该框架基于思维链提示进行了总…...

编程日记 2024/9/12 10:12:10

【习题】应用/元服务上架

判断题 1. 一个完整的发布软件包必须包含一个Profile文件。 A、正确(True) B、错误(False) 2. 编译打包的软件包存放在项目目录build > outputs > default下。 A、正确(True) B、错误(False) 单选题 1. 创建应用时，应用包名需要和在DevEco …...

编程日记 2024/9/12 10:11:09

性能测试的复习3-jmeter的断言、参数化、提取器

一、断言、参数化、提取器需求： 提取查天气获取城市名请求的响应结果：城市对查天气获取城市名的响应结果进行响应断言和json断言对查天气获取城市名添加用户参数 1、步骤查看天气获取城市名 json提取器（对响应结果提取、另一个接口请求…...

编程日记 2024/9/12 10:10:07

ORB-SLAM2关键点总结

1.ORB-SLAM2的总体框架是怎样的 ORB-SLAM2一共有三个线程，分别是Tracking、Local Mapping、Loop Closing线程，，其中Tracking负责完成关键点提取，并进行帧间匹配，同时初步选取关键帧；Local Mapping线程主要…...

编程日记 2024/9/12 10:08:02

拱式桥安全结构健康监测解决方案

拱式桥作为一种常见的桥梁结构，其拱形设计不仅美观，还具有较高的承载能力。然而，随着使用年限的增加和环境因素的影响，拱式桥的结构健康和稳定需要持续监测和评估。自动化监测技术的应用，可以提升拱式桥的监测效率和准…...

编程日记 2024/9/12 10:06:00

windows和linux安装mysql5.7.31保姆级教程

一，资源如下，里面有windows和linux版的安装软件，内含Visual C2013中文版windows系统插件 windows资源地址：https://download.csdn.net/download/l1o3v1e4ding/89725150 linux（centos）资源地址：…...

编程日记 2024/9/12 10:00:54

如何使用 PowerShell 脚本来自动化 Windows 开发流程的教程（包括理论介绍和实践示例）

PowerShell 是一种强大的任务自动化和配置管理框架，它为系统管理员和开发人员提供了管理 Windows 操作系统和应用程序的能力。下面是一个关于如何使用 PowerShell 脚本来自动化 Windows 开发流程的教程，包括理论介绍和实践示例。第一部分：理…...

编程日记 2024/9/12 9:59:53

CTFHub技能树-信息泄露-HG泄漏

目录漏洞产生原因解题过程当开发人员使用 Mercurial 进行版本控制，对站点自动部署。如果配置不当,可能会将.hg 文件夹直接部署到线上环境。这就引起了 hg 泄露漏洞。漏洞产生原因 Mercurial(hg)是一种分布式版本控制系统，它与Git类似也可以用于管…...

编程日记 2024/9/12 9:57:51

OpenCV结构分析与形状描述符（18）比较两个轮廓相似度的函数matchShapes()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述比较两个形状。该函数用于比较两个形状。所有三个实现的方法都使用了 Hu 不变矩（参见 HuMoments） 函数原型 double c…...

编程日记 2024/9/12 9:56:50

CCS811二氧化碳传感器详解（STM32）

目录一、介绍二、传感器原理 1.原理图 2.引脚描述 3.工作原理介绍三、程序设计 main.c文件 ccs811.h文件 ccs811.c文件四、实验效果五、资料获取项目分享一、介绍 CCS811模块是一种气体传感器，可以测量环境中TVOC(总挥发性有机物质)浓度和eCO2…...

编程日记 2024/9/12 9:55:49

Navicat 17 新特性 | 聚焦 MongoDB

随着 Navicat 17 的盛大发布，其一系列创新特性赢得了广大用户的热烈反响。它不仅在模型设计上实现了突破性优化，提升了查询与配置的效率，还大幅优化了用户界面的交互体验，原生支持国产平台与操作系统，同时增强 BI 能力…...

编程日记 2024/9/12 9:53:47

openssl的使用

1、编译 Github下载：https://github.com/openssl/openssl 官网下载：https://openssl-library.org/source/index.html 官网历史版本：https://www.openssl.org/source/old/ 1.1 Windows下编译我的文章：OPC UA使用 Openssl库编译…...

编程日记 2024/9/12 9:51:45

ICETEK-DM6437-AICOM—— DMA直接存储器访问设计

#一、设计目的： 1 进一步了解 ICETEK-DM6437-AF 的内部存储器空间的分配及指令寻址方式： 内部存储器空间分配：研究 ICETEK-DM6437-AF 的存储器架构，包括但不限于片内 SRAM、片外 DRAM 和其他存储器模块。了解这些存储器的大小、起…...

编程日记 2024/9/12 9:50:44

【AcWing】快速排序的Go实现

快速排序的Go实现这一部分参考了AcWing当中使用Go语言实现快速排序的题解：https://www.acwing.com/activity/content/code/content/296206/。其中有很多部分非常值得参考，故写一个博客进行记录。 Code package mainimport "fmt"func qui…...

编程日记 2024/9/12 9:49:43

使用C++11的`std::future`和`std::promise`实现异步网络通信

使用C11的std::future和std::promise实现异步网络通信在现代C编程中，异步编程是一个重要的主题。C11引入了std::future和std::promise，为异步编程提供了强大的工具。本文将详细介绍如何使用std::future和std::promise实现异步网络通信，并提…...

编程日记 2024/9/12 9:48:41

【C++登堂入室】类与对象(上)

目录一、面向过程和面向对象初步认识二、类的引入三、类的定义四、类的访问限定符及封装 4.1 访问限定符 4.2 封装五、类的作用域六、类的实例化七、类对象模型 7.1如何计算类对象的大小 7.2 类对象的存储方式猜测 7.3 结构体内存对齐规则八、this指针 …...

编程日记 2024/9/12 9:42:36

【西电电装实习】5. 无人机模块及作用、上位机的操作

文章目录前言一、硬件结构电源、电源电压测试电路晶振外围陀螺仪信号放大电路及天线空心杯（电极）驱动电路软件设置整机装配PID 参数设置公式参考文献前言西电电装实习，无人机原理图、上位机的调节方法一、硬件结构电源、电源电压测试…...

编程日记 2024/9/12 9:40:34

有关WSL和docker的介绍

目录标题如何利用在windows上配置docker实现linux和windows容器修改WSL默认安装（也就是linux子系统）目录到其他盘如何利用在windows上配置docker实现linux和windows容器 wsl的基本命令：参考网页 docker入门到实践：参考网页官方…...

编程日记 2024/9/12 9:38:32

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用，操作系统：Ubuntu24.04，Neofj版本：2025.04.0。 Apt安装 Neofj可以进行官网安装：Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法最新版…...

编程新知 2025/9/14 10:47:03

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增：通道注意力模块（SE模块） class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/9/9 14:48:35

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文？ 多租户隔离：自动为接入设备追加租户前缀，后端按 ClientID 拆分队列。零代码鉴权：将入站用户名替换为 OAuth Access-Token，后端 Broker 统一校验。灰度发布：根据 IP/地理位写…...

编程新知 2025/8/1 10:20:23

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题：CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者：Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/9/12 19:00:19

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/7/9 1:12:03

AspectJ 在 Android 中的完整使用指南

一、环境配置（Gradle 7.0 适配） 1. 项目级 build.gradle // 注意：沪江插件已停更，推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置项目背景高速网络拓扑网络情况分析通信线路收费网络路由收费汇聚交换机相应配置收费汇聚track配置项目背景在实施省内一条高速公路时遇到的需求，本次涉及的主要是收费汇聚交换机的配置，浪潮网络设备在高速项目很少，通…...

编程新知 2025/9/12 11:11:41

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/9/4 2:44:27

C#学习第29天：表达式树（Expression Trees）

目录什么是表达式树？ 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持： 3.性能优化 4.元数据处理 5.代码转换和重写适用场景代码复杂性…...

编程新知 2025/7/21 4:21:36

学学vue-2

1.7 指令修饰符

1.8 v-model表单元素

1.9 计算属性

参考文献

相关文章：

学学vue-2

什么是 Grafana？

【Prompt Engineering：思维树 (ToT)、检索增强生成 (RAG)、自动推理并使用工具 (ART)】

【习题】应用/元服务上架

性能测试的复习3-jmeter的断言、参数化、提取器

ORB-SLAM2关键点总结

拱式桥安全结构健康监测解决方案

windows和linux安装mysql5.7.31保姆级教程

如何使用 PowerShell 脚本来自动化 Windows 开发流程的教程（包括理论介绍和实践示例）

CTFHub技能树-信息泄露-HG泄漏

OpenCV结构分析与形状描述符（18）比较两个轮廓相似度的函数matchShapes()的使用

CCS811二氧化碳传感器详解（STM32）

Navicat 17 新特性 | 聚焦 MongoDB

openssl的使用

ICETEK-DM6437-AICOM—— DMA直接存储器访问设计

【AcWing】快速排序的Go实现

使用C++11的`std::future`和`std::promise`实现异步网络通信

【C++登堂入室】类与对象(上)

【西电电装实习】5. 无人机模块及作用、上位机的操作

有关WSL和docker的介绍

大数据学习栈记——Neo4j的安装与使用

Java如何权衡是使用无序的数组还是有序的数组

DAY 47

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

多模态大语言模型arxiv论文略读（108）

实现弹窗随键盘上移居中

AspectJ 在 Android 中的完整使用指南

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

C#学习第29天：表达式树（Expression Trees）