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

Vue的学习(二)

目录

一、class及style的绑定

1.v-bind:class绑定类名 绑定class为对象

​编辑2. v-bind:class绑定类名 绑定class为对象

3.v-bind:class绑定类名 绑定class为数组 

1) v-bind:class绑定类名 绑定class为数组  方法一:

2) v-bind:class绑定类名 绑定class为数组  方法二: 

4.v-bind:class绑定类名 绑定style为对象 

5.v-bind:class绑定类名 绑定style为数组

二、数据的单向绑定

1.介绍 

2.单向绑定v-bind

3.双向绑定v-model

三、事件修饰符 

1.   .stop 阻止冒泡(event.stopPropagation())

2.   .prevent阻止默认事件 

3.    .captrue 捕获 

4.  .self只触发自身

5..once只触发一次

四、结束语


一、class及style的绑定

1.v-bind:class绑定类名 绑定class为对象

代码展示

这里我们定义了一个active的类名,一个bgColor的类名,并为其添加样式,使用v-bind绑定,在vue实例中让其为true,那么我们就可以看到我们写的样式添加到了div盒子上。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><div id="app"><div class="box" v-bind:class="{active:a,bgColor:b}"><div>1 v-bind:class绑定类名 绑定class为对象</div></div></div><script>const app = new Vue({el: "#app",data: {a: true,b: true,}})</script>
</body></html>

运行结果如下

如果让其为false那么样式就不会再添加到div盒子上了。

2. v-bind:class绑定类名 绑定class为对象

在这个案例中我们绑定一个class为对象,在vue实例中使用,这里我们让active为false让bgColor为true,那么大家可以想一下结果是什么样的。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><d<div class="box" v-bind:class="objCls"><div>2 v-bind:class绑定类名 绑定class为对象</div></div></div><script>const app = new Vue({el: "#app",data: {objCls: {active: false,bgColor: true},}})</script>
</body></html>

运行结果:我们可以看到只有背景颜色添加上了,但是文字颜色没有添加上,是因为我们让active为false

3.v-bind:class绑定类名 绑定class为数组 

1) v-bind:class绑定类名 绑定class为数组  方法一:

第一种方法是将数组中的数据写在data()中

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><di<div class="box" v-bind:class="[classA,classB]"><div>3 v-bind:class绑定类名 绑定class为数组</div></div></div><script>const app = new Vue({el: "#app",data: {classA: "active",classB: "bgColor",}})</script>
</body></html>

运行结果

2) v-bind:class绑定类名 绑定class为数组  方法二: 

第二种子写法是直接将数组写在data()中,运行结果也是一样的。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}.active {color: aqua}.bgColor {background-color: red;}</style>
</head><body><div id="app"><div class="box" v-bind:class="[classA,classB]"><div>4 v-bind:class绑定类名 绑定class为数组 {{[ classArr ]}}</div></div></div><script>const app = new Vue({el: "#app",data(){classArr: ["active", "bgClor"],}})</script>
</body></html>

运行结果

4.v-bind:class绑定类名 绑定style为对象 

如下代码块,我们一种可以给css属性(代码中是color和fontsize)一个名字然后在data() 数据中使用,或者在div中直接写backgroundColor:'gray'。

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}</style>
</head><body><div id="app"><div class="box" v-bind:style="{color:activeColor,fontSize:ftSize,backgroundColor:'gray' }"><div>5 v-bind:class绑定类名 绑定style为对象</div></div></div><script>const app = new Vue({el: "#app",data: {activeColor: "red",ftSize: "22px",}})</script>
</body></html>

运行结果如下

5.v-bind:class绑定类名 绑定style为数组

 同样的我们还可以绑定style为数组,在data()中将数据添加进去

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid green;}</style>
</head><body><div id="app"><div class="box" v-bind:style="[styleA,styleB]"><div>6 v-bind:class绑定类名 绑定style为数组</div></div></div><script>const app = new Vue({el: "#app",data: {styleA: {color: "red",backgroundColor: "green"},styleB: {fontsize: '22px'}}})</script>
</body></html>

运行结果

二、数据的单向绑定

1.介绍 

 数据发生变化会影响到视图 而v-bind绑定的数据视图变化 而数据不受影响 这就是单向的数据

 v-model 双向数据绑定 数据改变则视图发生变化 视图改变 则数据响应发生变化

代码展示

2.单向绑定v-bind

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script>
</head><body><div id="app"><input type="text" :value="msg"></div><script>const app = new Vue({el: "#app",data: {msg: 'hello Vue!!!'}})</script>
</body></html>

运行结果

在这个input框中我们添加上11111但是在vue中并没有发生数据的改变

3.双向绑定v-model

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script>
</head><body><div id="app"><input type="text" v-model="msg"></div><script>const app = new Vue({el: "#app",data: {msg: 'hello Vue!!!'}})</script>
</body></html>

 运行结果

在这里我们可以清楚的看到数据会跟随着input的内容发生了变化,这就是单向绑定与双向绑定的不同之处。

三、事件修饰符 

1.   .stop 阻止冒泡(event.stopPropagation())

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>1 .stop 阻止冒泡(event.stopPropagation())</div><div class="div" @click="fn"><button @click="fn1">点我1</button><button @click.stop="fn2">点我2</button></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},}})</script>
</body></html>

运行结果

当我们点击外部div时触发fn()事件在控制台显示,fn()函数中打印的内容,当我们点击点我1在控制台打印时,事件会进行冒泡打印出fn()以及fn1()的内容,但是我们为点我2按钮添加了stop事件修饰符,我们可以看到只打印了fn3()中的内容,防止事件进行了冒泡。

2.   .prevent阻止默认事件 

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>2 .prevent阻止默认事件</div><div class="div" @click="fn"><a href="https://www.baidu.com" @click="fn3">百度一下1</a><a href="https://www.baidu.com" @click.prevent="fn3">百度一下2</a><a href="https://www.baidu.com" @click.prevent.stop="fn3">百度一下3</a></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>

运行结果

  • 点击外部的div盒子只触发了fn()事件并且打印到控制台
  • 点击第一个百度一下会直接跳转到百度网页
  • 点击第二个百度一下并不会跳转直接打印到了控制台,但是事件同时进行了冒泡打印出fn()事件中的内容
  • 点击第三个被百度一下我们添加了 .prevent阻止默认事件以及stop修饰符,这时候就没有进行跳转并且阻止了冒泡。

3.    .captrue 捕获 

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>3 .captrue 捕获</div><div class="div" @click="fn"><button @click="fn1">点我1</button></div><div class="div" @click.capture="fn"><button @click="fn2">点我2</button></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>

运行结果

当我们点击外部div时,还是一样触发fn()事件,当我们点击点我1时事件发生冒泡,如果我们添加上  .captrue事件那么就会从外向内触发,就是捕获。

4.  .self只触发自身

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>4 .self只触发自身</div><div class="div" @click.self="fn"><button @click="fn1">点我</button></div></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>

 运行结果

点击外部div还是一样只触发外部,当我们添加上self修饰符那么事件就只会触发自身不会进行冒泡

5..once只触发一次

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./../day_01/js/vue.js"></script><style>.box {margin: 10px 0;padding: 10px;border: 1px solid red;}.div {border: 1px solid red;margin-top: 10px;padding: 10px;}</style>
</head><body><div id="app"><div class="box"><div>5 .once只触发一次</div><button @click.once="fn1">点我</button></div></div><script>const app = new Vue({el: "#app",data: {},methods: {fn() {console.log("我是外层div")},fn1() {console.log("我是内部的button按钮1")},fn2() {console.log("我是内部的button按钮2")},fn3() {console.log("百度一下")}}})</script>
</body></html>

 运行结果

这里可以点击多次,但只触发了一次,这里没有办法进行展示,大家可以自行尝试一下。

四、结束语

那么这一节的内容到这里就结束了,大家一定要多次进行尝试, 在写js时一定要多打开控制台查看一下。这一节主要学习了,数据的绑定以及事件修饰符,期待下一次与各位宝子再次进行交流,我们下一节再见哦~。

相关文章:

Vue的学习(二)

目录 一、class及style的绑定 1.v-bind:class绑定类名 绑定class为对象 ​编辑2. v-bind:class绑定类名 绑定class为对象 3.v-bind:class绑定类名 绑定class为数组 1) v-bind:class绑定类名 绑定class为数组 方法一&#xff1a; 2) v-bind:class绑定类名 绑定class为数组…...

PointNet和PointNet++论文解读

目录 一、导言 二、PointNet介绍 三、PointNet网络结构 1、损失函数 2、正则化 四、PointNet 1、分层次的点集抽象层 一、导言 PointNet来自CVPR2017&#xff0c;是最早直接处理点云数据用于计算机视觉的模型&#xff0c;并运用于分割、检测、场景理解任务&#xff0c;P…...

Pytest测试报告生成专题

在 pytest 中,你可以使用多个选项生成不同格式的测试报告。以下是几种常用的生成测试报告的方法: 1. 生成简单的测试结果文件 你可以使用 pytest 的 --junitxml 选项生成一个 XML 格式的测试报告,这个报告可以与 CI/CD 工具集成。 pytest --junitxml=report.xml这将在当前…...

【在Python中读取Excel文件内容】

在Python中读取Excel文件内容&#xff0c;常用的库有xlrd&#xff08;主要用于读取.xls文件&#xff0c;但不支持.xlsx的较新版本&#xff09;&#xff0c;以及openpyxl&#xff08;专门用于读取和写入.xlsx文件&#xff09;和pandas&#xff08;提供了一个更高级别的接口来处理…...

尚品汇-首页三级分类实现-nginx静态代理生成的静态页面(二十六)

目录&#xff1a; &#xff08;1&#xff09;问题详解 &#xff08;2&#xff09;首页商品分类实现 &#xff08;3&#xff09;修改web-all模块 &#xff08;4&#xff09;页面渲染 &#xff08;1&#xff09;问题详解 &#xff08;2&#xff09;首页商品分类实现 前面做了…...

HTML 段落

HTML 段落 概述 HTML&#xff08;超文本标记语言&#xff09;是构建网页的标准语言&#xff0c;而段落是构成网页内容的基本单元。在HTML中&#xff0c;段落是通过<p>标签来定义的。本文将详细介绍HTML段落的相关知识&#xff0c;包括段落的基本结构、样式设置、以及在…...

Http自定义Header导致的跨域问题

最近写一个小项目&#xff0c;前后端分离&#xff0c;在调试过程中访问远程接口&#xff0c;出现了CORS问题&#xff0c;接口使用的laravel框架&#xff0c;于是添加了解决跨域的中间件&#xff0c;但是前端显示仍存在跨域问题&#xff0c;以为自己写的有问题&#xff0c;检查了…...

20240805 每日AI必读资讯

世界首例&#xff01;AI机器人做牙科手术&#xff0c;8倍速诊疗比人类医生更精准 - Perceptive&#xff1a;让人工智能控制的自主机器人&#xff0c;首次对人类患者进行了全过程的牙科手术&#xff0c;速度大约是人类牙医的8倍。 - 两项新技术 1、OCT 3D成像系统&#xff1a;…...

COMSOL金属氢化物-放氢过程

在此记录下放氢过程的软件设置思路 1、采用的是"达西定律""层流" 物理场&#xff0c;其中"层流"物理场选择了”弱可压缩流动“&#xff0c;这里主要是选择”可压缩流动“的话&#xff0c;算出来的瞬时流量值跟实测差距太大了。 2、设置"达西…...

Unity2D在处理精灵表过程中出现不清晰的解决方法

问题阐述 在我们拿到一张精灵表的时候&#xff0c;我们通常要进行切割。但这样往往导致切割的效果不是很好&#xff0c;这里举一个简单的例子。 这是举例子用到的精灵表 我们先对他进行切割处理。 将single改为Multiope 进入精灵编辑器后&#xff0c;我们选择切割方式 此时我…...

C语言第13篇

1.下面程序是计算n个数的平均值,请填空.______ #include<stdio.h> void main( ) { int i,n; float x,avg0.0; scanf("%d",&n); for(i0;i<n;i) { scanf("%f",&x); avgavg______; } avg________; printf("avg%f\n",avg); } A) …...

Meta Reality Labs:巨额亏损背后的挑战与展望

一、财务概况 自2020年以来,Meta的Reality Labs部门累计亏损已超过450亿美元,其中2023年的亏损达到160亿美元,2024年第一季度亏损38亿美元,分析师预计第二季度亏损可能接近50亿美元。尽管投入巨大,Reality Labs的收入却呈现下降趋势,与不断增加的支出形成鲜明对比。 二…...

linux安装docker(实操教程)

一、安装前准备工作 1.查看服务器操作系统版本 2.查看服务器的操作系统内核版本 3.安装依赖包 yum install -y yum-utils device-mapper-persistent-data lvm2如果不是root用户登陆的系统&#xff0c;需要手动输入sudo -i切换到root帐户 4.设置阿里云docker-ce镜像源 yum-c…...

隐写工具steghide linux编译安装

1、git clone https://github.com/StefanoDeVuono/steghide.git 2、autoreconf -i 3、./configure 4、make 编译完成后再src目录下又steghide执行下程序 报错&#xff1a;configure: error: cannot find required auxiliary files: compile时需要执行autoreconf 如果往j…...

山寨手机 老手机 山寨平板 提高速度 cpu超频的方法360超级root和setup

第一&#xff0c;挂机 &#xff0c;按音量键 &#xff0c;看机器的配置&#xff0c;注意&#xff0c;山寨机器的 安卓版本不可信啊&#xff0c;安卓4.4.2会标注安卓10 第二 &#xff0c;下载360超级root, http://2012rs.mysxl.cn/ https://xdaforums.com/t/setcpu-for-root-us…...

【两整数之和】python刷题记录

R3-位运算专题。 仲夏之约&#xff0c;留尺一寸&#xff0c;小记一事&#xff0c;算是了结。 无进位和 与 异或运算 规律相同&#xff0c;进位 和 与运算 规律相同&#xff08;并需左移一位&#xff09; 牛啊牛啊 class Solution:def getSum(self, a: int, b: int) -> int…...

常见cms漏洞之dedecms

DedeCMS是织梦团队开发PHP 网站管理系统&#xff0c;它以简单、易用、高效为特色&#xff0c;组建出各种各样各具特色的网站&#xff0c;如地方门户、行业门户、政府及企事业站点等。 下载地址请网上自行寻找 搭建方式选择php study 首先搭建环境 #前台http://localhost/dedecm…...

基于微信小程序的微课堂笔记的设计与实现(源码+论文+部署讲解等)

博主介绍&#xff1a;✌全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术栈介绍&#xff1a;我是程序员阿龙&#xff…...

如何构建AI产品:OpenAI与前Shopify产品负责人Miqdad Jaffer的经验分享

一、引言 构建AI产品是一项复杂且充满挑战的任务&#xff0c;尤其是当涉及到面向消费者的解决方案时。在最近的一期播客节目中&#xff0c;OpenAI 和前Shopify产品负责人 Miqdad Jaffer 分享了他在构建AI产品的经验和策略。下面我们将探讨构建AI产品的最佳实践&#xff0c;以及…...

C++的结构体、联合体、枚举类型(一)

1.C++的结构体 2.C++的联合体 3.C++的枚举类型 1.C++的结构体 (1)C++中定义结构体变量,可以省略struct关键字 struct XX{…}; XX x;//定义结构体变量直接省略struct(2)C++结构体中可以直接定义函数,谓之成员函数(又叫方法)(3)在成员函数中可以直接访问该结构体的成员变…...

白骑士的PyCharm教学高级篇 3.5 团队协作与集成开发

系列目录 上一篇&#xff1a;白骑士的PyCharm教学高级篇 3.4 服务器部署与配置 在现代软件开发中&#xff0c;团队协作和集成开发环境&#xff08;IDE&#xff09;的使用至关重要。PyCharm不仅提供了强大的个人开发支持&#xff0c;还为团队协作和集成开发提供了丰富的功能和工…...

c++ 21 指针

*像一把钥匙 通过钥匙去找内存空间 间接修改内存空间的值 不停的给指针赋值 等于不停的更改指针的指向 指针也是一种数据类型 指针做函数参数怎么看都不可以 指针也是一个数据类型 是指它指向空间的数据类习惯 作业 野指针 向null空间地址copy数据 不断改变指针指向 …...

书籍将整数字符串转成整数值(5)0804

题目 给定一个字符串str&#xff0c;如果str符合日常书写的整数形式&#xff0c;并且属于32位整数的范围&#xff0c;返回str所代表的整数值&#xff0c;否则返回0。 举例 str“123” 返回 123 str“023” 因为023 不符合日常的书写习惯&#xff0c;所以返回0 str“A13” …...

计网:从输入URL到网页显示期间发生了什么

1、URL包含的信息 我们输入的url中包含着一些信息&#xff1a; http&#xff1a;表示的此次我们使用的什么协议/www.baidu.com&#xff1a;表示的是我们想要访问的服务器名称&#xff0c;也就是域名dir3/home.html&#xff1a;表示我们所要访问的资源 2、通过DNS解析URL获得I…...

pg数据库存储过程

一、存储过程 CREATE OR REPLACE PROCEDURE public.p_dm_stock_fx_hangye_d(IN dt_date character varying) LANGUAGE plpgsql AS $procedure$ begin delete from dm_stock_fx_hangye_d where stock_date dt_date; commit; insert into dm_stock_fx_hangye_d select t…...

Arduino PID库 (2) –微分导致的过冲

Arduino PID库 &#xff08;2&#xff09; – Derivative Kick 参考&#xff1a;手把手教你看懂并理解Arduino PID控制库——微分冲击 pid内容索引-CSDN博客 Arduino PID库 &#xff08;1&#xff09;– 简介 问题 此修改将稍微调整derivative term。目标是消除一种称为“…...

基于Tensorflow.js的花卉识别编程实践

使用TensorFlow.js进行编程有许多优点&#xff0c;特别适合开发机器学习和深度学习的应用。TensorFlow.js可以直接在浏览器中运行&#xff0c;无需服务器或特殊环境配置。这使得开发者可以轻松地创建和部署基于Web的机器学习应用。TensorFlow.js提供了许多预训练模型&#xff0…...

繁简之争:为什么手机芯片都是 ARM

RISC 和 CISC 指令集 之前的文章《揭秘 CPU 是如何执行计算机指令的》中说到&#xff0c;如果从软件的角度来讲&#xff0c;CPU 就是一个执行各种计算机指令&#xff08;Instruction Code&#xff09;的逻辑机器。 计算机指令集是计算机指令的集合&#xff0c;包括各种类型的…...

《机器人SLAM导航核心技术与实战》第1季:第8章_激光SLAM系统

视频讲解 【第1季】8.第8章_激光SLAM系统-视频讲解【第1季】8.1.第8章_激光SLAM系统_Gmapping算法-视频讲解【第1季】8.2.第8章_激光SLAM系统_Cartographer算法-视频讲解【第1季】8.3.第8章_激光SLAM系统_LOAM算法-视频讲解 第1季&#xff1a;第8章_激光SLAM系统 先 导 课第…...

Qt之Gui

组件依赖关系 应用 #mermaid-svg-GADicZtZJRVVUeiF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GADicZtZJRVVUeiF .error-icon{fill:#552222;}#mermaid-svg-GADicZtZJRVVUeiF .error-text{fill:#552222;stroke:#…...

Redis的回收策略(淘汰策略)

volatile-lru &#xff1a;从已设置过期时间的数据集&#xff08; server.db[i].expires &#xff09;中挑选最近最少使用的数据淘汰 volatile-ttl &#xff1a; 从已设置过期时间的数据集&#xff08; server.db[i].expires &#xff09; 中挑选将要过期的数据淘汰 volatile…...

基于Springboot的个人博客系统

文章目录 介绍访问地址一、功能展示1.前台首页归档相册留言关于我登陆注册 2.后台管理系统登陆页面首页文章管理相册管理写博客访客统计 介绍 基于Java&#xff08;Springboot&#xff09;可以用做毕业设计的个人博客系统&#xff0c;包括网站前台和后台管理系统两部分。网站前…...

J030_TCP通信

一、需求描述 使用TCP协议进行通信 1.1 一发一收 1.1.1 Client package com.itheima.tcp1;import java.io.DataOutputStream; import java.io.OutputStream; import java.net.Socket;public class Client {public static void main(String[] args) throws Exception {//1、…...

单片机复习题

第1章 思考题及习题 一、填空 1. 除了单片机这一名称之外&#xff0c;单片机还可称为 或 。 2.单片机与普通微型计算机的不同之处在于其将 、 、和 三部分&#xff0c;通过内部 连接在一起&#xff0c;集成于一块芯片上。 …...

Java | Leetcode Java题解之第322题零钱兑换

题目&#xff1a; 题解&#xff1a; public class Solution {public int coinChange(int[] coins, int amount) {int max amount 1;int[] dp new int[amount 1];Arrays.fill(dp, max);dp[0] 0;for (int i 1; i < amount; i) {for (int j 0; j < coins.length; j)…...

【MYSQL】MYSQL逻辑架构

mysql逻辑架构分为3层 mysql逻辑架构分为3层 1). 连接层&#xff1a;主要完成一些类似连接处理&#xff0c;授权认证及相关的安全方案。 2). 服务层&#xff1a;在 MySQL据库系统处理底层数据之前的所有工作都是在这一层完成的&#xff0c;包括权限判断&#xff0c;SQL接口&…...

SQL Server数据库的清洁工:垃圾回收机制解析

SQL Server数据库的清洁工&#xff1a;垃圾回收机制解析 在SQL Server的复杂而精密的数据库管理系统中&#xff0c;垃圾回收机制扮演着至关重要的角色。它负责清理不再需要的数据&#xff0c;释放空间供新数据使用。本文将深入探讨SQL Server中数据库垃圾回收机制的工作原理&a…...

使用MailKit在.NET Core中收发邮件的完整示例

在.NET Core中处理邮件收发操作时&#xff0c;MailKit是一个非常强大的库。它支持SMTP、POP3、IMAP等多种协议&#xff0c;可以轻松实现发送、接收、以及管理邮件的功能。下面我们将通过一个详细的示例&#xff0c;展示如何在.NET Core项目中使用MailKit来收发邮件&#xff0c;…...

flask高频面试题

目录 高频面试题及答案1. 如何在Flask中处理数据库迁移&#xff1f;2. Flask如何处理文件上传&#xff1f;3. 如何在Flask中处理跨域请求&#xff08;CORS&#xff09;&#xff1f;4. 如何在Flask中实现用户认证&#xff1f;5. Flask如何处理会话&#xff1f;6. Flask如何处理表…...

【算法模板】图论:Tarjan算法求割边割点

概念 割边&#xff08;Bridge 或 Cut Edge&#xff09; 定义&#xff1a; 在一个无向连通图中&#xff0c;如果删除某条边后&#xff0c;图不再连通&#xff08;即任意两点之间不能相互到达&#xff09;&#xff0c;则称该边为割边。割边也被称为桥&#xff0c;因为它像桥梁…...

python——joblib进行缓存记忆化-对计算结果缓存

问题场景 在前端多选框需要选取多个数据进行后端计算。 传入后端是多个数据包的对应路径。 这些数据包需要按一定顺序运行&#xff0c;通过一个Bag(path).get_start_time() 可以获得一个float时间值进行排序&#xff0c;但由于数据包的特性&#xff0c;这一操作很占用性能和时…...

01 计算机系统基础-2

操作系统 进程管理 进程管理是操作系统的核心&#xff0c;但如果设计不当&#xff0c;就会出现死锁的问题。如果一个进程在等待一件不可能发生的事&#xff0c;则进程就死锁了。而如果一个或多个进程产生死锁&#xff0c;就会造成系统死锁。基于死锁产生机制及解决方案&#…...

2024死磕小红书,一定能赚到钱!

​2024死磕小红书&#xff0c;一定能赚到钱&#xff01;在文末领取小红书运营完全指南电子书 从2023年起&#xff0c;小红书这股热乎劲儿就像开了挂&#xff0c;突然间就成了人人想蹭的“显学”。大伙儿都想趁着平台红利期&#xff0c;分一杯羹。说来惭愧&#xff0c;我从2020年…...

关于JS中的AO对象

在JavaScript中&#xff0c;AO对象&#xff08;Activation Object&#xff0c;激活对象&#xff09;是与函数执行上下文相关的概念。每当一个函数被调用时&#xff0c;都会创建一个新的执行上下文&#xff0c;这个执行上下文包含一个AO对象&#xff0c;用于存储在函数执行期间创…...

49 序列解包的多种形式和用法

序列解包&#xff08;Sequence Unpacking&#xff09;是 Python 中非常重要和常用的一个功能&#xff0c;可以使用非常简洁的形式完成复杂的功能&#xff0c;提高了代码的可读性&#xff0c;减少了程序员的代码输入量。 x, y, z 1, 2, 3 # 多个变量同时赋值 v_tuple (False…...

2-55 基于matlab的 永磁同步电机滑膜观测器估算电机转速

基于matlab的 永磁同步电机滑膜观测器估算电机转速。精度比传统观测器精度高。分别输出电机转速估计值与实际值、电机转速估计误差、电机转子位置估计值与实际值、电机转子位置估计误差。程序已调通&#xff0c;可直接运行。 2-55滑膜观测器估算电机转速 - 小红书 (xiaohongsh…...

手机在网状态接口如何对接?(二)

一、什么是手机在网状态&#xff1f; 传入手机号码&#xff0c;查询该手机号的在网状态&#xff0c;返回内容有正常使用、停机、在网但不可用、不在网&#xff08;销号/未启用/异常&#xff09;、预销户等多种状态。 二、手机在网状态使用场景&#xff1f; 1.用户验证与联系…...

红黑树实现详解

实践意义 在各方面&#xff0c;红黑树要比AVL树性能更好&#xff0c;用途也更广泛 map&set底层都主要靠红黑树 概念 性质 插入时&#xff0c;抽象图 cur为新插入 插入时颜色更新逻辑图 板书...

计算机基础(Windows 10+Office 2016)教程 —— 第5章 文档编辑软件Word 2016(上)

第5章 文档编辑软件Word 2016 5.1 Word 2016入门5.1.1 Word 2016 简介5.1.2 Word 2016 的启动5.1.3 Word 2016 的窗口组成5.1.4 Word 2016 的视图方式5.1.5 Word 2016 的文档操作5.1.6 Word 2016 的退出 5.2 Word 2016的文本编辑5.2.1 输入文本5.2.3 插入与删除文本5.2.4 复制与…...

知识库、微调、AI Agent

Agent执行工作的过程是需要大模型来配合的&#xff0c;大模型充当一个大脑&#xff0c;给Agent下达指令。Agent当接收到这个指令的时候&#xff0c;然后去执行。 大模型参数的数量直接影响大模型的生成能力和推理能力&#xff0c;也直接影响了大模型的使用效果。参数越多&…...