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

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

news 文章来源：https://blog.csdn.net/weixin_46625488/article/details/131924721 2025/5/9 6:21:01

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

嵌入式一开始该怎么学？学习单片机

学习单片机： 模电数电肯定必须的，玩单片机大概率这两门课都学过，学过微机原理更好。直接看野火的文档，芯片手册，外设手册。学单片机不要纠结于某个型号，我认为stm32就OK，主要是原理和感觉。…...

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

Spring事件监听器ApplicationListener

目录介绍 spirng启动后启动某方法介绍 ApplicationEvent以及Listener是Spring为我们提供的一个事件监听、订阅的实现，内部实现原理是观察者设计模式，设计初衷也是为了系统业务逻辑之间的解耦，提高可扩展性以及可维护性。事件发布者并不需…...

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

安全学习DAY10_HTTP数据包

HTTP数据包文章目录 HTTP数据包小节导图Request请求数据包结构Request请求方法（方式）请求头（Header）Response响应数据包结构Response响应数据包状态码状态码作用：部分状态码详解判断网站文件是否存在的状态码&#xf…...

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

云原生落地实践的25个步骤

一、什么是云原生？ 云原生从字面意思上来看可以分成云和原生两个部分。云是和本地相对的，传统的应用必须跑在本地服务器上，现在流行的应用都跑在云端，云包含了IaaS,、PaaS和SaaS。原生就是土生土长的意思，我们在开始…...

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

Stable diffusion 三大基础脚本提示词矩阵，载入提示词，XYZ图表讲解

目录 0.本章讲解 1.提示词矩阵(prompt matrix) 1.2.提示词矩阵功能选项 1.2.1.把可变部分放在提示词文本的开头 1.2.2.为每张图片使用不同随机种子 1.2.3.选择提示词 1.2.4.选择分割符 1.2.5.宫格图边框（像素） 2.从文本框或文件载入提示词(Pro…...

编程日记 2023/8/2 7:36:40

uniapp uni-combox 下拉提示无匹配项（完美解决--附加源码解决方案及思路）

问题描述匆匆忙忙又到了周一啦，一大早就来了一个头疼的问题，把我难得团团转，呜呜呜~ 下面我用代码的方式展示出来，看下你的代码是否与我的不同。解决方案 <uni-forms-item label"名称" name"drugName&quo…...

编程日记 2023/8/2 7:35:38

10. Mybatis 项目的创建

目录 1. Mybatis 概念 2. 第一个 Mybits 查询 2.1 创建数据库和表 2.2 添加 Mybatis 框架支持 2.3 添加配置文件 2.4 配置 MyBatis 中的 XML 路径 2.5 添加业务代码在学习 Mybatis 之前，我们需要知道 Mybatis 和 Spring 没有任何的关系。如果一定要强调二者…...

编程日记 2023/8/2 7:34:37

历年 Nobel prize in Physics （诺贝尔物理学奖）简介

历年 Fields Medal 与 Nobel prize in Physics 简介 Nobel prize in Physics 1901年12月10日诺贝尔逝世5周年纪念日首次颁发诺贝尔奖。1916年第一次世界大战 1914.7 至 1918.11诺贝尔物理学奖空缺1931年诺贝尔物理学奖空缺1934年诺贝尔物理学奖空缺1940年—1942年第二次世界…...

编程日记 2023/8/2 7:33:35

IDEA中Git面板操作介绍变基、合并、提取、拉取、签出

IDEA中Git面板操作介绍变基、合并、提取、拉取、签出面板介绍变基、合并提取、拉取签出、Checkout 面板介绍如图，在IDEA的Git面板中，仓库会分为本地仓库和远程仓库，代码仓库里面放的是各个分支。分支前面的书签🔖标志…...

编程日记 2023/8/2 7:32:34

Android Studio开发简易APP添加代办事项

创建xml布局页 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width...

编程日记 2023/8/2 7:31:33

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

相关文章：