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

前端技术Vue学习笔记--002

news 2026/2/7 12:40:18

前端技术Vue学习笔记

文章目录

前端技术Vue学习笔记
- 1、指令修饰符
- 2、v-bind对于样式控制的增强
- - 2.1、v-bind对于样式控制的增强--class
  - 2.2、v-bind对于样式控制的增强--操作style
- 3、v-model应用于其他表单元素
- 4、计算属性
- - 4.1、**computed计算属性 vs methods方法的区别**
  - 4.2、计算属性的完整写法
  - 4.3、成绩添加案例
- 5、watch 监视器

1、指令修饰符

通过 “.” 指明一些指令后缀，不同后缀封装了不同的处理操作 —>简化代码

按键修饰符

@keyup.enter --> 键盘回车监听

v-model修饰符

v-model.trim --> 去除首尾空格

v-model.number --> 转数字
事件修饰符

@事件名.stop --> 阻止冒泡

@事件名.prevent --> 阻止默认行为

练习代码

<body><div id="app" ><!-- 键盘回击事件绑定处理 --><h3>键盘回击事件绑定处理</h3>用户名:<input type="text" v-model="username" @keyup.enter="fn"/><br/><!-- v-model修饰符   v-model.trim(去除首尾空格)   v-model.number（转数字） --><h3>v-model修饰符</h3>年龄:<input type="text" v-model.number="age" /><br/>英文名：<input type="text" v-model.trim="usName" /><br/><!-- 事件修饰符：@事件名.stop(阻止冒泡)  @事件名.prevent(阻止默认行为)--><h3> 事件修饰符</h3><div class="father" @click="f"><div class="son" @click.prevent="s"></div></div><!--  @click.prevent阻止默认跳转到百度首页--><a href="https:www.baidu.com" @click.prevent>点击跳转到百度</a></div><script>const app = new Vue({el : '#app',data : {username : '',usName : '',age : ''},methods : {fn(e){//e.key === 'Enter' 等价于@keyup.enter// if(e.key === 'Enter'){}console.log("键盘回车事件触发"+this.username)},f(){alert("这是父元素盒子")},s(){alert("这是子元素盒子")} }})</script></body>

2、v-bind对于样式控制的增强

为了方便开发者进行样式控制，Vue拓展了v-bind的语法，可以针对class类名和style行内样式进行控制。

2.1、v-bind对于样式控制的增强–class

语法 :class=“对象/数组”

对象–>建就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类

适用场景：一个类来回切换
数组–>数组中的所有类，都会添加到盒子上，本质就是一个class列表

适用场景：批量添加或删除类

案例练习：京东秒杀tab导航高亮
在这里插入图片描述

<body><!-- 案列：京东秒杀tab导航高亮 gezi是一个样式类--><div id="app" ><h3>v-bind对于样式控制的增强--class</h3><ul><li v-for="(item,index) in list"  @click="activeIndex = index " ><a :class="{gezi : index === activeIndex}" href="#">{{ item.name }}</a></li> </ul><hr></div><script>const app = new Vue({el : '#app',data : {activeIndex : 0,list : [{id : 1,name : '京东秒杀'},{id : 2,name : '京东抢购'}, {id : 3,name : '京东商场'}]},methods : {}})</script></body>

2.2、v-bind对于样式控制的增强–操作style

语法 :style = “样式对象”

适用场景：某个具体属性的动态设置
注意：

当遇到像background-color这样带横杠的属性名必须以驼峰命名或者以引号处理
在{}中是以json的格式写的，所以键值要加引号

模版语法

在这里插入图片描述

案列：进度条实现

<html><head><title> 进度条--style </title><script src="../../vue.js"></script><style>.progress{height: 25px;width: 400px;border-radius: 15px;background-color: black;border: 3px solid black;box-sizing: border-box;margin-bottom: 30px;}.inner{height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: blueviolet;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}</style></head><body><!-- <div class="box" :style="{width : '400px',height : '400px','background-color': 'red' }"> --><!-- <div class="box" :style="{width : '400px',height : '400px',backgroundColor: 'red' }"> --><!-- 案列：京东秒杀tab导航高亮 --><div id="app" ><h3>进度条--style</h3><div class="progress"><div class="inner" :style="{width: count+'%'}"></div><span :style="{ 'padding-left': count + '%' }">{{ count }}%</span></div> <button @click="count--" v-show="count>0">-</button><button  @click="count++" v-show="count<100">+</button></div><script>const app = new Vue({el : '#app',data : {count : 50 //默认为50%},methods : {}})</script></body>
</html>

3、v-model应用于其他表单元素

常见的表单元素都可以用v-model绑定关联 -->快速获取或设置表单元素的值

它会根据控件类型自动选取正确的方法来更新元素

例如：输入框（input:text）、文本域(textarea)、复选框(input:checkbox)、单选框(input:radio)、下拉菜单（select）等等。

案例：注册案例

<body><div id="app"><div :class="['register']"><h3>用户注册信息</h3><!-- 输入框 -->用户名:<input type="text" v-model.trim="username" name="username"/><br><br>是否单身：<input type="checkbox"   v-model="isSingle"/><br><br><!-- 单选框 （前置理解)1.name：给单选框加上name属性，可以分组--- >统一组互相互斥2.value：给单选框加上value属性，用于提交给后台的数据结合Vue使用 --》v-model  -->性别：  <input type="radio" name="sex" value="1"  v-model="sex">男<input type="radio" name="sex" value="0" v-model="sex">女<br><br><!-- 下拉框 （前置理解)1.option 需要设置  value值，提交给后台2.select 的 value值，关联了选中的 option 的 value值结合Vue使用 --》v-model 结合$0.value进行查看-->所在城市：    <select v-model="cityId"><option value="1">白银</option><option value="2">靖远</option><option value="3">会宁</option><option value="4">景泰</option></select><br><br><button>注册</button></div></div><script>const app = new Vue({el : '#app',data : {username : '',sex : 1,isSingle : true,cityId  : 4}})</script></body>

测试结果
在这里插入图片描述

4、计算属性

概念：基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算

语法：

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

计算属性：换言之，就是将一段求值的代码进行封装。

小黑笔城

  <body><div id="app"><h3>计算属性练习</h3> <table class="bordered-table"><tr><td>名称</td><td>数量</td></tr><tr v-for="(item,index) in list">          <td>{{item.name}}</td><td>{{item.num}}</td></tr></table><h3>文件总数：{{totalNum}}</h3></div><script>const app = new Vue({el : '#app',data : {list : [{id : 1,name : '铅笔',num : 10},{id : 2,name : '订书机',num : 20},{id : 2,name : '打印机',num : 2},{id : 2,name : '钢笔',num : 36}]},computed  : {totalNum(){//基于现有数据，编写求值逻辑//计算属性函数内部，可以直接通过 this 访问到 vue 实例//需求：对this.list数组里面的 num 进行求和 --》reducelet total=this.list.reduce((sum,item) => sum +item.num,0)  return total}}})</script></body>

测试结果
在这里插入图片描述

4.1、computed计算属性 vs methods方法的区别

computed计算属性：
- 作用：封装一段对于数据的处理，求得一个结果
- 语法：写在computed 配置项中；作为属性，直接使用–>this.计算属性 {{计算属性名}}
- 缓存特性（提升性能）：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，依赖项变化，会自动重新计算 -->并再次使用缓存
methods方法：
- 作用：给实例提供一个方法，调用以处理业务逻辑
- 语法：写在methods配置项中； 作为方法：需要调用 —>this.方法名() {{方法名（）}} @事件名=“方法名”

使用计算属性（缓存特性）

在这里插入图片描述

使用methods方法中的函数时

在这里插入图片描述

4.2、计算属性的完整写法

计算属性默认的简写，只能读取访问，不能“修改”
如果需要“修改” --> 需要写计算属性的完整写法"

在这里插入图片描述

案例：改名卡的练习

  <body><div id="app"><h3>计算属性的完整写法</h3> 姓：<input type="text"  v-model.trim="xing"/>名：<input type="text"  v-model.trim="ming"/>全名：{{fullName}}<br><br>新名： <input type="text" v-model.trim="newName"><br><br><button @click="modify">改名卡</button></div><script>const app = new Vue({el : '#app',data : {xing : '张',ming : '飞',newName : ''},methods : {modify(){//通过this.计算属性进行修改计算属性的值this.fullName = this.newName}},computed  : {//简写  -->获取，没有配置设置的逻辑// fullName(){//     return this.xing + this.ming//  }//完整写法 --> 获取 + 设置fullName : {// 1. 当fullName计算属性，被获取求值时，执行get（有缓存时，从缓存中获取数据）//    会将返回值作为，求值的结果get(){return this.xing + this.ming},// 2. 当fullName计算属性，被修改赋值时，执行set//    修改的值，传递给set方法的形参set(value){this.xing = value.slice(0,1)this.ming = value.slice(1)}}}})</script></body>

测试结果
在这里插入图片描述

4.3、成绩添加案例

题目要求
在这里插入图片描述

代码完成

<html><head><title>计算属性</title><script src="../../vue.js"></script><style>.bordered-table {border: 1px solid #000; /* 设置表格边框样式 */}.right{float: left;width: 200px;height: 200px;padding-left: 300px;padding-top: 30px;}.left{float: left;width: 260px;height: 400px;}.low60{color : red}</style></head><body><div id="app"><div class="left"><h3>成绩案例</h3> <table class="bordered-table"><tr><td>ID</td><td>名称</td><td>数量</td><td>操作</td></tr><tr v-for="(item,index) in list">          <td>{{index}}</td><td>{{item.name}}</td><td :class="{low60 : item.score < 60}" >{{item.score}}</td>
<!-- 让低于60分的爆红 --><td><a href="https:www.baidu.com" @click.prevent="del(item.id)">删除</a></td></tr></table><h3>总分：{{totalScore}}</h3><h3>平均分：{{averageScore}}</h3></div><div class="right"><h3>新科目</h3>科目: <input type="text" placeholder="请输入科目" v-model.trim="newProject" /><br>分数：<input type="text" placeholder="请输入分数" v-model.number="newScore" /><br><br> <button @click="addProject">添加</button></div></div><script>const app = new Vue({el : '#app',data : {list : [{id : 1,name : '语文',score : 90},{id : 2,name : '数学',score : 40},{id : 3,name : '英语',score : 60},{id : 4,name : '化学',score : 80}],newProject : '',newScore : ''},methods :{del(id){//通过id删除数组的指定元素this.list = this.list.filter(item => item.id !== id);},addProject(){//数组中添加元素    元素值为this.projectInfoif(this.newProject.trim() === ''){alert('添加的内容不能为空')}else if(this.newScore === ''){alert('添加的内容不能为空')}else if(typeof this.newScore !== 'number'){alert("请输入正确的成绩")}else{//向数组添加一个元素this.list.unshift({id  : +new  Date(),name : this.newProject,score : this.newScore})}this.newProject=''this.newScore=''console.log(this.newProject+"      "+this.newScore)}},computed  : {totalScore : {get(){let a = this.list.reduce((sum,item) => sum +item.score,0)// console.log("总分数："+ a)return a},set(value){}},averageScore : {get(){let a = 0if(this.list.length === 0){console.log("11111")return 0}else{a = this.list.reduce((sum,item) => sum +item.score,0) / this.list.length// console.log("平均分"+ a)return a}                      },set(value){}}}})</script></body>
</html>

测试结果

在这里插入图片描述

技术使用

在这里插入图片描述

5、watch 监视器

作用：监视数据变化，执行一些业务逻辑或异步操作。(当数据发生改变时，触发)
语法：

简单写法 --> 简单类型数据，直接监视

在这里插入图片描述

完整写法 --> 添加额外配置项
- deep: true 对复杂类型深度监视（监视的是一个数据对象，而非单个数据）
- immediate：true 初始化立即执行一次handler方法

在这里插入图片描述

统计求和

在这里插入图片描述

前端技术Vue学习笔记--002

前端技术Vue学习笔记文章目录前端技术Vue学习笔记1、指令修饰符2、v-bind对于样式控制的增强2.1、v-bind对于样式控制的增强--class2.2、v-bind对于样式控制的增强--操作style 3、v-model应用于其他表单元素4、计算属性4.1、**computed计算属性 vs methods方法的区别**4.2、计…...

编程日记 2023/8/2 8:01:08

【RabbitMQ（day4）】SpringBoot整合RabbitMQ与MQ应用场景说明

一、SpringBoot 中使用 RabbitMQ 导入对应的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId></dependency>配置配置文件 spring:application:name: rabbitmq-springbo…...

编程日记 2023/8/2 8:00:07

想了解好用的翻译pdf的软件吗？

在全球化的时代背景下，跨国贸易越来越普遍，跨语言沟通也越来越频繁。小黄是一家跨国公司的员工，他梦想能在全球各地拓展自己的业务，奈何遇到了一个巨大的挑战：跨语言沟通。在这其中，pdf文件是他经常接收到的…...

编程日记 2023/8/2 7:59:06

docker安装nginx并配置SSL

1、拉取镜像 docker pull nginx2、启动nginx容器，复制一份默认配置文件出来 // 以nginx镜像为基础镜像创建一个名为nginx01的容器 docker run -d -p 80:80 --name nginx01 nginx创建成功后会看到nginx的欢迎页面 3、挂载nginx目录拷贝nginx的配置信息到主机目录…...

编程日记 2023/8/2 7:58:05

【LeetCode 算法】Reorder List 重排链表

文章目录 Reorder List 重排链表问题描述：分析代码PointerReverseMerge Tag Reorder List 重排链表问题描述： 给定一个单链表 L 的头节点 head ，单链表 L 表示为： L0 → L1 → … → Ln - 1 → Ln 请将其重新排列后变为&#…...

编程日记 2023/8/2 7:57:04

MQ面试题3

1、讲一讲Kafka与RocketMQ中存储设计的异同？ Kafka 中文件的布局是以 Topic/partition ，每一个分区一个物理文件夹，在分区文件级别实现文件顺序写，如果一个Kafka集群中拥有成百上千个主题，每一个主题拥有上百个分区&am…...

编程日记 2023/8/2 7:56:03

【Linux命令200例】patch 用于将补丁文件应用到源码中

🏆作者简介，黑夜开发者，全栈领域新星创作者✌，阿里云社区专家博主，2023年6月csdn上海赛道top4。 🏆本文已收录于专栏：Linux命令大全。 🏆本专栏我们会通过具体的系统的命令讲解加上鲜…...

编程日记 2023/8/2 7:55:02

一起来学算法（邻接矩阵）

前言： 邻接矩阵是数学和计算机科学中常用的一种表示方式，用来表述有向图或无向图，一张图由一组顶点（或结点）和一组表组成，用邻接矩阵就能表示这些顶点间存在的边的关系 1.图的概念对于图而言，…...

编程日记 2023/8/2 7:54:00

hadoop与HDFS交互

一、利用Shell命令与HDFS进行交互在进行HDFS编程实践前，需要首先启动Hadoop。可以执行如下命令启动Hadoop： cd /usr/local/hadoop ./sbin/start-dfs.sh #启动hadoop Hadoop支持很多Shell命令，其中fs是HDFS最常用的命令，利用fs…...

编程日记 2023/8/2 7:53:00

MYSQL 分区如何指定不同存储路径（多块磁盘）

理论可以针对分区表的每个分区指定存储路径，对于innodb存储引擎的表只能指定数据路径，因为数据和索引是存储在一个文件当中，对于MYISAM存储引擎可以分别指定数据文件和索引文件，一般也只有RANGE、LIST分区、sub子分区才有可能需要…...

编程日记 2023/8/2 7:51:59

安全加固服务器

根据以下的内容来加固一台Linux服务器的安全。首先是限制连续密码错误的登录次数，由于RHEL8之后都不再使用pam_tally.so和pam_tally2.so，而是pam_faillock.so 首先进入/usr/lib64/security/中查看有什么模块，确认有pam_faillock.so 因为只…...

编程日记 2023/8/2 7:50:57

Linux 命令学习：

1. PS命令 ps 的aux和-ef区别 1、输出风格不同，展示的格式略有不同两者的输出结果差别不大，但展示风格不同。aux是BSD风格，-ef是System V风格。 2、aux会截断command列，而-ef不会，当结合grep时这种区别会影响到结果 …...

编程日记 2023/8/2 7:49:56

牛客网Verilog刷题——VL54

牛客网Verilog刷题——VL54 题目答案题目实现一个深度为8，位宽为4bit的双端口RAM，数据全部初始化为0000。具有两组端口，分别用于读数据和写数据，读写操作可以同时进行。当读数据指示信号read_en有效时，通过读地址信号…...

编程日记 2023/8/2 7:48:55

学习系统编程No.34【线程同步之信号量】

引言： 北京时间：2023/7/29/16:34，一切尽在不言中，前几天追了几部电视剧，看了几部电影，刷了n个视屏，在前天我们才终于从这快乐的日子里恢复过来，然后看了两节课，也就是上…...

编程日记 2023/8/2 7:47:54

SolidUI社区-Snakemq 通信源码分析

背景随着文本生成图像的语言模型兴起，SolidUI想帮人们快速构建可视化工具，可视化内容包括2D,3D,3D场景，从而快速构三维数据演示场景。SolidUI 是一个创新的项目，旨在将自然语言处理（NLP）与计算机图形学相…...

编程日记 2023/8/2 7:46:53

【大数据之Flume】四、Flume进阶之复制和多路复用、负载均衡和故障转移、聚合案例

1 复制和多路复用 （1）需求：使用 Flume-1 监控文件变动（可以用Exec Source或Taildir Source），Flume-1 将变动内容传递给 Flume-2（用Avro Sink传），（用Avro Sou…...

编程日记 2023/8/2 7:45:51

前端学习--vue2--插槽

写在前面： 这个用法是在使用组件和创建组件中文章目录介绍简单使用多个插槽省写默认/后备内容作用域插槽常用实例Element-ui的el-table 废弃用法slot attributeslot-scope attribute 介绍我们在定义一些组件的时候，由于组件内文字想要自定义&#…...

编程日记 2023/8/2 7:44:50

使用 Docker Compose 部署 Redis Cluster 集群，轻松搭建高可用分布式缓存

Redis Cluster（Redis 集群）是 Redis 分布式解决方案的一部分，它旨在提供高可用性、高性能和横向扩展的功能。Redis Cluster 能够将多个 Redis 节点组合成一个分布式集群，实现数据分片和负载均衡，从而确保在大规模应用场…...

编程日记 2023/8/2 7:43:49

在Spring Boot框架中集成 Spring Security

在Spring Boot框架中集成 Spring Security 目录技术介绍SpringSecurity的核心功能：SpringSecurity特点：具体实现 1、集成依赖2、修改spring security实现service.impl.UserDetailsServiceImpl类代码1具体解释代码2具体解释实现config.SecurityConfi…...

编程日记 2023/8/2 7:42:48

登月再进一步：Apollo自动驾驶的里程碑

前言「作者主页」：雪碧有白泡泡「个人网站」：雪碧的个人网站「推荐专栏」： ★java一站式服务 ★ ★前端炫酷代码分享 ★ ★ uniapp-从构建到提升★ ★ 从0到英雄，vue成神之路★ ★ 解决算法，一个专栏就够了★ ★ 架…...

编程日记 2023/8/2 7:41:47

KubeSphere 容器平台高可用：环境搭建与可视化操作指南

Linux_k8s篇欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南版本号: 1.0,0 作者: 老王要学习日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

编程新知 2026/2/7 7:53:36

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

编程新知 2026/1/18 3:11:35

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）

服务端执行命令请求的过程【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

编程新知 2026/2/2 0:45:02

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学（silicon photonics）的光波导（optical waveguide）芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中，光既是波又是粒子。光子本…...

编程新知 2026/2/7 11:51:32

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer （1）资源论文&a…...

编程新知 2026/1/23 11:58:06

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后，部署量已突破1000次，为支持更多场景，现新增支持图片信息上链，本文对图片上传、下载功能代码进行梳理，包含智能合约、后端、前端部分。一、智能合约修改为了增加图片信息上链溯源，需要对底层数据结构进行修改，在此对智能合约中的农产品数…...

编程新知 2025/9/27 12:03:43

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的固定位置监控相机，因为在使用过程中发现 Airsim 对外部监控相机的描述模糊，而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置，最后在源码示例中找到了，所以感…...

编程新知 2026/2/5 18:58:39

【网络安全】开源系统getshell漏洞挖掘

审计过程： 在入口文件admin/index.php中： 用户可以通过m,c,a等参数控制加载的文件和方法，在app/system/entrance.php中存在重点代码： 当M_TYPE system并且M_MODULE include时，会设置常量PATH_OWN_FILE为PATH_APP.M_T…...

编程新知 2026/1/31 2:59:25

深入理解Optional：处理空指针异常

1. 使用Optional处理可能为空的集合在Java开发中，集合判空是一个常见但容易出错的场景。传统方式虽然可行，但存在一些潜在问题： // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

编程新知 2025/12/19 19:15:39

Python训练营-Day26-函数专题1：函数定义与参数

题目1：计算圆的面积任务： 编写一个名为 calculate_circle_area 的函数，该函数接收圆的半径 radius 作为参数，并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求：函数接收一个位置参数 radi…...

编程新知 2026/1/31 0:07:38

前端技术Vue学习笔记

文章目录

1、指令修饰符

2、v-bind对于样式控制的增强

2.1、v-bind对于样式控制的增强–class

2.2、v-bind对于样式控制的增强–操作style

3、v-model应用于其他表单元素

4、计算属性

4.1、computed计算属性 vs methods方法的区别

4.2、计算属性的完整写法

4.3、成绩添加案例

5、watch 监视器

相关文章：