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

微信小程序数据绑定与事件处理：打造动态交互体验

news 来源：原创 2025/9/15 14:05:27

在上一篇中，我们学习了如何搭建微信小程序的开发环境并创建了一个简单的“Hello World”页面。然而，一个真正的小程序不仅仅是静态内容的展示，它需要与用户进行动态交互。本文将深入探讨微信小程序中的数据绑定和事件处理机制，通过具体案例和方法，帮助你打造更具交互性的小程序。

一、数据绑定：让页面动起来

数据绑定是微信小程序开发中的核心概念之一，它允许我们将页面中的数据与逻辑层的数据动态关联起来。当逻辑层的数据发生变化时，页面会自动更新，从而实现动态效果。

  1. 基本数据绑定
    在微信小程序中，数据绑定使用双花括号{{}}语法。例如，我们可以在index.wxml文件中绑定一个简单的文本：

    <view class="container"><text>{{message}}</text>
</view>

    在index.js文件中，我们定义message数据：

    Page({data: {message: 'Hello World'}
})

    这样，页面中的text组件就会显示“Hello World”。

  2. 动态更新数据
    数据绑定的强大之处在于，当逻辑层的数据发生变化时，页面会自动更新。例如，我们可以通过按钮点击事件来更新message数据：

    <view class="container"><text>{{message}}</text><button bindtap="changeMessage">点击我</button>
</view>

    在index.js文件中，定义changeMessage函数：

    Page({data: {message: 'Hello World'},changeMessage: function() {this.setData({message: '你好，世界！'})}
})

    当用户点击按钮时，message数据会被更新为“你好，世界！”，页面上的文本也会随之变化。

  3. 复杂数据绑定
    数据绑定不仅适用于简单的文本，还可以用于复杂的对象和数组。例如，我们可以绑定一个用户信息对象：

    <view class="container"><text>用户名：{{userInfo.name}}</text><text>年龄：{{userInfo.age}}</text>
</view>

    在index.js文件中，定义userInfo数据：

    Page({data: {userInfo: {name: '张三',age: 25}}
})

    这样，页面中就会显示用户的姓名和年龄。

二、事件处理：响应用户操作

事件处理是微信小程序实现用户交互的关键。通过事件处理，我们可以响应用户的点击、滑动、输入等操作，从而触发相应的逻辑。

  1. 绑定事件
    在微信小程序中，事件绑定使用bind或catch前缀。例如，我们可以为按钮绑定一个点击事件：

    <button bindtap="handleClick">点击我</button>

    在index.js文件中，定义handleClick函数：

    Page({handleClick: function() {console.log('按钮被点击了！')}
})

    当用户点击按钮时，控制台会输出“按钮被点击了！”。

  2. 事件对象
    事件处理函数可以接收一个事件对象，该对象包含了事件的详细信息。例如，我们可以获取点击事件的坐标：

    Page({handleClick: function(event) {console.log('点击坐标：', event.touches[0].clientX, event.touches[0].clientY)}
})

    这样，当用户点击按钮时，控制台会输出点击的坐标。

  3. 阻止事件冒泡
    在微信小程序中，事件默认会冒泡到父组件。如果你希望阻止事件冒泡，可以使用catch前缀。例如：

    <view catchtap="handleParentClick"><button catchtap="handleChildClick">点击我</button>
</view>

    在index.js文件中，定义handleParentClick和handleChildClick函数：

    Page({handleParentClick: function() {console.log('父组件被点击了！')},handleChildClick: function() {console.log('子组件被点击了！')}
})

    当用户点击按钮时，只会触发handleChildClick函数，而不会触发handleParentClick函数。

三、案例：实现一个简单的计数器

为了巩固数据绑定和事件处理的知识，我们将通过一个简单的计数器案例，展示如何在小程序中实现动态交互。

  1. 页面结构
    在index.wxml文件中，编写以下代码：

    <view class="container"><text>当前计数：{{count}}</text><button bindtap="increment">增加</button><button bindtap="decrement">减少</button>
</view>

    这段代码定义了一个计数器页面，包含一个显示计数的文本和两个按钮。

  2. 逻辑处理
    在index.js文件中，编写以下代码：

    Page({data: {count: 0},increment: function() {this.setData({count: this.data.count + 1})},decrement: function() {this.setData({count: this.data.count - 1})}
})

    这段代码定义了increment和decrement函数，分别用于增加和减少计数。

  3. 样式设计
    在index.wxss文件中，编写以下代码：

    .container {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;
}
button {margin-top: 20px;
}

    这段代码将页面设置为居中显示，并为按钮添加了间距。

  4. 预览效果
    保存文件后，点击“增加”和“减少”按钮，你会发现页面上的计数会动态变化。

四、总结与展望

通过本文的学习，你已经掌握了微信小程序中的数据绑定和事件处理机制，并成功实现了一个简单的计数器案例。数据绑定和事件处理是小程序开发的核心技能，掌握它们将帮助你打造更具交互性的应用。

在接下来的文章中，我们将继续深入探讨小程序的更多高级功能，如网络请求、页面导航、组件封装等，帮助你进一步提升开发技能。敬请期待！

小贴士：在实际开发中，合理使用数据绑定和事件处理可以大大提升小程序的用户体验。建议多尝试不同的交互场景，积累经验，逐步提升开发水平。

相关文章：

微信小程序数据绑定与事件处理：打造动态交互体验

在上一篇中&#xff0c;我们学习了如何搭建微信小程序的开发环境并创建了一个简单的“Hello World”页面。然而&#xff0c;一个真正的小程序不仅仅是静态内容的展示&#xff0c;它需要与用户进行动态交互。本文将深入探讨微信小程序中的数据绑定和事件处理机制&#xff0c;通过…...

编程日记 2025/9/15 14:05:27

Spring MVC 的执行流程解析：从用户请求到响应返回

Spring MVC 是一种基于 Model-View-Controller 设计模式的 Web 框架&#xff0c;用于处理用户请求、执行相应的业务逻辑并返回响应。它广泛应用于 Java Web 开发&#xff0c;提供了灵活的架构和丰富的功能。 本文将详细介绍 Spring MVC 的执行流程&#xff0c;帮助你理解它是如…...

编程日记 2025/9/13 13:33:03

c++day5

作业&#xff1a; 编写一个如下场景&#xff1a; 有一个英雄Hero类&#xff0c;私有成员&#xff0c;攻击&#xff0c;防御&#xff0c;速度&#xff0c;生命值&#xff0c;以及所有的set get 方法 编写一个 武器 Weapon 类&#xff0c;拥有私有成员攻击力&#xff0c;以及set …...

编程日记 2025/9/15 12:19:39

Deepseek 实战全攻略，领航科技应用的深度探索之旅

想玩转 Deepseek&#xff1f;这攻略别错过&#xff01;先带你了解它的基本原理&#xff0c;教你搭建运行环境。接着给出自然语言处理、智能客服等应用场景的实操方法与代码。还分享模型微调、优化技巧&#xff0c;结合案例加深理解&#xff0c;让你全面掌握&#xff0c;探索科技…...

编程日记 2025/9/6 12:53:29

公共数据授权运营模式研究（总体框架、主要模式及发展趋势）

本报告以公共数据运营模式为核心&#xff0c;以释放公共数据价值为目标&#xff0c;深入分析公共数据概念及特征&#xff0c;厘清公共数据运营的内涵及本质&#xff0c;提出纵深分域数据要素市场运营体系的总体思路&#xff0c;构建了一座&#xff08;一个数据底座&#xff09;…...

编程日记 2025/9/15 5:54:02

本地开发用ASP.NET Core Web API项目创建及测试

1. 服务端代码&#xff08;C#&#xff09; 1.1 创建ASP.NET Core Web API项目 打开Visual Studio 2022。 选择“创建新项目”。 选择“ASP.NET Core Web API”模板&#xff0c;点击“下一步”。 输入项目名称&#xff08;如OracleApi&#xff09;&#xff0c;选择项目位置&…...

编程日记 2025/9/15 5:54:01

【虚拟仪器技术】labview操作指南和虚拟仪器技术习题答案(一)

今天是2025年2月24日&#xff0c;画的是fate/Grand Order里面的阿尔托莉雅.卡斯特&#xff0c;武内老师的画。 目录 第1章 第2章 第3章 第4章 第5章 关注作者了解更多 我的其他CSDN专栏 毕业设计 求职面试 大学英语 过程控制系统 工程测试技术 虚拟仪器技术 可编程…...

编程日记 2025/9/15 5:53:59

SpringCloud系列教程：微服务的未来（二十五）-基于注解的声明队列交换机、消息转换器、业务改造

前言 在现代分布式系统中&#xff0c;消息队列是实现服务解耦和异步处理的关键组件。Spring框架提供了强大的支持&#xff0c;使得与消息队列&#xff08;如RabbitMQ、Kafka等&#xff09;的集成变得更加便捷和灵活。本文将深入探讨如何利用Spring的注解驱动方式来配置和管理队…...

编程日记 2025/9/15 5:53:57

LLM之论文阅读——Context Size对RAG的影响

前言 RAG 系统已经在多个行业中得到广泛应用&#xff0c;尤其是在企业内部文档查询等场景中。尽管 RAG 系统的应用日益广泛&#xff0c;关于其最佳配置的研究却相对缺乏&#xff0c;特别是在上下文大小、基础 LLM 选择以及检索方法等方面。 论文原文: On the Influence of Co…...

编程日记 2025/9/15 5:53:56

C#实现本地AI聊天功能（Deepseek R1及其他模型）。

前言 1、C#实现本地AI聊天功能 WPFOllamaSharpe实现本地聊天功能,可以选择使用Deepseek 及其他模型。 2、此程序默认你已经安装好了Ollama。 在运行前需要线安装好Ollama,如何安装请自行搜索 Ollama下载地址&#xff1a; https://ollama.org.cn Ollama模型下载地址&#xf…...

编程日记 2025/9/14 18:58:36

git 查询包含某个文件夹的步骤

步骤 1&#xff1a;拉取最新的远程分支信息 确保本地缓存的远程分支信息是最新的&#xff1a; bash 复制 git fetch --all 步骤 2&#xff1a;遍历所有远程分支并检查目标文件夹 使用 git ls-tree 检查每个分支是否包含目标文件夹。以下脚本会列出所有包含 your_folder_pa…...

编程日记 2025/9/15 5:53:52

微软开源神器OmniParser-v2.0本地部署教程

安装python环境 我这里是以前安装好的版本&#xff1a;python 3.11.5&#xff0c;这里不再介绍&#xff0c;有需要的可以在网上找教程。 安装Anaconda 我这里是以前安装好的版本&#xff1a;conda 23.7.4&#xff0c;这里也不再介绍&#xff0c;有需要的可以在网上找教程。 …...

编程日记 2025/9/15 5:53:51

解决 Git 合并冲突：当本地修改与远程提交冲突时

目录 错误原因分析 解决方法 1. 暂存本地修改并合并&#xff08;保留更改&#xff09; 2. 丢弃本地修改&#xff08;强制覆盖&#xff09; 3. 暂存修改后合并&#xff08;推荐&#xff1a;使用 git stash&#xff09; 4. 选择性合并&#xff08;手动处理冲突文件&#xf…...

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

VScode中Markdown PDF无法正确输出包含数学公式的pdf解决方案

在使用VScode的Markdown PDF插件时&#xff0c;可能会遇到无法正确输出包含公式的PDF文件的问题。下面为你提供一种有效的解决方案。 具体操作步骤 步骤一&#xff1a;定位模板文件 在安装Markdown PDF插件后&#xff0c;你需要找到对应的模板文件。该文件的路径通常如下&am…...

编程日记 2025/9/15 5:53:48

uniapp 网络请求封装(uni.request 与 uView-Plus）

一、背景 在开发项目中&#xff0c;需要经常与后端服务器进行交互&#xff1b;为了提高开发效率和代码维护性&#xff0c;以及降低重复性代码&#xff0c;便对网络请求进行封装统一管理。 二、创建环境文件 2.1、根目录新建utils文件夹&#xff0c;utils文件夹内新建env.js文…...

编程日记 2025/9/15 5:53:46

Jtti.cc:站群服务器SEO优化建议，如何分配多IP？

站群优化的核心目标之一是尽可能通过多个网站互相引导流量&#xff0c;从而提升主站的权重。这时候&#xff0c;多IP的分配至关重要&#xff0c;因为搜索引擎会检测到同一IP下的网站之间的关联性。如果一个IP地址下有过多的相似站点&#xff0c;搜索引擎可能会认为这些站点存在…...

编程日记 2025/9/15 5:53:44

银行系统功能架构设计元模型

1. 元模型核心目标 ​规范性：定义功能模块的标准化描述方式，便于跨团队协作。​可复用性：抽象通用组件，减少重复开发。​可扩展性：支持未来业务创新和技术升级（如开放银行API集成）。​2. 元模型层级结构 采用分层架构模式，分为以下核心层级： ​**(1) 业务功能层** ​…...

编程日记 2025/9/15 5:53:43

uniapp写的h5跳转小程序

使用场景&#xff1a; 我们对接第三方支付的时候&#xff0c;对方只提供了原生小程序id和appid&#xff0c;由我们的app和h5平台跳转至小程序。 遇到的问题&#xff1a; app跳转本地正常&#xff0c;线上报错如下 解决办法&#xff1a; 需要去微信开放平台申请应用appid 易…...

编程日记 2025/9/15 5:53:41

DeepSeek点燃AI大模型战火：编程语言争霸，谁将问鼎“终极武器”王座？

DeepSeek点燃AI大模型战火&#xff1a;编程语言争霸&#xff0c;谁将问鼎“终极武器”王座&#xff1f; 一、DeepSeek&#xff1a;AI大模型竞赛的“导火索” 2023年&#xff0c;中国AI公司深度求索&#xff08;DeepSeek&#xff09;发布DeepSeek-R1大模型&#xff0c;凭借其超…...

编程日记 2025/9/15 5:53:39

游戏引擎学习第123天

仓库:https://gitee.com/mrxiao_com/2d_game_3 黑板&#xff1a;线程同步/通信 目标是从零开始编写一个完整的游戏。我们不使用引擎&#xff0c;也不依赖任何库&#xff0c;完全自己编写游戏所需的所有代码。我们做这个节目不仅是为了教育目的&#xff0c;同时也是因为编程本…...

编程日记 2025/9/14 16:34:11

钉钉快捷免登录 通过浏览器打开第三方系统，

一、钉钉内跳转至浏览器的实现 使用钉钉JSAPI的跳转接口 在钉钉内通过dd.biz.navigation.openLink方法强制在系统浏览器中打开链接。此方法需在钉钉开发者后台配置应用权限&#xff0c;确保应用具备调用该API的资格37。 示例代码&#xff1a; dd.ready(() > {dd.biz.navigat…...

编程日记 2025/9/15 5:53:36

塔能科技构建智慧隧道生态系统——城市升级改造的协同创新典范

一、智慧隧道生态系统的概念与意义 &#xff08;一&#xff09;概念解析 智慧隧道生态系统是一个涵盖多方面协同关系的复杂概念。在隧道建设方面&#xff0c;它不仅仅是简单的挖掘和结构搭建&#xff0c;而是将智能化技术融入其中&#xff0c;例如采用先进的传感器技术&#x…...

编程日记 2025/9/15 5:53:34

在Anaconda的虚拟环境中安装R，并在vscode中使用

在 Anaconda 的虚拟环境中使用 R&#xff0c;并且希望在 VS Code 中同时使用 Python 和 R&#xff0c;确实需要同时安装 Python 和 R。这是因为 VS Code 的 Jupyter 插件和内核管理依赖于 Python&#xff0c;而 R 则作为 Jupyter 的另一个内核运行。 以下是具体的操作步骤和逻…...

编程日记 2025/9/15 5:53:33

创建型模式 - 建造者模式 (Builder Pattern)

创建型模式 - 建造者模式 (Builder Pattern) 建造者模式是一种创建型设计模式&#xff0c;它将一个复杂对象的构建与表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 需求描述 在游戏开发中&#xff0c;创建一个复杂的游戏角色&#xff0c;角色具有多种属性&…...

编程日记 2025/9/15 5:53:31

路由追踪核心技术深度解析：Traceroute与Tracert命令实战指南（跨平台/抓包/网络安全防护）

目录 路由器是什么&#xff1f; 路由器的基本功能&#xff1a; 路由追踪技术&#xff08;Traceroute&#xff09; 路由追踪的工作原理 实现技术 路由追踪的输出示例 路由追踪的用途 traceroute 命令&#xff08;Linux 和 macOS&#xff09; 基本语法 常用选项 示例 …...

编程日记 2025/9/14 19:19:12

音视频入门基础：RTP专题（12）——RTP中的NAL Unit Type简介

一、引言 RTP封装H.264时&#xff0c;RTP对NALU Header的nal_unit_type附加了扩展含义。 由《音视频入门基础&#xff1a;H.264专题&#xff08;4&#xff09;——NALU Header&#xff1a;forbidden_zero_bit、nal_ref_idc、nal_unit_type简介》可以知道&#xff0c;nal_unit…...

编程日记 2025/9/15 5:03:30

HTTP GET 请求示例

鸿蒙操作系统&#xff08;HarmonyOS&#xff09;是华为公司自主研发的面向全场景的分布式操作系统&#xff0c;旨在为用户提供一个安全、流畅且跨设备无缝连接的体验。它支持多种终端设备&#xff0c;如智能手机、平板电脑、智能电视、汽车等&#xff0c;并实现了模块化解耦&am…...

编程日记 2025/9/13 13:35:36

GO 快速升级Go版本

由于底层依赖升级了&#xff0c;那我们也要跟着升&#xff0c;go老版本已经不足满足需求了&#xff0c;必须要将版本升级到1.22.0以上 查看当前Go版本 命令查看go版本 go version [rootlocalhost local]# go version go version go1.21.4 linux/amd64 [rootlocalhost local]# …...

编程日记 2025/9/14 15:31:07

ELK搭建初入

ELK搭建&#xff1a; 1、安装ElasticSearch &#xff08;用于存储收集到的日志信息&#xff09; 解压安装包 tar -xzvf elasticsearch-8.17.2-linux-x86_64.tar.gz 启动es&#xff1a;bin/elasticsearch –d&#xff08;默认端口号9200&#xff09; 浏览器输入es地址。出现…...

编程日记 2025/9/14 4:27:17

【redis】数据类型之Bitfields

Redis的Bitfields&#xff08;位域&#xff09;与Bitmaps一样&#xff0c;在Redis中并不是一种独立的数据类型&#xff0c;而是一种基于字符串的数据结构&#xff0c;用于处理位级别的操作。允许用户将一个Redis字符串视作由一系列二进制位组成的数组&#xff0c;并对这些位进行…...

编程日记 2025/9/15 4:18:22

vscode软件中引入vant组件

一、vant简介 Vant 是一个轻量、可靠的移动端组件库&#xff0c;于 2017 年开源。 目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本&#xff0c;并由社区团队维护 React 版本和支付宝小程序版本。 官网&#xff1a;介绍 - Vant Weapp 里面的快速上手的教程&a…...

编程日记 2025/9/14 4:40:29

DDR3模块、HDMI、晶振的布局原则

DDR3模块的布局原则 1.1片DDR就尽量靠近 我们CPU去摆放 2.DDRx2片&#xff0c;相对CPU需要严格对称 3.DDR滤波电容靠近管脚进行放置 4.端接匹配电阻摆放&#xff1a;串联端接电阻放置CPU端&#xff0c;并联端接电阻放置DDR端 5.地址线、控制线、时钟线都是单向传输&#xff0c…...

编程日记 2025/9/14 11:07:15

夜莺监控 - 边缘告警引擎架构详解

前言 夜莺类似 Grafana 可以接入多个数据源&#xff0c;查询数据源的数据做告警和展示。但是有些数据源所在的机房和中心机房之间网络链路不好&#xff0c;如果由 n9e 进程去周期性查询数据并判定告警&#xff0c;那在网络链路抖动或拥塞的时候&#xff0c;告警就不稳定了。所…...

编程日记 2025/9/8 0:28:55

【CSP/信奥赛通关课（六）：信奥赛STL专题】

CSP/信奥赛通关课&#xff08;六&#xff09;&#xff1a;信奥赛STL专题 课程简介&#xff1a; 讲解信奥赛C中的STL核心组件&#xff1a;容器、迭代器、算法等&#xff0c;分析重点案例&#xff0c;让学生在实践的过程中熟练掌握信奥赛C相关的STL重要知识点。 课程教学目标&…...

编程日记 2025/9/14 14:24:40

【数据结构初阶第十五节】堆的应用（堆排序 + Top-K问题）

必须有为成功付出代价的决心&#xff0c;然后想办法付出这个代价。云边有个稻草人-CSDN博客 对于本节我们要提前掌握前一节课堆的相关实现才能学好本次的知识&#xff0c;一定要多画图多敲代码看看实现的效果是啥&#xff08;Crazy&#xff01;&#xff09;开始吧&#xff01; …...

编程日记 2025/9/12 5:36:43

SSL/TLS 协议、SSL证书 和 SSH协议 的区别和联系

下面是 SSL/TLS 协议、SSL证书 和 SSH协议 的区别和联系&#xff0c;包含它们的英文全称和中文全称&#xff1a; 属性SSL/TLS 协议SSL证书SSH 协议英文全称Secure Sockets Layer / Transport Layer SecuritySecure Sockets Layer CertificateSecure Shell Protocol中文全称安全…...

编程日记 2025/9/9 1:50:08

数据结构与算法-图论-最短路和其他的结合

介绍 最短路算法常与深度优先搜索&#xff08;DFS&#xff09;、动态规划&#xff08;DP&#xff09;、二分答案、拓扑排序等算法结合使用&#xff1a; - 最短路与DFS结合&#xff1a;在一些图的路径问题中&#xff0c;当需要访问特定的多个结点&#xff0c;且数据范围较小时…...

编程日记 2025/9/13 18:27:11

C++day6

编写一个如下场景&#xff1a; 有一个英雄Hero类&#xff0c;私有成员&#xff0c;攻击&#xff0c;防御&#xff0c;速度&#xff0c;生命值&#xff0c;以及所有的set get 方法 编写一个 武器 Weapon 类&#xff0c;拥有私有成员攻击力&#xff0c;以及set get 方法 编写一个…...

编程日记 2025/9/14 15:54:27

【初阶数据结构】星河中的光影 “排” 象：排序（下）

文章目录 4.交换排序4.1 冒泡排序&#xff08;BubbleSort&#xff09;4.2 快速排序&#xff08;QuickSort&#xff09;4.2.1 hoare版本4.2.2 挖坑法4.2.3 前后指针法4.2.4 非递归实现 5.归并排序&#xff08;MergeSort&#xff09;5.1 递归实现5.2 非递归实现5.2.1 一次性全部拷…...

编程日记 2025/9/14 3:43:56

C++ 练习1

阐述g 有哪些常用的选项&#xff0c;该选项有什么作用 选项作用-o <file>指定输出文件名&#xff08;默认生成 a.out&#xff09;-c仅编译生成目标文件&#xff08;.o 文件&#xff09;&#xff0c;不链接-E只进行预处理&#xff0c;输出预处理后的代码&#xff08;展开…...

编程日记 2025/9/9 20:48:08

Ajax数据采集与分析详解

文章目录 1. 什么是 Ajax&#xff1f;2. Ajax 的工作原理3. Ajax 在网页中的应用场景4. 爬取 Ajax 数据的方法4.1 分析网络请求4.2 模拟 Ajax 请求4.3 使用 Selenium 模拟浏览器4.4 使用 Headless 浏览器 5. 处理动态参数6. 处理分页和滚动加载7. 处理反爬虫机制8. 数据存储9. …...

编程日记 2025/9/15 8:12:14

协方差（Covariance）与得分函数：从Fisher信息矩阵看统计关联

协方差与得分函数&#xff1a;从Fisher信息矩阵看统计关联 协方差&#xff08;Covariance&#xff09;是统计学中一个基础但强大的概念&#xff0c;它描述了两个随机变量之间的关系。在Fisher信息矩阵中&#xff0c;协方差以一种特别的形式出现&#xff1a;得分函数的协方差。…...

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

【CSS 选择器的特异度 CSS 继承 CSS 求值过程解析 CSS 布局方式及相关技术】

以下是关于 CSS 选择器特异度、继承、求值过程及布局技术 的详细解析&#xff0c;结合核心概念和实际应用场景&#xff1a; 一、CSS 选择器特异度&#xff08;Specificity&#xff09; 1. 特异度规则 特异度用于决定当多个选择器作用于同一元素时&#xff0c;哪个样式优先级更…...

编程日记 2025/9/2 14:42:11

Vue+ElementPlus的一些问题修复汇总

目录 一、ElementPlusVue-router做侧边栏问题 二、 组件样式问题 2.1修改文字颜色、大小、粗细、边框的颜色 2.2修改聚焦后文字的颜色、边框的颜色 2.3修改鼠标悬浮时文字的颜色、边框的颜色 三、 组件样式问题 3.1修改文字颜色、大小、粗细 四、 样式问题 4.1当数据为空…...

编程日记 2025/9/3 6:35:05

单链表删除算法(p=L； j=0；与p=p-＞next；j=1的辨析)

算法描述 Status ListDelete&#xff08;LinkList &L,int i&#xff09; { //在带头结点的单链表 L 中&#xff0c;删除第 i 个元素 pL; j0; while ((p->next) && (j<i-1)) {pp->next; j;} if (!(p->next)||(j>i-1)) return ERROR; qp->nex…...

编程日记 2025/9/10 9:44:46

从单片机的启动说起一个单片机到点灯发生了什么下——使用GPIO点一个灯

目录 前言 HAL库对GPIO的抽象 核心分析&#xff1a;HAL_GPIO_Init 前言 我们终于到达了熟悉的地方&#xff0c;对GPIO的初始化。经过漫长的铺垫&#xff0c;我们终于历经千辛万苦&#xff0c;来到了这里。关于GPIO的八种模式等更加详细的细节&#xff0c;由于只是点个灯&am…...

编程日记 2025/9/2 14:08:42

vue2项目打包后js文件过大, 首次加载缓慢

vue2项目打包后js文件过大, 首次加载缓慢 安装插件 npm i compression-webpack-plugin6.1.1 -D配置vue.config.js const CompressionWebpackPlugin require(compression-webpack-plugin)module.exports {configureWebpack: {plugins:[new CompressionWebpackPlugin({filen…...

编程日记 2025/9/11 15:43:51

llama.cpp 一键运行本地大模型 - Windows

文章目录 llama.cpp 一键运行本地大模型 - Windows嘿&#xff0c;咱来唠唠 llama.cpp 这玩意儿&#xff01;gguf 格式是啥&#xff1f;咱得好好说道说道基座模型咋选&#xff1f;所需物料&#xff0c;咱得准备齐全咯核心命令&#xff0c;得记牢啦运行方式咋选&#xff1f;测试应…...

编程日记 2025/9/15 8:08:00

Android 老项目 jcenter 库失效

最近重新维护了一些老项目发现大部分jcenter库失效了&#xff0c; Could not resolve com.xx:2.1.3. 如果你也遇到了&#xff0c;不妨试试 替换为 aliyun的jcenter服务&#xff0c;就不用一个个找代替库了。 project 下的 build.gradle 文件添加&#xff1a; maven { url htt…...

编程日记 2025/9/8 1:25:09

MyBatis简明教程

MyBatis 是一个用于简化数据库操作的持久层框架&#xff0c;它的核心思想是 将 SQL 与 Java 代码解耦&#xff0c;让开发者专注于 SQL 的编写&#xff0c;同时自动处理重复的数据库操作步骤。 一、核心思想&#xff1a;SQL 与 Java 解耦 传统 JDBC 需要开发者手动管理数据库连…...

编程日记 2025/9/11 0:44:35