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

三个小时学完vue3 —— 简单案例（二）

news 来源：原创 2025/9/13 0:00:15

三个小时学完vue3（二）

图片轮播案例

<!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>{{ number }}</h3><img :src=`./imgs/${number}.jpg` style="width: 300px;"> <hr><button @click="prev">上一张</button><button @click="next">下一张</button><hr><ul><li v-for="value in 3"><a href="#" @click="jump(value)">{{ value }}</a></li></ul></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const number = ref(1)const prev = () => {number.value--if (number.value == 0) {number.value = 3} }const next = () => {number.value++if (number.value == 4) {number.value = 1}}// 跳转const jump = (value) => {number.value = value}return {number,next,prev,jump}}}).mount("#app")</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>
</head>
<body><div id="app"><input type="text" v-model="data.content"><button @click="add">添加</button><ul><li v-for="(value, index) in data.list">{{ value }}:<button @click="del(index)">删除</button></li></ul><!-- 记事本长度 -->{{ data.list.length }}<!-- 清空记事本 --><button @click="clear">清空</button></div><script type="module">import { createApp, reactive } from "./vue.esm-browser.js"createApp({setup() {const data = reactive({content: 'www.zz.com',list: ['zz学习', 'zz.cm']})const add = () => {data.list.push(data.content)console.log(data.list)}const del = (index) => {data.list.splice(index, 1)}const clear = (index) => {data.list = []}return {data,add,del,clear}}}).mount("#app")</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>table {width: 600px;color: #8f8e8e;text-align: center;border-collapse: collapse;}table thead {background: #F5F5F5;}table tr {height: 30px;line-height: 30px;border: 1px solid #ececec;}</style>
</head>
<body><div id="app"><table><thead><tr><td><input type="checkbox" v-model="data.selected" @change="selectAll"></td><td>商品</td><td>单价</td><td>库存</td><td colspan="2">操作</td></tr></thead><tbody><tr v-for="(value, index) in data.list"><!-- :value是当前对象数据，取消勾选就会从v-model绑定的数组中剔除 --><td><inputtype="checkbox":value="value"v-model="data.checkboxList"@change="checkSelect"></td><td>{{ value.name }}</td><td>{{ value.price }}</td><td>{{ value.stock }}</td><td><button @click="sub(value)">-</button>{{ value.number }}<button @click="add(value)">+</button></td><td><button @click="del(index, value.id)">删除</button></td></tr></tbody><tfoot><tr><td>总价: {{ totalPrice() }}</td></tr></tfoot></table></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({// 为true是全选；false为取消全选selected: false,// 存储选中的商品checkboxList: [],list: [{id: 1,name: '铅笔',price: 10,number: 1,stock: 3},{id: 2,name: '橡皮',price: 5,number: 2,stock: 5},{id: 3,name: '钢笔',price: 50,number: 1,stock: 6},]})const selectAll = () => {console.log(data.selected)if (data.selected) {data.checkboxList = data.list}else {data.checkboxList = []}console.log(data.checkboxList)}const checkSelect = () => {if (data.checkboxList.length == data.list.length && data.list.length != 0) {data.selected = true} else {data.selected = false}}// 总价格const totalPrice = () => {let total = 0for(let i = 0; i < data.checkboxList.length; i++) {total += data.checkboxList[i].price * data.checkboxList[i].number}return total}const sub = (value) => {value.number--if(value.number <= 1) {value.number = 1}}const add = (value) => {value.number++if(value.number >= value.stock) {value.number = value.stock}}const del = (index, id) => {data.list.splice(index, 1)let newArr = data.checkboxList.filter((value, index) => {// 要删除的被过滤掉了return value.id != id})data.checkboxList = newArr// 需要再次查看选中状态checkSelect()}return {data,selectAll,checkSelect,totalPrice,sub, add,del}}}).mount("#app")</script>
</body>
</html>

购物车优化案例

使用watch、computed进行优化。

<!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>table {width: 600px;color: #8f8e8e;text-align: center;border-collapse: collapse;}table thead {background: #F5F5F5;}table tr {height: 30px;line-height: 30px;border: 1px solid #ececec;}</style>
</head>
<body><div id="app"><table><thead><tr><td><input type="checkbox" v-model="data.selected"></td><td>商品</td><td>单价</td><td>库存</td><td colspan="2">操作</td></tr></thead><tbody><tr v-for="(value, index) in data.list"><!-- :value是当前对象数据，取消勾选就会从v-model绑定的数组中剔除 --><td><inputtype="checkbox":value="value"v-model="data.checkboxList"></td><td>{{ value.name }}</td><td>{{ value.price }}</td><td>{{ value.stock }}</td><td><button @click="sub(value)">-</button>{{ value.number }}<button @click="add(value)">+</button></td><td><button @click="del(index, value.id)">删除</button></td></tr></tbody><tfoot><tr><td>总价: {{ totalPrice }}</td></tr></tfoot></table></div><script type="module">import { createApp, reactive, watch, computed } from './vue.esm-browser.js'createApp({setup() {const data = reactive({// 为true是全选；false为取消全选selected: false,// 存储选中的商品checkboxList: [],list: [{id: 1,name: '铅笔',price: 10,number: 1,stock: 3},{id: 2,name: '橡皮',price: 5,number: 2,stock: 5},{id: 3,name: '钢笔',price: 50,number: 1,stock: 6},]})const sub = (value) => {value.number--if(value.number <= 1) {value.number = 1}}const add = (value) => {value.number++if(value.number >= value.stock) {value.number = value.stock}}const del = (index, id) => {data.list.splice(index, 1)let newArr = data.checkboxList.filter((value, index) => {// 要删除的被过滤掉了return value.id != id})data.checkboxList = newArr}let flag = truewatch(() => data.selected, (newValue, oldValue) => {// console.log("newValue:", newValue, "oldValue: ", oldValue)if (newValue) {data.checkboxList = data.list} else {if (flag) {data.checkboxList = []}}})watch(() => data.checkboxList, (newValue, oldValue) => {// console.log("newValue:", newValue, "oldValue: ", oldValue)if (newValue.length == data.list.length && data.list.length != 0) {data.selected = trueflag = true} else {data.selected = falseflag = false}})// 总价格const totalPrice = computed(() => {/**reduce定义:用干对数组中的所有元素进行迭代操作，并将每次操作的结果累加到一个初始值上reduce接收两个参数:一个是累加器函数，另一个是初始值reduce:将 data.checkboxList 数组中的每个 checkbox 对象的 price 和 number 属性进行相乘,并将结果累加到初始值 0 上，最后返回累加的结果tota1(累加器)用干存储每次计算的结果，初始值为0item(当前元素)在每次迭代过程中，当前元素的值会被传递给回调函数*/return data.checkboxList.reduce((total, item) => total + item.price * item.number, 0)})return {data,totalPrice,sub, add,del}}}).mount("#app")</script>
</body>
</html>

使用Axios实现文章搜索案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="axios.min.js"></script>
</head>
<body><div id="app"><select v-model="data.type"><option value="0">请选择</option><option value="1">ID</option><option value="2">标题</option></select><input type="text" v-model="data.content"><button @click="search">搜索</button><br><ul><li v-for="(item, index) in data.list">{{ item }}</li></ul></div><script type="module">import {createApp, reactive} from './vue.esm-browser.js'createApp({setup() {const data = reactive({type: '0', // 搜索类型content: "", // 搜索内容list: []})// 搜索const search = () => {data.list = []console.log("搜索类型：", data.type, "搜索内容：", data.content)if (data.type == '1') {let id = data.content// get请求axios.get(`http://127.0.0.1/article/get/id/${id}`).then(response => {console.log('get.data', response.data)if (response.data.status == "success") {if (response.data.data) {data.list.push(response.data.data)}}}).catch(error => {console.log("get.error", error)}).finally(() => {console.log('get.finally')})} else if (data.type == '2') {let param = {title: data.content}// post请求axios.post(`http://127.0.0.1/article/postJson/search`, param).then(response => {console.log('get.data', response.data)if (response.data.status == "success") {for(let i = 0; i < response.data.data.length; i++) {data.list.push(response.data.data[i])// push: 向数组末尾添加一个或多个元素}}}).catch(error => {console.log("get.error", error)}).finally(() => {console.log('get.finally')})}}return {data,search}}}).mount("#app")</script>
</body>
</html>

up主讲的太好啦！多练多练！！

三个小时学完vue3 —— 简单案例（二）

三个小时学完vue3（二） 图片轮播案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2025/9/13 0:00:15

筑牢安全防线：工商业场所燃气泄漏防护新方案

燃气安全是企业经营不可逾越的生命线。在餐饮后厨、化工车间、酒店锅炉房等场所，可燃气体一旦泄漏，极易引发严重事故。如何实现精准监测、快速响应，成为工业及商业领域安全管理的核心诉求。旭华智能深耕安全监测领域，推出的工业及…...

编程日记 2025/9/12 23:05:57

git上传仓库操作

在 Visual Studio Code (VSCode) 中，手动将本地仓库与远程仓库关联起来是一个常见的需求。以下是详细的操作步骤和解释： 前提条件已安装 Git：确保你的系统中已经安装了 Git，并且可以通过命令行运行 git 命令。已初始化本地仓库&…...

编程日记 2025/9/12 23:58:36

广义线性模型下的数据分析（R语言）

一、实验目的： 通过上机试验，掌握利用R实现线性回归分析、逻辑回归、列联分析及方差分析，并能对分析结果进行解读。数据： 链接: https://pan.baidu.com/s/1JqZ_KbZJEk-pqSUWKwOFEw 提取码: hxts 二、实验内容： 1、2…...

编程日记 2025/9/11 20:55:27

1.找钱问题本题的贪心策略在于我们希望就可能的保留作用大的5元 class Solution { public:bool lemonadeChange(vector<int>& bills) {std::map<int ,int> _map;for(auto ch:bills){if(ch 5) _map[ch];else if(ch 10){if(_map[5] 0) return false;else{_m…...

编程日记 2025/9/12 21:09:12

爱普生汽车用显示控制器IC：ScalerIC,汽车接口IC,相机接口IC

爱普生汽车显示控制器IC，汽车显示控制器芯片可以分为三类：爱普生显示控制芯片Scaler IC ，爱普生汽车接口IC，爱普生相机接口IC。下面就给大家分别介绍下这三类芯片的具体型号的特征及用途。爱普生显示控制芯片 Scaler IC Scaler…...

编程日记 2025/9/12 23:55:54

深度学习基础--ResNet50V2网络的讲解，ResNet50V2的复现(pytorch)以及用复现的ResNet50做鸟类图像分类

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊前言如果说最经典的神经网络，ResNet肯定是一个，从ResNet发布后，作者又进行修改，命名为ResNe50v2&#xff0c…...

编程日记 2025/9/11 6:40:05

物理竞赛中的线性代数

线性代数 1 行列式 1.1 n n n 阶行列式定义 1.1.1：称以下的式子为一个 n n n 阶行列式： ∣ A ∣ ∣ a 11 a 12 ⋯ a 1 n a 21 a 22 ⋯ a 2 n ⋮ ⋮ ⋱ ⋮ a n 1 a n 2 ⋯ a n n ∣ \begin{vmatrix}\mathbf A\end{vmatrix} \begin{vmatrix} a_{11…...

编程日记 2025/9/12 0:29:44

OptiTrack光学跟踪系统：引领工厂机器人应用的革新浪潮

在现代化的工厂生产线上，一台机械臂正以惊人的毫米级精度执行着精密零件的装配任务。这一精准操作的背后，是OptiTrack光学跟踪系统的实时捕捉与优化，它正助力生产效率与产品质量迈向新的高度。如今，这一技术正在全球范围内广泛应用…...

编程日记 2025/9/12 23:58:36

Coze/Dify/Ollama在玩ai时候的用途

Coze、Dify 和 Ollama 是三种不同的工具或平台，它们各自有不同的定位和用途。以下是对它们的区别、优缺点以及部署和使用方式的详细分析。 1. Coze 简介 Coze 是一个专注于构建基于大语言模型（LLM）的应用程序的开发平台。它类似于 Dify&…...

编程日记 2025/9/10 18:42:25

使用Docker Compose部署 MySQL8

MySQL 8 是一个功能强大的关系型数据库管理系统，而 Docker 则是一个流行的容器化平台。结合使用它们可以极大地简化 MySQL 8 的部署过程，并且确保开发环境和生产环境的一致性。安装 Docker 和 Docker Compose 首先，确保你的机器上已经安装了 Docker 和 Docker Compose。 …...

编程日记 2025/9/12 23:53:47

Golang快速上手02/Golang基础

4.控制语句 4.1条件控制语句 4.1.1if-elseif-else 与clang不同，if不需要加() if <condition1> {<block1> } else if <condition2> {<block2> } else {<block0> }示例 a : 10 if a > 5 {fmt.Println("a > 5") } els…...

编程日记 2025/9/12 23:57:36

Nginx处理http的流程

文章目录前言一、发版本后旧版本可以用项目基本情况Nginx 配置**解释每一行的作用：****表现和行为：****适用场景**：资源的缓存策略在这里插入图片描述二， nginx处理http的流程Nginx 的 GitHub 源码地址 **Nginx 核心源码解读&a…...

编程日记 2025/9/12 5:26:31

算法之刷题汇总

剑指 Offer 剑指 Offer 题解 | CS-Notes 面试笔记 Leetcode Leetcode 题解 | CS-Notes 面试笔记 GitCode - 全球开发者的开源社区,开源代码托管平台...

编程日记 2025/9/12 23:58:38

【AIGC系列】4：Stable Diffusion应用实践和代码分析

AIGC系列博文： 【AIGC系列】1：自编码器（AutoEncoder, AE） 【AIGC系列】2：DALLE 2模型介绍（内含扩散模型介绍） 【AIGC系列】3：Stable Diffusion模型原理介绍【AIGC系列】4&#xff1…...

编程日记 2025/9/12 23:55:24

【Python爬虫(81)】当量子计算邂逅Python爬虫：一场技术变革的预演

【Python爬虫】专栏简介：本专栏是 Python 爬虫领域的集大成之作，共 100 章节。从 Python 基础语法、爬虫入门知识讲起，深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑，覆盖网页、图片、音频等各类数据爬取，还涉及数据处理与分析。无论是新手小白还是进阶开发…...

编程日记 2025/9/12 23:55:55

Java Web应用中获取客户端的真实IP地址

Java Web应用中获取客户端的真实IP地址，尤其在存在代理服务器的情况下。代码示例： public static String getClientIP(HttpServletRequest request) {String ip = parseCommaSeparatedIPs(request.getHeader("X-Forwarded-For"));if (isInvalid(ip)) {ip = pars…...

编程日记 2025/9/12 23:57:37

R语言+AI提示词：贝叶斯广义线性混合效应模型GLMM生物学Meta分析

全文链接：https://tecdat.cn/?p40797 本文旨在帮助0基础或只有简单编程基础的研究学者，通过 AI 的提示词工程，使用 R 语言完成元分析，包括数据处理、模型构建、评估以及结果解读等步骤（点击文末“阅读原文”获取完整代…...

编程日记 2025/9/12 23:57:37

LangChain原理解析及开发实战指南（2025年最新版）

一、LangChain核心架构解析 1.1 框架设计理念 LangChain是基于提示工程(Prompt Engineering)构建的LLM应用开发框架，其核心思想是通过模块化组件实现大语言模型与业务系统的无缝对接。该框架采用分层设计： 接口层：统一对接OpenAI、DeepSee…...

编程日记 2025/9/12 23:55:55

赋能农业数字化转型雏森科技助力“聚农拼”平台建设

赋能农业数字化转型，雏森科技助力“聚农拼”平台建设在数字化浪潮席卷各行业的今天，农业领域也在积极探索转型升级之路。中农集团一直以“根植大地，服务三农”为核心，以“乡村振兴，农民增收”为目标，及时…...

编程日记 2025/9/8 13:44:52

CMU15445(2023fall) Project #2 - Extendible Hash Index 匠心分析

胡未灭，鬓已秋，泪空流此生谁料心在天山身老沧州 ——诉衷情完整代码见： SnowLegend-star/CMU15445-2023fall: Having Conquered the Loftiest Peak, We Stand But a Step Away from Victory in This Stage. With unwavering determinati…...

编程日记 2025/9/12 23:55:23

深度剖析Seata源码：解锁分布式事务处理的核心逻辑

文章目录写在文章开头如何使用源码(配置转掉)基于AT模式详解Seata全链路流程Seata服务端启动本地服务如何基于GlobalTransaction注解开启事务客户端如何开启分布式事务RM和TC如何协调处理分支事务RM生成回滚日志事务全局提交与回滚小结参考写在文章开头在当今分布式系统日益…...

编程日记 2025/9/9 0:33:45

python配置mmcv与mmdet环境

首先查看自己的cuda版本 nvcc --version 安装与cuda对应的torch版本，对应关系 Previous PyTorch Versions | PyTorch 安装对应的mmcv版本，使用下面命令可以自动安装匹配的版本，使用mim安装 mim install mmcv-full -f https://download.o…...

编程日记 2025/9/12 23:58:36

ESP 32控制无刷电机2

import machine import time import socket import network from machine import I2C, Pin, ADC def start_ap(): """ 启动ESP32的AP模式 """ ap network.WLAN(network.AP_IF) ap.active(True) ssid ESP32_APTest …...

编程日记 2025/9/12 9:22:23

【uniapp原生】实时记录接口请求延迟，并生成写入文件到安卓设备

在开发实时数据监控应用时，记录接口请求的延迟对于性能分析和用户体验优化至关重要。本文将基于 UniApp 框架，介绍如何实现一个实时记录接口请求延迟的功能，并深入解析相关代码的实现细节。前期准备&必要的理解 1. 功能概述该功能的…...

编程日记 2025/8/29 5:04:23

wps角标快速生成

使用^#符号匹配数字，将[^#]内容找到，随后在格式-字体中选择上标，逐个/批量替换即可（比一点点改效率翻倍）...

编程日记 2025/9/12 23:59:29

Azure Speech

1、文字转语音(Text-To-Speech, TTS) 2、语音转文字(Speech-To-Text): Azure Speech to Text 1- 环境配置：Microsoft Azure 注册使用免费服务： 需要信用卡，本人没有，所以没有完成注册...

编程日记 2025/9/12 23:59:29

SHELL32!ILCombine函数分析之连接两个idl

SHELL32!ILCombine函数分析之连接两个idl 第一部分： STDAPI_(LPITEMIDLIST) ILCombine(LPCITEMIDLIST pidl1, LPCITEMIDLIST pidl2) { // Let me pass in NULL pointers if (!pidl1) { if (!pidl2) { return NULL; …...

编程日记 2025/9/11 5:57:57

学习threejs，使用ShaderMaterial自定义着色器材质

👨‍⚕️ 主页： gis分享者 👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏：threejs gis工程师文章目录一、🍀前言1.1 ☘️THREE.ShaderMaterial1.1.1…...

编程日记 2025/9/12 23:55:56

使用 Selenium 和 Requests 自动化获取动态 Referer 和 Sign 的完整指南

在现代网络爬虫和自动化任务中，动态生成的参数（如 Referer 和 Sign）常常是绕过反爬虫机制的关键。本文将详细介绍如何使用 Python 的 Selenium 和 Requests 库，从目标网页中提取动态 Referer 和 Sign，并完成后续的请求…...

编程日记 2025/9/10 6:22:15

1.2.3 使用Spring Initializr方式构建Spring Boot项目

本实战概述介绍了如何使用Spring Initializr创建Spring Boot项目，并进行基本配置。首先，通过Spring Initializr生成项目骨架，然后创建控制器HelloController，定义处理GET请求的方法hello，返回HTML字符串。接着&#xf…...

编程日记 2025/9/12 23:53:50

Cursor+pycharm接入Codeuim(免费版)，Tab自动补全功能平替

如题，笔者在Cursor中使用pycharm写python程序，试用期到了Tab自动补全功能就不能用了，安装Codeuim插件可以代替这个功能。步骤如下： 1. 在应用商店中搜索扩展Codeuim，下载安装 2. 安装完成后左下角会弹出提示框&#x…...

编程日记 2025/8/26 12:36:53

Ruby基础

一、字符串定义 283.to_s //转为string "something#{a}" //定义字符串，并且插入a变量的值 something//单引号定义变量 %q(aaaaaaaaa) // 定义字符串，（）内可以是任何数，自动转义双引号%Q("aaaaa"…...

编程日记 2025/9/7 5:45:00

wzl-django学习

####################################################总的urls.py from django.contrib import admin from django.urls import path,include, re_path from django.views.static import serve from django.conf import settings from drf_yasg import openapi from drf_yas…...

编程日记 2025/9/11 3:03:07

三个小时学完vue3（二）

图片轮播案例

记事本案例

购物车案例

购物车优化案例

使用Axios实现文章搜索案例

相关文章：