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

Vue [Day2]

news 2026/4/18 22:19:27

指令修饰符

在这里插入图片描述

v-model.trim

v-model.number

@事件名.stop @click.stop

@事件名.prevent

@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>
<script src="../vue.js"></script><style>#app {margin: 50px 50px;}* {box-sizing: border-box;margin: 0;padding: 0;list-style: none;}.head {width: 243px;/* background-color: #584949; */}input {height: 30px;vertical-align: middle;}.head button {height: 30px;}.body li {width: 234px;height: 50px;display: flex;line-height: 50px;/* justify-content: space-between; */background-color: #de8282;border-bottom: black solid 2px;}.body li .content {flex: 1;}.body li button {height: 50%;align-self: center;display: none;}.body li:hover button {display: block;width: 20px;}.footer {width: 234px;display: flex;justify-content: space-between;}
</style><body><!-- 需求：6.优化：除了点击按钮添加事项，在输入框回车，也可以完成添加--><div id="app"><h1>小黑记事本</h1><div class="head"><!-- 按键（回车）按下，出发add事件，和button的事件一样 --><input @keyup.enter="add" v-model="todoName" type="text" placeholder="请输入待办事项"><button @click="add">添加任务</button></div><section class="body"><ul><li v-for="(item,index) in todoList" :key="item.id"><span>{{index+1}}</span><span class="content">{{item.name}}</span><button @click="del(item.id)">×</button></li></ul></section><div v-show="todoList.length>0" class="footer"><span>合计：<strong>{{todoList.length}}</strong></span><button @click="clear()">清空任务</button></div></div>
</body>
<script>const app = new Vue({el: '#app',data: {todoName: '',todoList: [{ id: 1, name: '吃水果' },{ id: 2, name: '喝酸奶' }]},methods: {del(tt) {this.todoList = this.todoList.filter(item => item.id != tt)},add() {if (this.todoName.trim() == '') {alert('请输入内容')return}this.todoList.unshift({id: +new Date(),name: this.todoName})this.todoName = ''},clear() {this.todoList = []}}})
</script></html>

v-bind基础（回顾Day1

在这里插入图片描述

v-bind进阶

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>Document</title>
</head>
<script src="../vue.js"></script>
<style>.box {width: 100px;height: 100px;border: 2px solid black;}.pink {background-color: pink;}.big {width: 300px;height: 300px;}
</style><body><div id="app"><div class="box" :class="{pink:true,big:true}">Hello</div><div class="box" :class="['pink','big']">Hello</div></div>
</body>
<script>const app = new Vue({el: '#app',data: {},method: {}})
</script></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>
</head>
<script src="../vue.js"></script>
<link rel="stylesheet" href="../base.css">
<style>ul {display: flex;border-bottom: rgb(245, 12, 12) 2px solid;}li a {display: block;width: 70px;height: 30px;line-height: 30px;text-align: center;}.mouseover_active {background-color: rgba(247, 101, 101, 0.874);}.active {background-color: red;}
</style><body><div id="app"><ul><!--                                              @mouseover --><li v-for="(item , index) in list" :key="item.id" @mouseover="activeIndex2=index"@click="activeIndex1=index"><a :class="{mouseover_active:index==activeIndex2,active:index==activeIndex1 }"href="#">{{item.name}}</a></li></ul></div>
</body>
<script>const app = new Vue({el: '#app',data: {activeIndex2: 0,activeIndex1: 0,list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' },]},method: {}})
</script></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>
</head>
<script src="../vue.js"></script>
<link rel="stylesheet" href="../base.css">
<style>#app {margin: 10px;}.progress {width: 300px;height: 40px;margin-bottom: 40px;background-color: #cdf92c;border-radius: 25px;padding: 5px;}.inner {background-color: #0df6c7;border-radius: 25px;height: 30px;/* width: 20%; */}.low {background-color: #92ee61;}.high {background-color: rgb(141, 179, 216);}.over {background-color: rgb(0, 128, 255);}.inner span {width: 100%;text-align: right;display: block;line-height: 90px;}
</style><body><div id="app"><div class="progress"><!-- 在这里面num  不用加{{}}    并且{}里面 是js对象  ，所以要遵守驼峰命名法 也就是 background-color 要变成 backgroundColor--><div class="inner" :class="{low:num<50,high:num>70,over:num==100}" :style="{width:num+'%'}"><span>{{num}}%</span></div></div><button @click="num=25">设置25%</button><button @click="num=50">设置50%</button><button @click="num=75">设置75%</button><button @click="num=100">设置100%</button></div>
</body>
<script>const app = new Vue({el: '#app',data: {num: 10},method: {}})
</script></html>

Vue [Day2]

指令修饰符 v-model.trim v-model.number 事件名.stop click.stop 事件名.prevent keyup.enter <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-w…...

编程日记 2023/8/4 3:04:09

【前端｜Javascript第1篇】一文搞懂Javascript的基本语法

欢迎来到JavaScript的奇妙世界！作为前端开发的基石，JavaScript为网页增色不少，赋予了静态页面活力与交互性。如果你是一名前端小白，对编程一无所知，或者只是听说过JavaScript却从未涉足过，那么你来对了地方…...

编程日记 2023/8/4 3:03:07

【Linux命令200例】cp用于复制文件和目录（常用）

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

编程日记 2023/8/4 3:02:05

C高级_第二讲_shell指令和shell脚本_递归练习

思维导图递归实现，输入一个数，输出这个数的每一位 int funh(int num){if(0 num){return 0;}else{funh(num/10);printf("%d\n", num%10);} }int main(int argc, const char *argv[]) {puts("请输入一个数");int num 0;scanf(&quo…...

编程日记 2023/8/4 3:01:04

静态路由综合实验

实验拓扑如下： 实验要求如下： 【1】R6为isp，接口IP地址均为公有地址;该设备只能配置IP地址，之后不能再对其进行任何配置【2】R1~R5为局域网，私有IP地址192.168.1.0/24，请合理分配【3】所有路由器上环回…...

编程日记 2023/8/4 3:00:03

Spring核心IOC控制反转思想-----Spring框架

import org.junit.Test;public class TestPublic {Testpublic void Test(){//控制反转是一种思想,是为了提高程序扩展力降低耦合度,达到DIP(Dependency Inversion Principle依赖倒置)原则//其核心是将对象的创建权交出去,由第三方容器负责管理,将对象和对象之间的维护权交出去,…...

编程日记 2023/8/4 2:58:00

中小企业如何做好MES管理系统实施建设

中小企业在生产制造领域面临着诸多挑战，包括提升产品竞争力、规范生产制造等。为了应对这些挑战，越来越多的中小企业开始实施MES生产管理系统。然而，由于企业规模小、资源实力不足等原因，很多企业在实施MES管理系统时存在一定的困…...

编程日记 2023/8/4 2:56:58

java环境搭建 Ubuntu Linux

jdk的安装和配置环境变量使用apt sudo apt install default-jdk若是安装成功了在终端输入java -version来查看是否安装成功使用官网下载的jdk包直接在百度上搜索jdk，选择图片这个网址:jdk下载网址若是arm就选择带有arm的，反之选择x64的&#…...

编程日记 2023/8/4 2:55:57

微信小程序使用mp-html遇到的问题并解决

1、在本地配置寻找勾选使用npm 查了之后发现2023了不需要勾选了默认使用npm 2、在微信小程序编辑器左上角的工具-->构建npm 然后就报错了于是搜索到以下的内容： 没有找到可以构建的NPM包，请确认需要参与构建的npm都在 miniprogramRoot 目录内 -…...

编程日记 2023/8/4 2:54:56

【VTK】基于读取出来的 STL 模型，当用户点击鼠标左键时，程序将获取点击位置的点，显示其坐标，并设置它为模型的旋转原点

知识不是单独的，一定是成体系的。更多我的个人总结和相关经验可查阅这个专栏：Visual Studio。文章目录 class PointPickedSignal : public QObjectclass MouseInteractorCommand : public vtkCommandvoid A::on_pushButtonSelected_clicked()void A::on…...

编程日记 2023/8/4 2:53:55

【第一阶段】kotlin的when表达式

1.Java 的if /when是语句 kotlin的if/when是表达式，表达式是有返回值的 java中void是个关键字，Unit在kotlin中是个类 2.当使用when语句的时候必须有一个不满足的值即else: fun main() {var week:Int5val info when(week){1->"今天是星期一"…...

编程日记 2023/8/4 2:52:52

C#中Convert.ToInt32() 和 int.Parse()的区别

都是用于将字符串转换为整数类型（int）的方法，但它们在处理转换过程中有一些区别： 1. 错误处理方式不同： - Convert.ToInt32()：如果字符串无法成功转换为整数类型，Convert.ToInt32()…...

编程日记 2023/8/4 2:51:50

安全学习DAY14_JS信息打点

信息打点——前端JS框架文章目录信息打点——前端JS框架小节概述-思维导图JS安全概述什么是JS渗透测试？前后端差异JS安全问题流行的Js框架如何判定JS开发应用？ 测试方法（JS文件的获取以及分析方法1、手工搜索分析2、半自动Burp分析插件介绍…...

编程日记 2023/8/4 2:50:49

windows下配置vue开发环境

安装nodejs，配置npm 1.下载安装包：下载地址：https://nodejs.org/en/download 2.安装node：下载完成后进行安装，记住安装的文件夹。本人安装路径为 D:\Program Files\nodejs 3.配置环境变量： ①安装完成后…...

编程日记 2023/8/4 2:49:47

AndroidTV 获取焦点View放大效果实现方式

需求电视开发最常见的就是view获焦后要有放大效果，让用户明显看到。这里总结两个实现方法，以后遇到其他的再补充。方式一：ViewCompat.animate(view) 1、注册焦点变化监听 mBtnFocus1.setOnFocusChangeListener(this);2、有焦点变化的时…...

编程日记 2023/8/4 2:48:45

访问者模式——操作复杂对象结构

1、简介 1.1、概述访问者模式是一种较为复杂的行为型设计模式，它包含访问者和被访问元素两个主要组成部分。这些被访问的元素通常具有不同的类型，且不同的访问者可以对它们进行不同的访问操作。访问者模式使得用户可以在不修改现有系统的情况下扩展系…...

编程日记 2023/8/4 2:47:44

指针经典笔试题强训（附图详解）

目录笔试题1： 解析： 运行结果： 笔试题2 解析： 运行结果： 笔试题3 解析： 运行结果： 笔试题4 解析： 运行结果： 笔试题5 解析： 运行结果：…...

编程日记 2023/8/4 2:46:41

Python：列表(list)与元组(tuple)

列表与元组列表：list元组：tuple 比较直观的区分：列表是中括号"[ ]“，元组是小括号”( )"元组可以看成列表的只读形式 # 列表 list1 [hello, world] list2 [1, 2, 3, 4, 5] list3 ["a", "b", &…...

编程日记 2023/8/4 2:45:39

常见的相似性度量方法

有如下几种计算相似性方法： 点积相似度 X ⋅ Y ∣ X ∣ ∣ Y ∣ c o s θ ∑ i 1 n x i ∗ y i \begin{aligned} X \cdot Y & |X||Y|cos\theta \\ & \sum_{i1}^n x_i * y_i \end{aligned} X⋅Y∣X∣∣Y∣cosθi1∑nxi∗yi 向量内积的结果是没…...

编程日记 2023/8/4 2:44:38

Day06-JS高级编程

Day01-JS高级编程一变量和常量 1 概念在程序中,变量是值可以改变的量,常量是值不可以改变的量在ES6以前变量的创建使用var关键字 (可以创建多个同名变量) 从ES6开始变量的创建推荐使用let关键字 (不可以创建多个同名变量) 从ES6开始常量的创建使用const关键 (不可以创建…...

编程日记 2023/8/4 2:43:37

别再等上线报错！构建零信任兼容性门禁：1小时接入、3分钟反馈、支持17种语言版本矩阵校验

第一章：智能代码生成代码兼容性检查 2026奇点智能技术大会(https://ml-summit.org) 智能代码生成工具（如Copilot、CodeWhisperer、Tabnine）在提升开发效率的同时，常因上下文理解偏差或训练数据时效滞后，产出与目标运…...

编程新知 2026/4/18 20:50:10

用TLE5012磁编码器DIY一个高精度旋转测量模块：硬件连接与Arduino测试

用TLE5012磁编码器打造高精度旋转测量模块：从硬件连接到Arduino实战磁编码器在工业自动化、机器人关节控制和DIY项目中扮演着关键角色，而英飞凌的TLE5012以其高精度和SPI接口的便利性成为创客们的热门选择。本文将带你从零开始，用Arduino和T…...

编程新知 2026/4/18 19:55:13

数据并行训练深度解析：为什么梯度要取平均？

数据并行训练深度解析：为什么梯度要取平均？ 一、引言在大模型训练时代，单张GPU已经无法满足训练需求。数据并行（Data Parallelism）是最常用、最直观的分布式训练策略。但很多初学者会有一个疑问：梯度同步时…...

编程新知 2026/4/18 18:33:57

Bootstrap5 进度条

Bootstrap5 进度条随着互联网技术的不断发展，前端开发工具和框架也在不断更新迭代。Bootstrap 作为全球最受欢迎的前端框架之一，其版本更新也备受关注。Bootstrap5 作为最新版本，在保持原有优势的基础上，也带来了一些新的功能和改进。本文将详细介绍 Bootstrap5 中进度条…...

编程新知 2026/4/18 14:23:05

Adobe-GenP 3.0完整指南：专业级Adobe全家桶激活解决方案

Adobe-GenP 3.0完整指南：专业级Adobe全家桶激活解决方案【免费下载链接】Adobe-GenP Adobe CC 2019/2020/2021/2022/2023 GenP Universal Patch 3.0 项目地址: https://gitcode.com/gh_mirrors/ad/Adobe-GenP Adobe-GenP 3.0是一款针对Adobe Creative Cloud…...

编程新知 2026/4/18 11:42:47