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

学学vue-2

news 文章来源：https://blog.csdn.net/m0_51765675/article/details/142163429 2025/5/11 1:56:41

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:textvalue
文本域textareavalue
复选框input:checkboxchecked
单选框input:radiochecked
下拉菜单selectvalue

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&#xff1a;监听键盘回车事件&#xff0c;回车触发事件keyup.enter代码 v-model修饰符&#xff1a; v-model.trim&#xff1a;去首尾空格v-model.number&#xff1a;变数字&#xff08;如果是数字的话&#xff0c;转变为数字&#xff09; 事件名.…...

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

什么是 Grafana？

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

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

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

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

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

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

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

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

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

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

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

ORB-SLAM2关键点总结

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

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

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

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

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

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

一&#xff0c;资源如下&#xff0c;里面有windows和linux版的安装软件&#xff0c;内含Visual C2013中文版windows系统插件 windows资源地址&#xff1a;https://download.csdn.net/download/l1o3v1e4ding/89725150 linux&#xff08;centos&#xff09;资源地址&#xff1a;…...

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

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

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

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

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

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

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

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

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

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

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

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

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

Navicat 17 新特性 | 聚焦 MongoDB

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

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

openssl的使用

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

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

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

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

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

【AcWing】快速排序的Go实现

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

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

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

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

编程日记 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. 无人机模块及作用、上位机的操作

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

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

有关WSL和docker的介绍

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

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

以太坊入门

1. 以太坊简介 Vitalik Buterin 在 2013 年 11 月提出了以太坊的概念&#xff0c;其关键思想是&#xff1a;开发一种图灵完备&#xff08;Turing-Complete) 的语言&#xff0c;以允许开发用于区块链和去中心化应用的任意程序&#xff08;智能合约&#xff09;。该概念与比特比相…...

编程日记 2024/9/12 9:35:29

秃姐学AI系列之：实战Kaggle比赛：狗的品种识别（ImageNet Dogs）

目录 前置准备 整理数据集 图片增广 读取数据集 微调预训练模型 训练函数 训练和验证模型 Kaggle提交结果 前置准备 常规导包 import os import torch import torchvision from torch import nn from d2l import torch as d2l 使用小规模数据样本 d2l.DATA_HUB[dog…...

编程日记 2024/9/12 9:30:23

图神经网络介绍3

1. 图同构网络&#xff1a;Weisfeiler-Lehman 测试与图神经网络的表达力 本节介绍一个关于图神经网络表达力的经典工作&#xff0c;以及随之产生的另一个重要的模型——图同构网络。图同构问题指的是验证两个图在拓扑结构上是否相同。Weisfeiler-Lehman 测试是一种有效的检验两…...

编程日记 2024/9/12 9:26:19

浅谈 React Fiber

想象一下&#xff0c;你正在搭建一个乐高积木城堡。 传统的搭建方式&#xff1a;一次性把所有积木拼好&#xff0c;如果中途发现某个地方拼错了&#xff0c;就需要拆掉重新拼。这个过程就像 React 15 之前的版本&#xff0c;一旦开始渲染&#xff0c;就很难中断&#xff0c;效…...

编程日记 2024/9/12 9:25:18

Winform实现石头剪刀布小游戏

1、电脑玩家类 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace RockScissorsClothApp {public class Computer{public Card Play(){Random random new Random();int num random.Next(0, 3…...

编程日记 2024/9/12 9:24:17

计算机的错误计算（九十）

摘要 计算机的错误计算&#xff08;八十九&#xff09;探讨了反双曲余切函数 acoth(x)在 附近的计算精度问题。本节讨论绝对值为大数的反双曲余切函数值的计算精度问题。 Acoth(x) 函数的定义为&#xff1a; 其中 x 的绝对值大于 1 . 例1. 计算 acoth(1.000000000002e15) .…...

编程日记 2024/9/12 9:22:16

对游戏语音软件Oopz遭遇DDoS攻击后的一些建议

由于武汉天气太热&#xff0c;因此周末两天就没怎么出门。一直在家打《黑神话&#xff1a;悟空》&#xff0c;结果卡在广智这里一直打不过去&#xff0c;本来想找好友一起讨论下该怎么过&#xff0c;但又没有好的游戏语音软件。于是在网上搜索了一些信息&#xff0c;并偶然间发…...

编程日记 2024/9/12 9:21:14

解锁Android开发利器：MVVM架构_android的mvvm

// 从网络或其他数据源获取天气数据return Weather(city, "25C") }} 2.定义View&#xff1a;class WeatherActivity : AppCompatActivity() { private lateinit var viewModel: WeatherViewModel override fun onCreate(savedInstanceState: Bundle?) {super.onCre…...

编程日记 2024/9/12 9:20:13

llama.cpp demo

git clone https://github.com/ggerganov/llama.cpp cd llama.cpp 修改Makefile使能mfma参数 MK_CFLAGS -mfma -mf16c -mavx MK_CXXFLAGS -mfma -mf16c -mavx 安装python3依赖 cat ./requirements/requirements-convert_legacy_llama.txt numpy~1.26.4 sentencepie…...

编程日记 2024/9/12 9:18:09

OpenCV结构分析与形状描述符（19）查找二维点集的最小面积外接旋转矩形函数minAreaRect()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 找到一个包围输入的二维点集的最小面积旋转矩形。 该函数计算并返回指定点集的最小面积边界矩形&#xff08;可能是旋转的&#xff09;。开发者…...

编程日记 2024/9/12 9:17:08