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

【VUE】第一期——初使用、基本语法

news 文章来源：https://blog.csdn.net/qq_58870434/article/details/146048113 2025/5/19 5:26:07

0 前言

黑马程序员视频地址：前端最新Vue2+Vue3基础入门到实战项目全套教程

本章从vue2学起，vue3内容将在后期专门用一章来讲述

本篇只记录大纲及要点，具体请看黑马程序员视频及其提供的md笔记

vue2官网：Vue.js

vue3官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1 准备工作

1.1 创建vue实例

1. 准备容器 (Vue所管理的范围)
2. 引包 (开发版本包 / 生产版本包) 官网
3. 创建实例
4. 添加配置项 => 完成渲染

<body><div id="app"><!-- 这里将来会编写一些用于渲染的代码逻辑 --><h1>{{ msg }}</h1><a href="#">{{ count }}</a>
</div><!-- 引入的是开发版本包 - 包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><script>// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数const app = new Vue({// 通过 el 配置选择器，指定 Vue 管理的是哪个盒子el: '#app',// 通过 data 提供数据data: {msg: 'Hello World！',count: 666}})</script></body>

1.2 vue开发者工具

安装网站：极简插件官网_Chrome插件下载_Chrome浏览器应用商店

注意查看插件是否支持vue2

安装之后可以F12后看到多一个Vue的调试面板

2 插值表达式

2.1 基本用法

{{表达式}}

表达式：

money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

示例：

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

2.2 注意事项

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

3 常用指令

vue 中的指令按照不同的用途可以分为如下 6 大类：

内容渲染指令（v-html、v-text）

条件渲染指令（v-show、v-if、v-else、v-else-if）

事件绑定指令（v-on）

属性绑定指令（v-bind）

列表渲染指令（v-for）

双向绑定指令（v-model）

3.1 内容渲染指令

3.1.1 v-text

使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中

类似 innerText，使用该语法，会覆盖 p 标签原有内容

3.1.2 v-html

使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中

类似 innerHTML，使用该语法，会覆盖 p 标签原有内容

类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

3.2 条件渲染指令

3.2.1 v-show

作用：控制元素显示隐藏

语法： v-show = "表达式" 表达式值为 true 显示， false 隐藏

原理：切换 display:none 控制显示隐藏

场景：频繁切换显示隐藏的场景

3.2.2 v-if

作用：控制元素显示隐藏（条件渲染）

语法： v-if= "表达式" 表达式值 true显示， false 隐藏

原理：基于条件判断，是否创建或移除元素节点

场景：要么显示，要么隐藏，不频繁切换的场景

3.2.3 v-else 和 v-else-if

作用：辅助v-if进行判断渲染

语法：v-else v-else-if="表达式"

需要紧接着v-if使用

3.3 事件绑定指令

<button v-on:事件名="内联语句">按钮</button>

<button v-on:事件名="处理函数">按钮</button>

<button v-on:事件名="处理函数(实参)">按钮</button>

v-on: 简写为 @

3.3.1 内联语句

<div id="app"><button @click="count--">-</button><span>{{ count }}</span><button v-on:click="count++">+</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100}})</script>

3.3.2 事件处理函数

注意：

事件处理函数应该写到一个跟data同级的配置项（methods）中

methods中的函数内部的this都指向Vue实例

3.3.3 给事件处理函数传参

如果不传递任何参数，则方法无需加小括号；methods方法中可以直接使用 e 当做事件对象

<body><div id="app"><!-- 绑定事件处理函数，不加小括号 --><button @click="handleClick">点击我</button></div><script>new Vue({el: '#app',methods: {handleClick(e) {// e 就是事件对象console.log('事件对象:', e);console.log('点击的元素:', e.target);}}});</script>
</body>

如果传递了参数，则需额外传一个实参 $event 表示事件对象

<body><div id="app"><!-- 传递额外参数，同时使用 $event 表示事件对象 --><button @click="handleClickWithParams('额外参数', $event)">点击我</button></div><script>new Vue({el: '#app',methods: {handleClickWithParams(param, e) {// param 是传递的额外参数console.log('传递的额外参数:', param);// e 是事件对象console.log('事件对象:', e);console.log('点击的元素:', e.target);}}});</script>
</body>

注意：如果在内联事件处理中只传递一个参数而不使用 $event 来显式传递事件对象，那么在 methods 中定义的方法里第二个形参将无法接收到事件对象

3.4 属性绑定指令

作用：动态设置html的标签属性比如：src、url、title

语法：v-bind:属性名=“表达式”

v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。则可以这样设置属性值：- <img v-bind:src="url" />
- <img :src="url" />   （v-bind可以省略）

3.5 列表渲染指令

v-for 指令需要使用 (item, index) in arr 形式的特殊语法，其中：

item 是数组中的每一项

index 是每一项的索引，不需要可以省略

arr 是被遍历的数组

此语法也可以遍历对象和数字

//遍历对象
<div v-for="(value, key, index) in object">{{value}}</div>
value:对象中的值
key:对象中的键
index:遍历索引从0开始//遍历数字
<p v-for="item in 10">{{item}}</p>
item从1 开始

3.5.1 key

语法： key="唯一值"

作用：给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

为什么加key：Vue 的默认行为会尝试原地修改元素（就地复用）

<ul><li v-for="(item, index) in booksList" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button @click="del(item.id)">删除</button></li>
</ul>

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

3.6 双向绑定指令（v-model）

作用： 给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

语法：v-model="变量

如：

输入框 input:text ——> value
文本域 textarea ——> value
复选框 input:checkbox ——> checked
单选框 input:radio ——> checked
下拉菜单 select ——> value
...

<body><div id="app"><h3>小黑学习网</h3>姓名：<input type="text" v-model="username"> <br><br>是否单身：<input type="checkbox" v-model="isSingle"> <br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据结合 Vue 使用 → v-model-->性别: <input v-model="gender" type="radio" name="gender" value="1">男<input v-model="gender" type="radio" name="gender" value="2">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea> <button>立即注册</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',isSingle: false,gender: "2",cityId: '102',desc: ""}})</script>
</body>

4 指令修饰符

指令修饰符就是通过“.”指明一些指令后缀不同的后缀封装了不同的处理操作 —> 简化代码

4.1 按键修饰符

类似：@keyup.enter —>当点击enter键的时候才触发

除了enter，其他的也可以

4.2 v-model修饰符

v-model.trim —>去除首位空格

v-model.number —>转数字

4.3 事件修饰符

@事件名.stop —> 阻止冒泡

@事件名.prevent —>阻止默认行为

@事件名.stop.prevent —>可以连用即阻止事件冒泡也阻止默认行为

注意：不一定严格按照上述分类使用，如果能有相应效果，也可以自由搭配使用

5 属性绑定指令操控样式

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制

5.1 :class

语法：

<div> :class = "对象/数组">这是一个div</div>

5.1.1 对象

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

适用场景：一个类名，来回切换

示例：

<div id="app"><ul><li v-for="(item, index) in list" :key="item.id" @click="activeIndex = index"><a :class="{ active: index === activeIndex }" href="#">{{ item.name }}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {activeIndex: 2, // 记录高亮list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' }]}})</script>
</body>

5.1.2 数组

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

使用场景:批量添加或删除类

5.2 :style

语法：

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

示例：操作进度条

<body><div id="app"><!-- 外层盒子底色 （黑色） --><div class="progress"><!-- 内层盒子 - 进度（蓝色） --><div class="inner" :style="{ width: percent + '%' }"><span>{{ percent }}%</span></div></div><button @click="percent = 25">设置25%</button><button @click="percent = 50">设置50%</button><button @click="percent = 75">设置75%</button><button @click="percent = 100">设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 30}})</script>
</body>

6 computed 计算属性

基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算

语法：

声明在 computed 配置项中，一个计算属性对应一个函数

使用起来和普通属性一样使用 {{ 计算属性名}}

注意：

computed配置项和data配置项是同级的

computed中的计算属性虽然是函数的写法，但他依然是个属性

computed中的计算属性不能和data中的属性同名

使用computed中的计算属性和使用data中的属性是一样的用法

computed中计算属性内部的this依然指向的是Vue实例

示例：

<body><div id="app"><h3>小黑的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 目标：统计求和，求得礼物总数 --><p>礼物总数：{{ totalCount }} 个</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount () {// 基于现有的数据，编写求值逻辑// 计算属性函数内部，可以直接通过 this 访问到 app 实例// console.log(this.list)// 需求：对 this.list 数组里面的 num 进行求和 → reducelet total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>
</body>

6.1 完整写法

6.2 computed计算属性 VS methods方法

6.2.1 computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

1.写在computed配置项中

2.作为属性，直接使用

js中使用计算属性： this.计算属性

模板中使用计算属性：{{计算属性}}

6.2.2 methonds方法

作用：给Vue实例提供一个方法，调用以处理业务逻辑

语法：

1.写在methods配置项中

2.作为方法调用

js中调用：this.方法名()

模板中调用 {{方法名()}} 或者 @事件名=“方法名”

6.2.3 计算属性的优势

缓存特性（提升性能）

计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

依赖项变化了，会自动重新计算 → 并再次缓存

methods没有缓存特性

6.2.4 总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函

7 watch监视器

监视数据变化，执行一些业务逻辑或异步操作

watch同样声明在跟data同级的配置项中

7.1 简单写法

data: { words: '苹果',obj: {words: '苹果'}
},watch: {// 该方法会在数据变化时，触发执行数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}

示例：

  <body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">mela</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 请求方式：get// 请求参数：// （1）words：需要被翻译的文本（必传）// （2）lang： 需要被翻译成的语言（可选）默认值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {// words: ''obj: {words: ''}},// 具体讲解：(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用）// words (newValue) {//   console.log('变化了', newValue)// }'obj.words' (newValue) {console.log('变化了', newValue)}}})</script></body>

7.2 完整写法

添加额外配置：

deep:true 对复杂类型进行深度监听

immdiate:true 初始化，立刻执行一次

data: {obj: {words: '苹果',lang: 'italy'},
},watch: {// watch 完整写法对象: {deep: true, // 深度监视immdiate:true,//立即执行handler函数handler (newValue) {console.log(newValue)}}
}

示例：

  <body><div id="app"><!-- 条件选择框 --><div class="query"><span>翻译成的语言：</span><select v-model="obj.lang"><option value="italy">意大利</option><option value="english">英语</option><option value="german">德语</option></select></div><!-- 翻译框 --><div class="box"><div class="input-wrap"><textarea v-model="obj.words"></textarea><span><i>⌨️</i>文档翻译</span></div><div class="output-wrap"><div class="transbox">{{ result }}</div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 需求：输入内容，修改语言，都实时翻译// 接口地址：https://applet-base-api-t.itheima.net/api/translate// 请求方式：get// 请求参数：// （1）words：需要被翻译的文本（必传）// （2）lang： 需要被翻译成的语言（可选）默认值-意大利// -----------------------------------------------const app = new Vue({el: '#app',data: {obj: {words: '小黑',lang: 'italy'},result: '', // 翻译结果},watch: {obj: {deep: true, // 深度监视immediate: true, // 立刻执行，一进入页面handler就立刻执行一次handler (newValue) {clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: newValue})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}}})</script></body>

【VUE】第一期——初使用、基本语法

目录 0 前言 1 准备工作 1.1 创建vue实例 1.2 vue开发者工具 2 插值表达式 2.1 基本用法 3 常用指令 3.1 内容渲染指令 3.1.1 v-text 3.1.2 v-html 3.2 条件渲染指令 3.2.1 v-show 3.2.2 v-if 3.2.3 v-else 和 v-else-if 3.3 事件绑定指令 3.3.1 内联语句 3.3…...

编程日记 2025/3/7 6:29:54

计算光学成像与光学计算概论

计算光学成像所涉及研究的内容非常广泛，虽然计算光学成像的研究内容是发散的，但目的都是一致的：如何让相机记录到客观实物更丰富的信息，延伸并扩展人眼的视觉感知。总的来说，计算光学成像现阶段已经取得了很多令人振奋…...

编程日记 2025/3/7 6:28:53

开启科创服务新篇章：八月瓜科技CRM数字化管理系统成功上线

近日，北京八月瓜科技有限公司（以下简称 “八月瓜科技”）与纷享销客达成深度战略合作，成功部署并上线CRM数字化管理系统。此次合作是八月瓜科技在数字化转型进程中的重要里程碑，标志着其在科技创新服务领域的数字化变革…...

编程日记 2025/3/7 6:26:50

AI提示词（Prompt）的理解和学习指南

AI提示词（Prompt）的理解和学习指南一、什么是AI提示词？ AI提示词（Prompt）是用户输入给人工智能模型的指令或问题，用于引导模型生成特定类型的回答或内容。它如同与AI沟通的“钥匙”，设计得当…...

编程日记 2025/3/7 6:25:48

记录一些面试遇到的问题

重载和重写的区别重载是overload，覆盖是override 重载属于编译时多态，覆盖属于运行时多态运行时多态和编译时多态运行时多态指的是在运行的时候才知道要调用哪一个函数，编译时多态是指在编译的时候就知道调用哪一个函数。运行时多态…...

编程日记 2025/3/7 6:24:47

OpenHarmony4.0_Linux环境搭建

查看链接：OpenHarmony4.0_Linux环境搭建https://www.yuque.com/xinzaigeek/jishu/fs9msruqhd5nhw4i...

编程日记 2025/3/7 6:23:46

DeepSeek开源Day5：3FSsmallpond技术详解

2 月 24 日，DeepSeek 启动 “开源周”，第四个开源的代码库为 3FS&smallpond（又是一下发布了两个）。 3FS（Fire-Flyer File System）是 DeepSeek 内部开发的一款高性能分布式文件系统，旨在为 A…...

编程日记 2025/3/7 6:22:44

Java集合面试篇

目录 1.概念 1.1.数组与集合的区别，用过哪些？ 1.2.说说Java中的集合？ 1.3.Java中的线程安全的集合是什么？ 1.4.集合遍历的方法有哪些？ 2.List 2.1.list可以一边遍历一边修改元素吗？ 2.2.Arraylist和…...

编程日记 2025/3/7 6:20:43

plt和cv2有不同的图像表示方式和颜色通道顺序

在处理图像时，matplotlib.pyplot (简称 plt) 和 OpenCV (简称 cv2) 有不同的图像表示方式和颜色通道顺序。了解这些区别对于正确处理和显示图像非常重要。 1. 图像形状和颜色通道顺序 matplotlib.pyplot (plt) 形状：plt 通常使用 (height, width, cha…...

编程日记 2025/3/7 6:19:41

Sqlserver安全篇之_手工创建TLS用到的pfx证书文件

Sqlserver官方提供的Windows Powershell脚本 https://learn.microsoft.com/zh-cn/sql/database-engine/configure-windows/configure-sql-server-encryption?viewsql-server-ver16 # Define parameters $certificateParams {Type "SSLServerAuthentication"Subje…...

编程日记 2025/3/7 6:18:38

基于RapidOCR与DeepSeek的智能表格转换技术实践

基于RapidOCR与DeepSeek的智能表格转换技术实践一、技术背景与需求场景在金融分析、数据报表处理等领域，存在大量图片格式的表格数据需要结构化处理。本文介绍基于开源RapidOCR表格识别与DeepSeek大模型的智能转换方案，实现以下典型场景： …...

编程日记 2025/3/7 6:16:36

创建阿里云CDN

创建阿里云CDN CDN域名管理 SSL证书上传...

编程日记 2025/3/7 6:15:34

tomcat的web管理

进入到conf cd /usr/local/tomcat/conf/备份tomcat-users.xml cp tomcat-users.xml{.,bak}编辑tomcat-users.xml vim tomcat-users.xml增加以下内容配置tomcat-users.xml <role rolename"manager-gui"/><role rolename"admin-gui"/><use…...

编程日记 2025/3/7 6:14:34

【Linux系统】-----进程初相识：原理与概念全解析

Linux系列文章目录 Linux系列前言一、进程的概念二、进程的管理三、Linux操作系统的进程管理3.1、进程标识符3.2、查看进程3.3、查看进程的PID和PPID 前言经过前两篇文章的铺垫，我们对操作系统的管理方式已经有了比较完整的认识，今天我们将学习Linux比…...

编程日记 2025/3/7 6:13:33

分布式系统设计（架构能力）

一、微服务架构服务治理 Nacos 注册中心（AP模式） CAP选择：Nacos 默认采用 AP 模式（可用性分区容忍性），通过心跳检测实现服务健康管理。服务发现：客户端定时拉取服务列表，支持权重…...

编程日记 2025/3/7 6:12:31

171. Excel 表列序号

Excel 表列序号题目描述尝试做法推荐做法题目描述给你一个字符串 columnTitle ，表示 Excel 表格中的列名称。返回该列名称对应的列序号。例如： A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1: 输入: colum…...

编程日记 2025/3/7 6:11:30

在 Java 中使用 Apache POI 为 Word 文档添加水印

在 Java 中使用 Apache POI 为 Word 文档添加水印在日常办公中，我们经常需要给 Word 文档添加水印，以标明文件的机密性或归属权。本文将介绍如何使用 Apache POI 库在 Java 中给 Word 文档添加水印。技术栈 Apache POI：用于操作 Word 文…...

编程日记 2025/3/7 6:10:29

贪心算法二

> 作者：დ旧言~ > 座右铭：松树千年终是朽，槿花一日自为荣。 > 目标：了解什么是贪心算法，并且掌握贪心算法。 > 毒鸡汤：有些事情，总是不明白，所以我不会坚持。早安! >…...

编程日记 2025/3/7 6:08:26

【大模型安全】大模型的技术风险

【大模型安全】大模型的技术风险 1.DDoS攻击2.常见的传统网络攻击方式3.恶意意图的识别4.AI生成虚假信息传播5.利用AI进行黑客攻击6.模型对抗攻击7.后门攻击8.Prompt攻击9.数据投毒攻击10.模型窃取攻击11.数据窃取攻击 1.DDoS攻击 2023年11月9日凌晨，OpenAI在官网公…...

编程日记 2025/3/7 6:07:25

Java 线程池中 shutdown 与 shutdownNow 的区别是什么？

Java 线程池中 shutdown 与 shutdownNow 的区别核心行为差异 | 方法 | 行为描述 | |----------------|----------------------------------------------------------------------------| | shutdown | 平缓关闭线程池：1. 停止接受新任务。2. 已提交的任务&#xff…...

编程日记 2025/3/7 6:04:22

基于Spring Boot的共享学习经验系统的设计与实现

目录摘要第1章　绪论 1.1研究背景与意义 1.2国内外现状 1.3研究目标第2章需求分析 2.1业务需求 2.1.1业务概述 2.1.2业务流程 2.2.1用例概述 2.2.2用例描述 2.3非功能性需求第3章　系统设计 3.1技术路线 3.2系统功能模块设计 3.3系统架构 3.4数据库设计 3.4.1概念结构设…...

编程日记 2025/3/7 6:03:21

【简单的C++围棋游戏开发示例】

C围棋游戏开发简单示例（控制台版） ‌核心代码实现‌ #include <iostream> #include <vector> #include <queue> using namespace std;const int SIZE 9; // 简化棋盘为9x9‌:ml-citation{ref"1" data"citationList&…...

编程日记 2025/3/7 6:02:19

单片机中的基础外设GPIO的知识和应用—（6）

GPIO（通用输入输出）是单片机与外部世界交互的重要接口。单片机的GPIO引脚可以灵活配置为输入、输出、中断或复用功能，广泛应用于LED控制、按键读取、传感器通信等场景。下文以STM32F103C8T6的GPIO为例。有些51单片机IO功能有的稍微有不同&…...

编程日记 2025/3/7 6:01:17

10-Agent循环分析新闻并输出总结报告

目录关键词摘要速览自动新闻总结与行业分析报告生成流程创建深度行业分析报告的工作流测试用例执行与调试业务逻辑与循环处理任务演示如何在循环体中添加链接读取工具使用大模型处理和分析新闻信息构建循环分析新闻并生成综合报告的流程分析和优化慢速循…...

编程日记 2025/3/7 6:00:16

十二、Redis Cluster（集群）详解：原理、搭建、数据分片与读写分离

Redis Cluster（集群）详解：原理、搭建、数据分片与读写分离 Redis Cluster 是 Redis 官方提供的分布式存储方案，通过数据分片（Sharding）实现水平扩展（scalability），并提供高可用性（HA）和故障自动转移（failover）能力，解决了单机 Redis 内存受限、主从复制故障…...

编程日记 2025/3/7 5:59:15

贪心算法解题框架+经典反例分析，效率提升300%

贪心算法是一种在每一步选择中都采取当前状态下的最优决策，从而希望最终达到全局最优解的算法策略。以下从其定义、特点、一般步骤、应用场景及实例等方面进行讲解： 定义与基本思想 • 贪心算法在对问题求解时，总是做出在当前看来是最好的选…...

编程日记 2025/3/7 5:57:12

策略设计模式-下单

1、定义一个下单context类通过这类来判断具体使用哪个实现类，可以通过一些枚举或者条件来判断 import com.alibaba.fastjson.JSON; import com.tc.common.exception.BusinessException; import com.tc.common.user.YjkUserDetails; import com.tc.institution.cons…...

编程日记 2025/3/7 5:56:10

Go加spy++隐藏窗口

最近发现有些软件的窗口就像狗皮膏药一样，关也关不掉，一点就要登录，属实是有点不爽了。窗口的进程不能杀死，但是窗口我不想要。思路很简单，用 spy 找到要隐藏的窗口的句柄，然后调用 Windows 的 ShowWindo…...

编程日记 2025/3/7 5:55:08

React基础之tsx语法

tsx在jsx的基础上添加了新的类型，除此之外没有任何区别事件绑定 function App() { const handleClick()>{ console.log(button被点击了); } return( <div className"App"> <button onClick{handleClick}>click me</button> </di…...

编程日记 2025/3/7 5:53:06

一体机：DeepSeek性能的“隐形枷锁”！

一体机是DeepSeek交付的最佳方式吗？ 恰恰相反，一体机是阻碍DeepSeek提升推理性能的最大绊脚石。为啥？ 只因DeepSeek这个模型有点特殊，它是个高稀疏度的MoE模型。 MoE这种混合专家模型，设计的初衷是通过“激活一堆专…...

编程日记 2025/3/7 5:51:04

目录