Vue——响应式数据，v-on，v-bind，v-if，v-for(内含项目实战)
目录
响应式数据
ref
reactive
事件绑定指令 v-on
v-on 鼠标监听事件
v-on 键盘监听事件
v-on 简写形式
属性动态化指令 v-bind
iuput标签动态属性绑定
img标签动态属性绑定
b标签动态属性绑定
v-bind 简写形式
条件渲染指令 v-if
遍历指令 v-for
遍历对象的值
遍历对象的值和索引
遍历对象的值和键
遍历对象的值，键和索引
指令嵌套
项目实战
文字按钮切换图片
v-on切换上一张
v-on切换下一张
v-bind绑定图片的路径
数字按钮跳转图片
数字按钮
跳转函数设置
跳转函数绑定
完整代码
响应式数据
响应式数据是指数据在改变时能够自动更新，我们可以通过 ref, reactive 让数据变成响应式
ref
可以定义基本类型的响应式变量
let xxx=ref(初始值)
<div id="app"> <p>个人信息：</p><p>性别：{{ gender }}</p><p>年龄：{{ age }}</p><button @click="genderChange">点击更改性别</button><br><button @click="ageChange">点击年龄加1</button></div><script type="module">// 导入响应数据类型 refimport {createApp,ref} from"./vue.esm-browser.js"createApp({setup(){let gender = "女";let age = ref(25);const genderChange=()=> {gender.value = "男";console.log("成功修改性别")}const ageChange=()=> {age.value += 1;console.log("成功加1")}return{gender,age,genderChange,ageChange}}}).mount("#app");</script>
reactive
定义对象类型数据
<div id="app"> <p>个人信息：</p><p>年龄：{{ test_1.age }}</p><p>性别：{{ test.gender }}</p><button @click="ageChange">点击年龄加1</button><br><button @click="genderChange">点击更改性别</button></div><script type="module">// 导入响应数据类型 reactiveimport {createApp,reactive} from"./vue.esm-browser.js"createApp({setup(){const test={gender:"女"};const genderChange=()=> {test.gender = "男";console.log("成功修改性别")}const test_1=reactive({age:18});const ageChange=()=> {test_1.age +=1;console.log("成功加1")}return{test,test_1,genderChange,ageChange}}}).mount("#app");</script>
事件绑定指令 v-on
用于监听DOM事件并触发对应的方法，和JS中的监听器一样，可以在HTML元素上添加事件监听器，当这个事件被触发时，会执行指定的方法。
格式：v-on : click（监听的事件如：键盘或鼠标事件）="test_2"（监听的节点）
v-on 鼠标监听事件
v-on : click（鼠标事件）="test_2"（监听的节点）
<div id="app"> <h2>{{test_1.name}}</h2><button v-on:click="test_2">单击修改名字！</button></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){初始值const test_1=reactive({name:"木木",});修改的值const test_2=()=>{test_1.name="花花"console.log("鼠标单击成功！");}返回的值return{test_1,test_2,}}}).mount("#app");</script>
单击按钮后
v-on 键盘监听事件
v-on : keyup . v（监听键盘“ v ”）="test_2" （监听的节点）
enter space tab 按键修饰符
keyup是在用户松开按键时才触发
keydown是在用户按下按键时立即触发
<div id="app"> <h2>{{test_1.name}}</h2><button v-on:keyup.v="test_2">按下键盘v即可修改名字!</button></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){
初始值 const test_1 = reactive({name: "花花",});
修改值 const test_2 = () => {test_1.name ="木木",console.log("键盘修改名字成功！");}
返回值return{test_1,test_2,}}}).mount("#app");</script>
按下键盘前
按下键盘后 
v-on 键盘组合快捷键：
<button v-on:keyup.ctrl.enter="test_2">按下ctrl+enter即可修改名字!</button><button v-on:keyup.ctrl.a="test_2">按下ctrl+a即可修改名字!</button>v-on 简写形式
将 v-on: click 改为 @click 即为简写状态
以下为v-on 键盘事件和鼠标事件的简写形式：<button @click="test_2">单击修改名字！</button><button @keyup.enter="test_2">按下键盘enter即可修改名字!</button>
<button @keyup.Tab="test_2">按下键盘Tab即可修改名字!</button>
<button @keyup.space="test_2">按下键盘enter即可修改名字!</button>属性动态化指令 v-bind
用于将数据绑定到HTML元素的属性上。通过v-bind，将Vue的数据动态地绑定到HTML标签的属性上，可以动态显示数据。v-bind指令可以用于绑定HTML元素的任何属性。
格式： v-bind : src（标签内属性） = "test.img"
iuput标签动态属性绑定
<div id="app"> <img v-bind:src="test.img" ><br><button @click="change">单击更换照片</button></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){const test=reactive({img:"./img_src/logo1.png",});const change=()=>{test.img=`./img_src/logo2.png`;console.log("成功更换照片");}return{test,change,}}}).mount("#app");</script>
img标签动态属性绑定
<div id="app"> <input type="text" v-bind:value="test.word"><br><button @click="change">单击补充句子</button></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){const test=reactive({word:"I need ",});const change=()=>{test.word+="you";console.log("句子补充完整啦!")}return{test,change,}}}).mount("#app");</script> 单击前
单击后 
b标签动态属性绑定
<style>.wordColor{color: blue;}</style>
</head>
<body><div id="app"> <b v-bind:class="{wordColor:test.wordStatu}">你好!!</b><br><button @click="change">单击更改文字颜色</button></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){
设置控制文本颜色的开关为 falseconst test=reactive({wordStatu: false});
当用户单击后，控制文本颜色的开关为 trueconst change=()=>{test.wordStatu=!test.wordStatu;console.log("颜色更改成功!");}return{test,change,}}}).mount("#app");
单击后 
v-bind 简写形式
<img :src="test.img" >
<input type="text" :value="test.word">
<b :class="{wordColor:test.wordStatu}">你好!!</b>条件渲染指令 v-if
可以隐藏节点，v-if是通过删除节点实现隐藏。当遇到需要频繁显示和隐藏的场景时，不适合使用v-if， 因为频繁增删节点，会导致渲染效率下降
<div id="app"> <b v-if="test.word">你好!!</b><br><button @click="change">单击隐藏文字</button></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){const test=reactive({word: true});const change=()=>{test.word=!test.word;}return{test,change,}}}).mount("#app");</script>
可以通过特定的条件来决定是否显示或隐藏特定的DOM元素，当条件为真时，v-if指令将元素添加到DOM中；当条件为假时，v-if指令将元素从DOM中移除。
<div id="app"> <p>{{test.watch}}w</p><p v-if="test.watch<=100">一般浏览量</p><p v-else-if="test.watch>100 && test.watch<=300">浏览量持续上升</p><p v-else-if="test.watch>300 && test.watch<=600">浏览量向千靠拢啦!努努力!</p><p v-else>恭喜你,火啦!!</p><button @click="add(40,50)">单击增加流量</button></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){const test=reactive({watch:0});const add=(a,b)=>{test.watch+=a+bconsole.log("浏览量为"+test.watch);}return{test,add}}}).mount("#app");</script>
单击后
遍历指令 v-for
指定一个数组或对象作为遍历的数据源，然后使用v-for指令来迭代数据源中的每一项
v-for = "（value值，index索引，key键 ）in test.user（要遍历的数据源）"
遍历对象的值
<div id="app"> 遍历数组内的值： <p v-for="value in test.user">{{value}}</p></div>const test=reactive({user:{name:"木木",age:22,sex:"男",hobby:"读书"},number:["十一","十二","十三"]});return{test,}
遍历对象的值和索引
写指令时，先值后索引
<div id="app"> <p v-for="(value,index) in test.number">{{ index }} : {{ value }}
</p></div><script type="module">import {createApp,ref,reactive} from"./vue.esm-browser.js"createApp({setup(){const test=reactive({user:{name:"木木",age:22,sex:"男",hobby:"读书"},number:["十一","十二","十三"]});return{test,}}}).mount("#app");</script>
遍历对象的值和键
写指令时，先值后键
<p v-for="(value,key) in test.user">{{ key }} : {{ value }}
</p>
遍历对象的值，键和索引
写指令时，先值再键后索引
<p v-for="(value,key,index) in test.user">{{index}}: {{ key }} : {{ value }}
</p>
指令嵌套
<template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染
<template v-for="(value,key,index) in test.user"><p v-if="index == 0"> {{ index }} : {{ key }} : {{ value }}</p>
</template> 指令嵌套 运行结果
项目实战
做一个动态相册，如下图：
解析：
用v-on为切换相片的按钮绑定上一个函数，这个函数负责更改图片路径；
v-bind绑定图片的路径，使得图片路径可以自动更新
文字按钮切换图片
v-on切换上一张
注：图片的命名要有顺序的命名，方便实现功能
当我们点击上一张时，照片的数量是在不断减少的，并伴随着照片路径的更改
我们可以先给照片的数量和路径做一个初始值的设置；其次用函数来控制照片的数量及路径的改变；最后将函数绑定到按键上，通过v-on来监听鼠标事件并触发对应的方法
初始值的设置
const img=reactive({
照片数量 num:1,
照片的路径 url:"./img_src/logo1.png"});照片数量及路径的改变
上一张： const nagtive=()=>{
设置照片数量自减 img.num--
当照片数减到0时 if(img.num==0){
使照片数等于4 img.num=4
这样就实现了一个循环的效果！ }照片路径的改变 img.url=`./img_src/logo${img.num}.png`
照片的路径随照片数改变 }v-on绑定按钮
<button @click="nagtive">上一张</button> v-on切换下一张
步骤与上面大庭相近，不同的是，当我们点击下一张时，照片的数量不断增加的，所以我们可以将上面自减的设置改为自加
const add=()=>{
照片数自加 img.num++
当到数量为5时 if(img.num==5){
使照片数回到1 img.num=1;
达到循环的效果 }照片路径随照片数改变 img.url=`./img_src/logo${img.num}.png`}<button @click="add">下一张</button>v-bind绑定图片的路径
<img v-bind:src = "img.url" class="img" alt="图片加载失败">数字按钮跳转图片
数字按钮
利用遍历指令v-for来遍历 数据源(4) 以内的值，数字按钮就出来了
<ul type="none" ><li v-for="value in 4">{{value}}</li></ul>跳转函数设置
创建一个函数，这里命名为"jump",通过函数jump 调用v-for所遍历的值（value）；将照片和路径绑定到数字按钮，第1张照片与数字按钮1绑定，以此类推
const jump=(value)=>{img.num=value;img.url=`./img_src/logo${img.num}.png`}跳转函数绑定
通过v-on将跳转函数绑定到数字按钮上，监听鼠标事件并触发对应的方法
<ul type="none" class="box"><li v-for="value in 4" @click="jump(value)">{{value}}</li></ul>完整代码
<head><meta charset="UTF-8"><title>相册</title><style>
样式设置.img{width: 480px; height: 240px;border: 1px bisque solid;}.box{margin-bottom: 20px;padding: 0;}ul li{float: left;background-color: bisque;height: 20px;width: 20px;margin-left: 10px;text-align: center;}</style>
</head><body><div id="app">
相册基本骨架<h2>基于Vue3实现的相册：展示第{{img.num}}张相片</h2><img v-bind:src = "img.url" class="img" alt="图片加载失败"> <ul type="none" class="box"><li v-for="value in 4" @click="jump(value)">{{value}}</li></ul><br><button @click="nagtive">上一张</button> <button @click="add">下一张</button></div><script type="module">import { createApp, ref,reactive } from './vue.esm-browser.js'createApp({setup(){
初始值const img=reactive({num:1,url:"./img_src/logo1.png"});下一张 const add=()=>{img.num++if(img.num==5){img.num=1;}img.url=`./img_src/logo${img.num}.png`}
上一张const nagtive=()=>{img.num--if(img.num==0){img.num=4}img.url=`./img_src/logo${img.num}.png`}
跳转const jump=(value)=>{img.num=value;img.url=`./img_src/logo${img.num}.png`}return{img,add,nagtive,jump,}}}).mount("#app");</script>
</body>相关文章：
)
Vue——响应式数据，v-on，v-bind，v-if，v-for(内含项目实战)
目录 响应式数据 ref reactive 事件绑定指令 v-on v-on 鼠标监听事件 v-on 键盘监听事件 v-on 简写形式 属性动态化指令 v-bind iuput标签动态属性绑定 img标签动态属性绑定 b标签动态属性绑定 v-bind 简写形式 条件渲染指令 v-if 遍历指令 v-for 遍历对象的值 遍历…...
Vue实训---1-创建Vue3项目
0-在VSCode中的终端中运行npm -v查看版本号 如果出现——“npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1，因为在此系统上禁止运行脚本。……”的错误，则需要在 vscode 终端执行 Set-ExecutionPolicy -Scope CurrentUser RemoteSigned 命令即可。…...
设计模式之观察者模式
背景 假如我们现在有这样一个场景：市场上的股票价格不定时变化，而后台监控者和广告想要实时获取股票信息，我们应该怎么做？ 显然在这个场景里，我们有这样一个设计 一个股票类不时更新股票价格另外有两个类Monitor和Bi…...
Vue.js 学习总结（13）—— Vue3 version 计数介绍
前言 Vue3.5 提出了两个重要概念：version计数和双向链表，作为在内存和计算方面性能提升的最大功臣。既然都重要，那就单挑 version 计数来介绍，它在依赖追踪过程中，起到快速判断依赖项有没有更新的作用，所以…...
数据结构 ——— 直接选择排序算法的实现
目录 直接选择排序算法的思想 优化直接选择排序算法的思想 代码实现（默认升序） 直接选择排序算法的思想 直接选择排序算法的思想类似与直接插入排序 区别在于从大到小选择最小的元素或者最大的元素直接放在元素应该停留的位置每次从待排序的元素中选…...
初始Python篇（5）—— 集合
找往期文章包括但不限于本期文章中不懂的知识点： 个人主页：我要学编程(ಥ_ಥ)-CSDN博客 所属专栏： Python 目录 集合 相关概念 集合的创建与删除 集合的操作符 集合的相关操作方法 集合的遍历 集合生成式 列表、元组、字典、集合的…...
基于Qt/C++/Opencv实现的一个视频中二维码解析软件
本文详细讲解了如何利用 Qt 和 OpenCV 实现一个可从视频和图片中检测二维码的软件。代码实现了视频解码、多线程处理和界面更新等功能，是一个典型的跨线程图像处理项目。以下分模块对代码进行解析。 一、项目的整体结构 项目分为以下几部分： 主窗口 (M…...
图片生成视频-右进
右侧进入 ffmpeg -loop 1 -i image.jpg -f lavfi -i colorcblack:s1280x720:d20 -filter_complex "[1:v]formatrgba[bg];[0:v]formatrgba,scale1280:720[img];[bg][img]overlayxif(lt(t,3),W,if(lt(t,8),W-(t-3)*W/5,0)):y(H-h)/2:enablegte(t,3)" -c:v libx264 -t 2…...
Golang的语言特性与鸭子类型
Golang的语言特性与鸭子类型 前言 什么是鸭子类型？ Suppose you see a bird walking around in a farm yard. This bird has no label that says ‘duck’. But the bird certainly looks like a duck. Also, he goes to the pond and you notice that he swims l…...
Spring Boot 3.x + OAuth 2.0：构建认证授权服务与资源服务器
Spring Boot 3.x OAuth 2.0：构建认证授权服务与资源服务器 前言 随着Spring Boot 3的发布，我们迎来了许多新特性和改进，其中包括对Spring Security和OAuth 2.0的更好支持。本文将详细介绍如何在Spring Boot 3.x版本中集成OAuth 2.0…...
Centos-stream 9,10 add repo
Centos-stream repo前言 Centos-stream 9，10更换在线阿里云创建一键更换repo 自动化脚本 华为centos-stream 源 , 阿里云centos-stream 源 华为epel 源 , 阿里云epel 源vim /centos9_10_repo.sh #!/bin/bash # -*- coding: utf-8 -*- # Author: make.h...
手机发展史介绍
手机，这个曾经在电影和科幻小说中出现的高科技产品，如今已经渗透进了我们生活的每个角落。从单纯的通讯工具到如今集成了通讯、娱乐、工作、社交等多种功能的智能终端，手机的发展史也是人类科技进步的缩影。本文将从手机的发展历程、技术革新…...
七天掌握SQL---＞第五天：数据库安全与权限管理
1.1 用户权限管理 用户权限管理是指控制用户对数据库的访问和操作权限。在MySQL中，可以使用GRANT和REVOKE命令来管理用户权限。 GRANT命令用于授予用户权限。语法如下： GRANT privileges ON database.table TO userhost IDENTIFIED BY password;其中&…...
Oracle-表空间/用户的创建与使用
-- 对象 -- 需要create的都是对象 已学的对象：表 table -- 普通用户 只能查询user开头的数据字典 select tablespace_name from user_tablespaces; -- dba用户才能够查询 select tablespace_name from dba_tablespaces; -- 创建表空间（需要管理员…...
生成对抗网络模拟缺失数据，辅助PAMAP2数据集仿真实验
PAMAP2数据集是一个包含丰富身体活动信息的数据集，它为我们提供了一个理想的平台来开发和测试HAR模型。本文将从数据集的基本介绍开始，逐步引导大家通过数据分割、预处理、模型训练，到最终的性能评估，在接下来的章节中，…...
表格数据处理中大语言模型的微调优化策略研究
论文地址 Research on Fine-Tuning Optimization Strategies for Large Language Models in Tabular Data Processing 论文主要内容 这篇论文的主要内容是研究大型语言模型（LLMs）在处理表格数据时的微调优化策略。具体来说，论文探讨了以下…...
卡达掐发展史
自行车是一种简单而又伟大的交通工具。自从19世纪诞生以来，它不仅改变了人们的出行方式，也深刻地影响了我们的生活方式、城市布局以及健康观念。作为一种绿色、经济的出行工具，自行车至今仍在全球范围内被广泛使用。本文将从自行车的历史、结…...
初学 flutter 问题记录
windows搭建flutter运行环境 一、运行 flutter doctor遇到的问题 Xcmdline-tools component is missingRun path/to/sdkmanager --install "cmdline-tools;latest"See https://developer.android.com/studio/command-line for more details.1）cmdline-to…...
大数据实验4-HBase
一、实验目的 阐述HBase在Hadoop体系结构中的角色；能够掌握HBase的安装和配置方法熟练使用HBase操作常用的Shell命令； 二、实验要求 学习HBase的安装步骤，并掌握HBase的基本操作命令的使用； 三、实验平台 操作系统࿱…...
CentOS：A服务器主动给B服务器推送（上传），B服务器下载A服务器文件（下载）
Linux：常识（bash: ip command not found ）_bash: ip: command not found-CSDN博客 rsync 中断后先判断程序是否自动重连：ps aux | grep rsync 查看目录/文件是否被使用（查询线程占用）：lsof /usr/local/bin/mongodump/.B_database1.6uRCTp 场景：MongoDB中集合非常大需要…...
如何选择服务器
如何选择服务器 选择服务器时应考虑以下几个关键因素： 性能需求。根据网站的预期流量和负载情况，选择合适的处理器、内存和存储容量。考虑网站是否需要处理大量动态内容或高分辨率媒体文件。 可扩展性。选择一个可以轻松扩展的服务器架构，以便…...
el-table最大高度无法滚动
解决el-table同时使用fixed和计算的最大高度时固定右边的列无法跟随滚动的问题 原因：el-table组件会根据传入的 max-height 计算表格内容部分 和 fixed部分的最大高度，以此来生成滚动条和产生滚动效果，当传入的 max-height 为一个计算的高度…...
YOLO-FaceV2: A Scale and Occlusion Aware Face Detector
《YOLO-FaceV2:一种尺度与遮挡感知的人脸检测器》 1.引言2.相关工作3.YOLO-FaceV23.1网络结构3.2尺度感知RFE模型3.3遮挡感知排斥损失3.4遮挡感知注意力网络3.5样本加权函数3.6Anchor设计策略3.7 归一化高斯Wasserstein距离 4.实验4.1 数据集4.2 训练4.3 消融实验4.3.1 SEAM块4…...
如何使用 Python 开发一个简单的文本数据转换为 Excel 工具
目录 一、准备工作 二、理解文本数据格式 三、开发文本数据转换为Excel工具 读取CSV文件 将DataFrame写入Excel文件 处理其他格式的文本数据 读取纯文本文件： 读取TSV文件： 四、完整代码与工具封装 五、使用工具 六、总结 在数据分析和处理的日常工作中，我们经常…...
全卷积网络（Fully Convolutional Networks, FCN）
全卷积网络（Fully Convolutional Networks, FCN） 什么是 FCN？ 全卷积网络（Fully Convolutional Networks, FCN）是一种用于图像语义分割的深度学习模型。与传统的卷积神经网络（CNN）不同&#x…...
【计算机网络】HTTP协议
一、网址 1.URL URL就是我们平时说的网址 2.urlencode/urldecode 像 / ? : 等这样的字符，已经被url当做特殊意义理解了。因此这些字符不能随意出现 如果某个参数中需要带有这些特殊字符，就必须先对特殊字符进行转义 -> urlencode 服务器收到url…...
IT服务团队建设与管理
在 IT 服务团队中，需要明确各种角色。例如系统管理员负责服务器和网络设备的维护与管理；软件工程师专注于软件的开发、测试和维护；运维工程师则保障系统的稳定运行，包括监控、故障排除等。通过清晰地定义每个角色的职责࿰…...
STM32总体架构简单介绍
目录 一、引言 二、STM32的总体架构 1、三个被动单元 （1）内部SRAM （2）内部闪存存储器 （3）AHB到APB的桥（AHB to APBx） 2、四个主动（驱动）单元 &#x…...
C++自动化测试：GTest 与 GitLab CI/CD 的完美融合
在现代软件开发中，自动化测试是保证代码质量和稳定性的关键手段。对于C项目而言，自动化测试尤为重要，它能有效捕捉代码中的潜在缺陷，提高代码的可维护性和可靠性。本文将重点介绍如何在C项目中结合使用Google Test（GTe…...
Python 虚拟环境使用指南
Python 虚拟环境使用指南 博客 一、创建虚拟环境 在开始使用Python虚拟环境之前，我们需要先创建一个新的虚拟环境。 1. 基础创建流程 首先，进入您的项目目录： cd path\to\your\project然后使用以下命令创建虚拟环境： pytho…...
MySQL面试-1
InnoDB中ACID的实现 先说一下原子性是怎么实现的。 事务要么失败，要么成功，不能做一半。聪明的InnoDB，在干活儿之前，先将要做的事情记录到一个叫undo log的日志文件中，如果失败了或者主动rollback，就可以通…...
Harbor2.11.1生成自签证和配置HTTPS访问
文章目录 HTTPS的工作流程部署Harbor可参考上一篇文章生成自签证书1.修改/etc/hosts文件2.生成证书a.创建存放证书路径b.创建ca.key密钥c.创建ca.crtd.创建给Harbor服务器使用密钥 yunzhidong.harbor.com.keye.创建给Harbor服务器使用证书签名请求文件 yunzhidong.harbor.com.c…...
鸿蒙开发Hvigor插件动态生成代码
Hvigor允许开发者实现自己的插件，开发者可以定义自己的构建逻辑，并与他人共享。Hvigor主要提供了两种方式来实现插件：基于hvigorfile脚本开发插件、基于typescript项目开发。下面以基于hvigorfile脚本开发插件进行介绍。 基于hvigorfile脚本…...
VSCode 新建 Python 包/模块 Pylance 无法解析
问题描述： 利用 VSCode 写代码，在项目里新建一个 Python 包或者模块，然后在其他文件里正常导入这个包或者模块时出现： Import “xxxx” could not be resolved Pylance (reportMissingImports) 也就是说 Pylance 此时无法解析我们…...
【论文笔记】Number it: Temporal Grounding Videos like Flipping Manga
🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心，为生民立命，为往圣继绝学，为万世开太平。 基本信息 标题: Number it: Temporal Grou…...
【C++】list模拟实现（详解）
本篇来详细说一下list的模拟实现，list的大体框架实现会比较简单，难的是list的iterator的实现。我们模拟实现的是带哨兵位头结点的list。 1.准备工作 为了不和C库里面的list冲突，我们在实现的时候用命名空间隔开。 //list.h #pragma once #…...
Java基础-组件及事件处理（下）
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 面板组件 说明 常见组件 JScrollPane常用构造方法 JScrollPane设置面板滚动策略的方法 JScrollPane滚…...
)
太通透了，Android 流程分析 蓝牙enable流程(应用层/Framework/Service层)
零. 前言 由于Bluedroid的介绍文档有限，以及对Android的一些基本的知识需要了(Android 四大组件/AIDL/Framework/Binder机制/JNI/HIDL等)，加上需要掌握的语言包括Java/C/C等，加上网络上其实没有一个完整的介绍Bluedroid系列的文档࿰…...
《硬件架构的艺术》笔记（五）：低功耗设计
介绍 能量以热量形式消耗，温度升高芯片失效率也会增加，增加散热片或风扇会增加整体重量和成本，在SoC级别对功耗进行控制就可以减少甚至可能消除掉这些开支，产品也更小更便宜更可靠。本章描述了减少动态功耗和静态功耗的各种技术。…...
【Ubuntu24.04】服务部署（虚拟机）
目录 0 背景1 安装虚拟机1.1 下载虚拟机软件1.2 安装虚拟机软件1.2 安装虚拟电脑 2 配置虚拟机2.1 配置虚拟机网络及运行初始化脚本2.2 配置服务运行环境2.2.1 安装并配置JDK172.2.2 安装并配置MySQL8.42.2.3 安装并配置Redis 3 部署服务4 总结 0 背景 你的服务部署在了你的计算…...
Java基础-组件及事件处理（中）
(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹） 目录 BorderLayout布局管理器 说明： 示例： FlowLayout布局管理器 说明： …...
从零开始学习数据库 day0（基础）
在当今的信息时代，数据已经成为了企业和组织最重要的资产之一。无论是电子商务平台，社交媒体，还是科研机构，几乎每个地方都离不开数据库。今天，我们将一起走进数据库的世界，学习它的基础知识，帮…...
【淘汰9成NLP面试者的高频面题】LSTM中的tanh和sigmoid分别用在什么地方？为什么？
博客主页： [青松] 本文专栏: NLP 大模型百面百过 【淘汰9成NLP面试者的高频面题】LSTM中的tanh和sigmoid分别用在什么地方？为什么？ 重要性：★★★ 💯 本题主要考察面试者对以下问题的理解： ① 数据特征和模…...
linux从0到1——shell编程9
声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...
【源码+文档+调试讲解】基于Hadoop实现的豆瓣电子图书推荐系统的设计与实现
摘 要 随着开数字化阅读的普及，豆瓣电子图书推荐系统应运而生，旨在为用户提供个性化的阅读体验。基于Hadoop的强大数据处理能力，该系统能够有效处理海量用户数据和书籍信息，通过复杂的算法模型为用户推荐高质量的内容。管理员功能…...
内存分配与回收策略
对象优先在Eden分配 大多数情况下，对象在新生代Eden中分配，当Eden区没有足够的空间按进行分配时，虚拟机将会引发一次Minor GC 。 在运行时通过-Xms20M、-Xmx20M、-Xmn10M这三个参数限制了Java 堆大小为20MB，不可扩展，…...
实时数据开发 | 怎么通俗理解Flink容错机制，提到的checkpoint、barrier、Savepoint、sink都是什么
今天学Flink的关键技术–容错机制，用一些通俗的比喻来讲这个复杂的过程。参考自《离线和实时大数据开发实战》 需要先回顾昨天发的Flink关键概念 检查点（checkpoint） Flink容错机制的核心是分布式数据流和状态的快照，从而当分布…...
android-sdk 安装脚本
android-sdk 安装脚本 androidSdk_install.sh #!/bin/bash #[描述] android-sdk 安装# set -eu shopt -s expand_aliasesAndroid_SDK_D/app5/android-sdk-home/JAVA17_D/app/zulu17.48.15-ca-jdk17.0.10-linux_x64/#jdk17下载、解压 #https://www.azul.com/downloads/?version…...
【jvm】解释器
目录 1. 说明2. 工作原理3. 特点4. JVM解释器与JIT编译器的关系5. JVM解释器的优化 1. 说明 1.JVM（Java虚拟机）解释器是JVM的一个重要组成部分，负责将Java字节码指令翻译并执行为本地机器码。 2. 工作原理 1.读取字节码指令：JV…...
Node.js 安装与环境配置详解：从入门到实战
**标题：Node.js 安装与环境配置详解：从入门到实战** --- ### 一、Node.js 简介 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，允许开发者在服务器端运行 JavaScript 代码。凭借其事件驱动、非阻塞 I/O 模型，Nod…...