【Vue】day02-Vue基础入门

目录

day02

一、今日学习目标

1.指令补充

2.computed计算属性

3.watch侦听器

4.综合案例 （演示）

二、指令修饰符

1.什么是指令修饰符？

2.按键修饰符

3.v-model修饰符

4.事件修饰符

三、v-bind对样式控制的增强-操作class

1.语法：

2.对象语法

3.数组语法

4.代码练习

四、京东秒杀-tab栏切换导航高亮

1.需求：

2.准备代码:

3.思路：

五、v-bind对有样式控制的增强-操作style

1.语法

2.代码练习

3.进度条案例

六、v-model在其他表单元素的使用

1.讲解内容：

2.代码准备

七、computed计算属性

1.概念

2.语法

3.注意

4.案例

5.代码准备

八、computed计算属性 VS methods方法

1.computed计算属性

2.methods计算属性

3.计算属性的优势

4.总结

九、计算属性的完整写法

十、综合案例-成绩案例

十一、watch侦听器（监视器）

1.作用：

2.语法：

3.侦听器代码准备

十二、翻译案例-代码实现

十三、watch侦听器

1.语法

2.需求

3.代码实现

4.总结

十四、综合案例

day02

一、今日学习目标

1.指令补充

  1. 指令修饰符

  2. v-bind对样式增强的操作

  3. v-model应用于其他表单元素

2.computed计算属性

  1. 基础语法

  2. 计算属性vs方法

  3. 计算属性的完整写法

  4. 成绩案例

3.watch侦听器

  1. 基础写法

  2. 完整写法

4.综合案例 （演示）

  1. 渲染 / 删除 / 修改数量 / 全选 / 反选 / 统计总价 / 持久化

二、指令修饰符

1.什么是指令修饰符？

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

2.按键修饰符

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

代码演示：

  <div id="app"><h3>@keyup.enter  →  监听键盘回车事件</h3><input v-model="username" type="text"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: ''},methods: {}})</script>

3.v-model修饰符

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

  • v-model.number —>转数字

4.事件修饰符

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

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

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

 <style>.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}</style>
​<div id="app"><h3>v-model修饰符 .trim .number</h3>姓名：<input v-model="username" type="text"><br>年纪：<input v-model="age" type="text"><br>
​<h3>@事件名.stop     →  阻止冒泡</h3><div @click="fatherFn" class="father"><div @click="sonFn" class="son">儿子</div></div>
​<h3>@事件名.prevent  →  阻止默认行为</h3><a @click href="http://www.baidu.com">阻止默认行为</a></div>
​<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',},methods: {fatherFn () {alert('老父亲被点击了')},sonFn (e) {// e.stopPropagation()alert('儿子被点击了')}}})</script>

三、v-bind对样式控制的增强-操作class

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

1.语法：

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

2.对象语法

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

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

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

3.数组语法

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

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

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

4.代码练习

 <style>.box {width: 200px;height: 200px;border: 3px solid #000;font-size: 30px;margin-top: 10px;}.pink {background-color: pink;}.big {width: 300px;height: 300px;}</style>
​
​
<div id="app"><!--绑定对象--><div class="box">黑马程序员</div><!--绑定数组--><div class="box">黑马程序员</div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {
​}})</script>

四、京东秒杀-tab栏切换导航高亮

1.需求：

当我们点击哪个tab页签时，哪个tab页签就高亮

2.准备代码:

 <style>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}
​</style>
​
<div id="app"><ul><li><a class="active" href="#">京东秒杀</a></li><li><a href="#">每日特价</a></li><li><a href="#">品类秒杀</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: {list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' }]}})</script>

3.思路：

1.基于数据，动态渲染tab（v-for）

2.准备一个下标 记录高亮的是哪一个 tab

3.基于下标动态切换class的类名

五、v-bind对有样式控制的增强-操作style

1.语法

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

2.代码练习

<style>.box {width: 200px;height: 200px;background-color: rgb(187, 150, 156);}</style><div id="app"><div class="box"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>

3.进度条案例

 <style>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}</style><div id="app"><div class="progress"><div class="inner"><span>50%</span></div></div><button>设置25%</button><button>设置50%</button><button>设置75%</button><button>设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})</script>

六、v-model在其他表单元素的使用

1.讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

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

2.代码准备

 <style>textarea {display: block;width: 240px;height: 100px;margin: 10px 0;}</style><div id="app"><h3>小黑学习网</h3>姓名：<input type="text"> <br><br>是否单身：<input type="checkbox"> <br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据结合 Vue 使用 → v-model-->性别: <input type="radio">男<input type="radio">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select><option>北京</option><option>上海</option><option>成都</option><option>南京</option></select><br><br>自我描述：<textarea></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: {}})</script>

七、computed计算属性

1.概念

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

2.语法

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

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

3.注意

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

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

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

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

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

4.案例

比如我们可以使用计算属性实现下面这个业务场景

5.代码准备

<style>table {border: 1px solid #000;text-align: center;width: 240px;}th,td {border: 1px solid #000;}h3 {position: relative;}</style><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>礼物总数：? 个</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 },]}})</script>

八、computed计算属性 VS methods方法

1.computed计算属性

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

语法：

  1. 写在computed配置项中

  2. 作为属性，直接使用

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

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

2.methods计算属性

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

语法：

  1. 写在methods配置项中

  2. 作为方法调用

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

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

3.计算属性的优势

  1. 缓存特性（提升性能）

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

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

  2. methods没有缓存特性

  3. 通过代码比较

<style>table {border: 1px solid #000;text-align: center;width: 300px;}th,td {border: 1px solid #000;}h3 {position: relative;}span {position: absolute;left: 145px;top: -4px;width: 16px;height: 16px;color: white;font-size: 12px;text-align: center;border-radius: 50%;background-color: #e63f32;}</style><div id="app"><h3>小黑的礼物清单🛒<span>?</span></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: 3 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount () {let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}}})</script>

4.总结

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

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

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

九、计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

  1. 计算属性默认的简写，只能读取访问，不能 "修改"

  2. 如果要 "修改" → 需要写计算属性的完整写法

完整写法代码演示

 <div id="app">姓：<input type="text" v-model="firstName"> +名：<input type="text" v-model="lastName"> =<span></span><br><br> <button>改名卡</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {firstName: '刘',lastName: '备'},computed: {},methods: {}})</script>

十、综合案例-成绩案例

功能描述：

1.渲染功能

2.删除功能

3.添加功能

4.统计总分，求平均分

思路分析：

1.渲染功能 v-for :key v-bind:动态绑定class的样式

2.删除功能 v-on绑定事件， 阻止a标签的默认行为

3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据

4.使用计算属性computed 计算总分和平均分的值

十一、watch侦听器（监视器）

1.作用：

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

2.语法：

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

  2. 简单写法： 简单类型数据直接监视

  3. 完整写法：添加额外配置项

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

3.侦听器代码准备

 <style>* {margin: 0;padding: 0;box-sizing: border-box;font-size: 18px;}#app {padding: 10px 20px;}.query {margin: 10px 0;}.box {display: flex;}textarea {width: 300px;height: 160px;font-size: 18px;border: 1px solid #dedede;outline: none;resize: none;padding: 10px;}textarea:hover {border: 1px solid #1589f5;}.transbox {width: 300px;height: 160px;background-color: #f0f0f0;padding: 10px;border: none;}.tip-box {width: 300px;height: 25px;line-height: 25px;display: flex;}.tip-box span {flex: 1;text-align: center;}.query span {font-size: 18px;}.input-wrap {position: relative;}.input-wrap span {position: absolute;right: 15px;bottom: 15px;font-size: 12px;}.input-wrap i {font-size: 20px;font-style: normal;}</style><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="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: ''},// 具体讲解：(1) watch语法 (2) 具体业务实现})</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: ''},result: '', // 翻译结果// timer: null // 延时器id},// 具体讲解：(1) watch语法 (2) 具体业务实现watch: {// 该方法会在数据变化时调用执行// newValue新值, oldValue老值（一般不用）// words (newValue) {//   console.log('变化了', newValue)// }'obj.words' (newValue) {// console.log('变化了', newValue)// 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行clearTimeout(this.timer)this.timer = setTimeout(async () => {const res = await axios({url: 'https://applet-base-api-t.itheima.net/api/translate',params: {words: newValue}})this.result = res.data.dataconsole.log(res.data.data)}, 300)}}})</script>

十三、watch侦听器

1.语法

完整写法 —>添加额外的配置项

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

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

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

2.需求

  • 当文本框输入的时候 右侧翻译内容要时时变化

  • 当下拉框中的语言发生变化的时候 右侧翻译的内容依然要时时变化

  • 如果文本框中有默认值的话要立即翻译

3.代码实现

 <script> 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>

4.总结

watch侦听器的写法有几种？

1.简单写法

watch: {数据属性名 (newValue, oldValue) {一些业务逻辑 或 异步操作。 },'对象.属性名' (newValue, oldValue) {一些业务逻辑 或 异步操作。 }
}

2.完整写法

watch: {// watch 完整写法数据属性名: {deep: true, // 深度监视(针对复杂类型)immediate: true, // 是否立刻执行一次handlerhandler (newValue) {console.log(newValue)}}
}

十四、综合案例

购物车案例

需求说明：

  1. 渲染功能

  2. 删除功能

  3. 修改个数

  4. 全选反选

  5. 统计 选中的 总价 和 总数量

  6. 持久化到本地

实现思路：

1.基本渲染： v-for遍历、:class动态绑定样式

2.删除功能 ： v-on 绑定事件，获取当前行的id

3.修改个数 ： v-on绑定事件，获取当前行的id，进行筛选出对应的项然后增加或减少

4.全选反选

  1. 必须所有的小选框都选中，全选按钮才选中 → every

  2. 如果全选按钮选中，则所有小选框都选中

  3. 如果全选取消，则所有小选框都取消选中

声明计算属性，判断数组中的每一个checked属性的值，看是否需要全部选

5.统计 选中的 总价 和 总数量 ：通过计算属性来计算选中的总价和总数量

6.持久化到本地： 在数据变化时都要更新下本地存储 watch

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/4041.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

边缘检测之loG算子

边缘检测之loG算子

note // 边缘检测之loG算子&#xff1a;对高斯函数求二阶导数 // G(x,y) exp(-1 * (x*x y*y) / 2 / sigma / sigma) // loG(x,y) ((x*x y*y - 2 * sigma * sigma) / (sigma^4)) * exp(-1 * (x*x y*y) / 2 / sigma /sigma) /* [ 0,0,-1,0,0; 0,-1,-2,-1,0; -1,-2,16,-2…
阅读更多...
uni-app实现emoj表情包发送（nvue版）

uni-app实现emoj表情包发送（nvue版）

uni-app实现表情包发送&#xff0c; vue实现思路直接使用grideview网格布局加载emoj表情包即可实现&#xff0c;很简单&#xff0c;但是nvue稍微复杂&#xff0c;这里采用的方案是nvue提供的组件list 看效果 代码 <template><view style"margin-right: 10rpx;m…
阅读更多...
如何使用自有数据微调ChatGLM-6B

如何使用自有数据微调ChatGLM-6B

构建自己的数据集 数据格式&#xff1a;问答对 官网例子 ADGEN 数据集任务为根据输入&#xff08;content&#xff09;生成一段广告词&#xff08;summary&#xff09;。 { "content": "类型#上衣*版型#宽松*版型#显瘦*图案#线条*衣样式#衬衫*衣袖型#泡泡袖…
阅读更多...
3.8 Bootstrap 面包屑导航(Breadcrumbs)

3.8 Bootstrap 面包屑导航(Breadcrumbs)

文章目录 Bootstrap 面包屑导航&#xff08;Breadcrumbs&#xff09; Bootstrap 面包屑导航&#xff08;Breadcrumbs&#xff09; 面包屑导航&#xff08;Breadcrumbs&#xff09;是一种基于网站层次信息的显示方式。以博客为例&#xff0c;面包屑导航可以显示发布日期、类别或…
阅读更多...
Stable Diffusion + EbSynth + ControlNet 解决生成视频闪烁

Stable Diffusion + EbSynth + ControlNet 解决生成视频闪烁

一、安装 1.1、安装ffmpeg 下载地址&#xff1a; 解压&#xff0c;配置环境变量 E:\AI\ffmpeg\bin 检查是否安装成功 1.2、安装SD的 EbSynth 插件 插件地址 https://github.com/s9roll7/ebsynth_utility 报错&#xff1a;ModuleNotFoundError: No module named extension…
阅读更多...
【广州华锐互动】AR远程巡检系统在设备维修保养中的作用

【广州华锐互动】AR远程巡检系统在设备维修保养中的作用

随着科技的不断发展&#xff0c;AR(增强现实)远程巡检系统在设备检修中发挥着越来越重要的作用。这种系统可以将AR技术与远程通信技术相结合&#xff0c;实现对设备检修过程的实时监控和远程指导&#xff0c;提高设备检修的效率和质量。 首先&#xff0c;AR远程巡检系统可以帮助…
阅读更多...
单片机尽力少用位域操作

单片机尽力少用位域操作

1、在51单片机中少用uint32_t类型&#xff0c;查看汇编真的好多条指令&#xff0c;尽力避免少用。 2、在32位单片机中&#xff0c;u8、u16、u32类型操作起来基本没有什么影响&#xff0c;下图是我做的测试&#xff0c;可能测试不全面&#xff0c;按照当前测试&#xff0c;在32…
阅读更多...
Kubernetes_1.27.3_Harbor结合Nacos实战

Kubernetes_1.27.3_Harbor结合Nacos实战

Nacos 实战 作者：行癫（盗版必究） 一：Nacos简介 1.简介 ​ Nacos是 Dynamic Naming and Configuration Service的首字母简称，一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台；Nacos 致力于帮助您发现、配置和管理微服务；Nacos 提供了一组简单易用的特…
阅读更多...
实战 ➾【Red Hat 搭建部署VSFTPd服务】

实战 ➾【Red Hat 搭建部署VSFTPd服务】

实战 ➾【Red Hat 搭建部署VSFTPd服务】 &#x1f53b; 前言&#x1f53b; 一、vsFTPd服务部署&#x1f6a5; 1.1 vsFTPd服务安装&#x1f6a5; 1.2 vsFTPd服务的启动与关闭 &#x1f53b; 二、vsFTPd相关配置&#x1f6a5; 2.1 vsFTPd的相关配置文件&#x1f6a5; 2.2 配置匿名…
阅读更多...
SpringSecurity（6.1.x版本） 认证，授权，自定义登录，内部机制探讨

SpringSecurity（6.1.x版本） 认证，授权，自定义登录，内部机制探讨

SpringSecurity 文章目录 SpringSecurityCSRF跨站请求伪造攻击SFA会话固定攻击XSS跨站脚本攻击开发环境搭建认证直接认证使用数据库认证自定义验证 其他配置自定义登录界面记住我功能 授权基于角色授权基于权限授权使用注解权限判断 内部机制探究授权校验流程安全上下文安全上下…
阅读更多...
【JAVA】方法的使用：方法语法、方法调用、方法重载、递归练习

【JAVA】方法的使用：方法语法、方法调用、方法重载、递归练习

&#x1f349;内容专栏&#xff1a;【JAVA从0到入门】 &#x1f349;本文脉络&#xff1a;JAVA方法的使用&#xff0c;递归练习 &#x1f349;本文作者&#xff1a;Melon_西西 &#x1f349;发布时间 &#xff1a;2023.7.19 目录 1. 什么是方法(method) 2 方法定义 2.1 方法…
阅读更多...
C语言——文件操作（超全超详细）

C语言——文件操作（超全超详细）

C语言——文件操作 1. 什么是文件 磁盘上的文件是文件 但是在程序设计中&#xff0c;我们一般谈的文件有两种&#xff1a;程序文件、数据文件&#xff08;从文件功能的角度来分类的&#xff09; 1.1 程序文件 包括源程序文件&#xff08;后缀为.c&#xff09;&#xff0c;目…
阅读更多...
教程 | 如何10秒内一键生成高质量PPT

教程 | 如何10秒内一键生成高质量PPT

Hi! 大家好&#xff0c;我是赤辰&#xff01; 近期新进的学员不少职场小白&#xff0c;对AI工具提效办公很感兴趣&#xff0c;今天火速给大家安排&#xff0c;ChatGPTMindShow强强联合&#xff0c;30秒内快速生成PPT&#xff0c;对于策划小白来说简直是福音呀&#xff01; 市…
阅读更多...
用百度地图api获取当前定位，获取经纬度——前端笔记

用百度地图api获取当前定位，获取经纬度——前端笔记

问题&#xff1a; 做一个按钮&#xff0c;点击后可以获取到当前位置的经纬度&#xff0c;并渲染地图。 效果如下: 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title>获取当前定位测试<…
阅读更多...
精选了6款好用的AI绘画工具，值得一试

精选了6款好用的AI绘画工具，值得一试

近几年来&#xff0c;伴随着AI技术的发展&#xff0c;设计领域发生了巨大的变化。AI绘图工具的出现很大程度上减轻了设计师的工作负担&#xff0c;本文精选了6款优秀的AI绘图工具为大家推荐&#xff0c;一起来看看吧&#xff01; 1、即时灵感 即时灵感作为国产的AI绘图工具&a…
阅读更多...
PuTTY下载（免安装exe）

PuTTY下载（免安装exe）

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
概率论和随机过程的学习和整理20：条件概率我知道，但什么是条件期望？可用来解决递归问题

概率论和随机过程的学习和整理20：条件概率我知道，但什么是条件期望？可用来解决递归问题

目录 1 目标问题&#xff1a; 什么是条件期望&#xff1f; 条件期望有什么用&#xff1f; 2 条件期望&#xff0c;全期望公式 3 条件期望&#xff0c;全期望公式 和 条件概率&#xff0c;全概率公式的区别和联系 3.1 公式如下 3.2 区别和联系 3.3 概率和随机过程 4 有什…
阅读更多...
国产MCU-CW32F030开发学习-BH1750模块

国产MCU-CW32F030开发学习-BH1750模块

国产MCU-CW32F030开发学习-BH1750模块 硬件平台 CW32_48F大学计划板CW32_IOT_EVA物联网开发评估套件BH1750数字型光照强度传感器 BH1750 BH1750是一款数字型光照强度传感器&#xff0c;能够获取周围环境的光照强度。其测量范围在0~65535 lx。lx勒克斯&#xff0c;是光照强…
阅读更多...
Rsync(二十七）

Rsync(二十七）

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、概述 二、特性 三、应用场景 四、数据的同步方式 五、rsync传输模式 六、rsync应用 七、rsync 命令 1. 格式 1.1 作为远程命令 1. 2 作为rsync服务 2. 选项 3.…
阅读更多...
信息摘要 秘钥签名 数字签名 数字证书 数字验证 数字信封 这都是什么东西？

信息摘要 秘钥签名 数字签名 数字证书 数字验证 数字信封 这都是什么东西？

信息摘要 秘钥签名 数字签名 数字证书 数字验证 数字信封 这都是什么东西&#xff1f; 一下遇见这么多相近的名词&#xff0c;实在是难以区分理解&#xff0c;还是从这些概念产生的缘由理解吧 先看需求&#xff1a;如何保证 数据 在网络中传输时正确的&#xff1f;有没有被篡…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023