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

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

news 2026/2/9 11:25:10

前端技术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

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中，时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志，到供应链系统的物流节点时间戳，时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库，其日期时间类型的…...

编程新知 2025/10/16 13:22:06

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议（EPSFD 2025）将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会，EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2026/2/1 21:17:19

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2026/1/15 4:39:38

跨链模式：多链互操作架构与性能扩展方案

跨链模式：多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石一、跨链架构的核心范式演进 1. 分层协议栈：模块化解耦设计现代跨链系统采用分层协议栈实现灵活扩展（H2Cross架构）： 适配层&#xf…...

编程新知 2026/2/5 14:15:13

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...

编程新知 2025/12/23 11:20:24

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口（适配服务端返回 Token） export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

Mac软件卸载指南，简单易懂！

刚和Adobe分手，它却总在Library里给你写"回忆录"？卸载的Final Cut Pro像电子幽灵般阴魂不散？总是会有残留文件，别慌！这份Mac软件卸载指南，将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/2/7 0:48:56

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法（ISWC2024）

笔记整理：刘治强，浙江大学硕士生，研究方向为知识图谱表示学习，大语言模型论文链接：http://arxiv.org/abs/2407.16127 发表会议：ISWC 2024 1. 动机传统的知识图谱补全（KGC）模型通过…...

编程新知 2026/1/31 12:03:23

Psychopy音频的使用

Psychopy音频的使用本文主要解决以下问题： 指定音频引擎与设备；播放音频文件本文所使用的环境： Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2026/1/31 15:09:31

自然语言处理——循环神经网络

自然语言处理——循环神经网络循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM&#xff09…...

编程新知 2026/2/4 11:21:40

前端技术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 监视器

相关文章：