1.从零开始学会Vue--{{基础指令}}
全新专栏带你快速掌握Vue2+Vue3
1.插值表达式{{}}
插值表达式是一种Vue的模板语法
我们可以用插值表达式渲染出Vue提供的数据
1.作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，JS引擎会将其计算出一个结果
以下的情况都是表达式：
money + 100
money - 100
money * 10
money / 10
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()2.语法
插值表达式语法：{{ 表达式 }}
<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>
3.错误用法
1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p> //如果在data中不存在 则会报错2.支持的是表达式，而非语句，比如：if for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>
2.基础指令
1.内容渲染指令(v-html)
什么是指令？在 Vue中，带有 v- 前缀 的 特殊 标签属性
指令的作用：Vue会根据不同的【指令】，针对标签实现不同的【功能】
2.条件渲染指令(v-show,v-if,v-else,v-else-if)
v-show与v-if
作用：v-show和v-if 用来控制元素的显示与隐藏
语法：
●v-show = "表达式" 表达式值为 true 显示， false 隐藏
●v-if= "表达式" 表达式值 true显示， false 隐藏
原理：
●v-show 原理： 切换 display:none 控制显示隐藏
●v-if 原理：基于条件判断，是否创建 或 移除元素节点
场景：
●v-show 用在 频繁切换显示隐藏的场景 (京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！ 的手机京东)
●v-if 用在要么显示，要么隐藏，不频繁切换的场景（京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！ 底部提示）
v-else,v-else-if
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><p v-if="gender ==1">性别：♂ 男</p><p v-else>性别：♀ 女</p><hr /><p v-if="score>90">成绩评定A</p><p v-else-if="score>80">成绩评定B</p><p v-else-if="score>70">成绩评定C</p><p v-else>成绩评定D</p></div><script src="./vue2.7.16.js"></script><script>const app = new Vue({el: '#app',data: {gender: 2,score: 95,},});</script></body>
</html>
3.事件绑定指令(v-on)
作用：注册事件 （注册流程：事件名+ 事件处理逻辑 ，事件源哪去了？）
语法：
- v-on:事件名="内联语句"
- v-on:事件名="methods中的函数名"
- v-on:事件名="methods中的函数名(参数)"
举例：button注册事件的三种写法
- <button v-on:事件名="内联语句">按钮</button>
- <button v-on:事件名="处理函数">按钮</button>
- <button v-on:事件名="处理函数(实参)">按钮</button>
注意：v-on: 简写为 @
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><button @click="count--">-</button><span>{{ count }}</span><button v-on:click="count++">+</button><hr /><button @click="del">-</button><span>{{ num }}</span><button v-on:click="num++">+</button><hr /><button @click="changenNum(-5)">-5</button><span>{{ num }}</span><button v-on:click="changenNum(10)">+10</button></div><script src="./vue2.7.16.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,num: 0,},methods: {del() {if (this.num > 0) {this.num--;}},changenNum(num) {this.num += num;},},});</script></body>
</html>
4.属性绑定指令(v-bind)
作用： 给元素的属性动态绑定数据 ->例如： <img src=" " >
语法： v-bind:属性名 ="表达式 "
<img v-bind:src="imgUrl" alt="">
简写： v-bind: 可以简写成 => :bind
<img :src="imgUrl" alt="">
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><button v-show="index > 0" @click="index--">上一页</button><div><img :src="list[index]" alt="" /></div><button v-show="index < list.length - 1" @click="index++">下一页</button></div><script src="./vue2.7.16.js"></script><script>const app = new Vue({el: '#app',data: {index: 0,list: ['./imgs/11-00.gif','./imgs/11-01.gif','./imgs/11-02.gif','./imgs/11-03.gif','./imgs/11-04.png','./imgs/11-05.png',],},});</script></body>
</html>
5.列表渲染指令(v-for)
作用：基于数据循环，多次渲染整个元素
v-for可以基于哪些数据进行遍历呢？
数组，对象，数字，其中基于【数组】遍历是我们常用的方式
遍历数组的语法：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><h3>小黑水果店</h3><ul><li v-for="(item, index) in list">{{ item }} - {{ index }}</li></ul><ul><li v-for="item in list">{{ item }}</li></ul></div><script src="./vue2.7.16.js"></script><script>const app = new Vue({el: '#app',data: {list: ['西瓜', '苹果', '鸭梨', '榴莲'],},});</script></body>
</html>
不加 key-原地修改元素 （就地复用）
v-for的默认行为会尝试原地修改元素（就地复用）
就是根据数据重新渲染li标签，此时要渲染三次性能不好
加key - 正确排序复用
加key的作用：给元素添加唯一标识
加了key之后就只会删除一开始的li
6.双向数据绑定(v-model)
作用: v-model是给 表单元素 双向数据绑定的，可以快速 获取 或 设置 表单元素内容
双向数据绑定是什么？
① 数据变化 → 视图自动更新
② 视图变化 → 数据自动更新
语法: v-model = '变量'
扩展: v-model还可以给select、checkbox、radio、textarea等表单元素使用
<!--* @Date: 2025-01-02 17:38:11* @LastEditors: zl 1077167261@qq.com* @LastEditTime: 2025-01-02 17:51:40* @FilePath: \vue\vue基本语法\5.v-model.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><!-- v-model 可以让数据和视图，形成双向数据绑定(1) 数据变化，视图自动更新(2) 视图变化，数据自动更新可以快速[获取]或[设置]表单元素的内容-->文本:<input type="text" v-model="msg" /><p>{{ msg }}</p><hr /><input type="radio" value="true" name="option" /> 是<input type="radio" value="false" name="option" /> 否<hr /><input type="checkbox" v-model="ischecked" /><p>当前选择: {{ ischecked }}</p><hr /><label for="fruit">选择水果:</label><select v-model="selectedFruit" id="fruit"><option disabled value="">请选择</option><option value="apple">苹果</option><option value="banana">香蕉</option><option value="orange">橙子</option></select><p>你选择了: {{ selectedFruit }}</p><hr />账户：<input type="text" v-model="username" /> <br /><br />密码：<input type="password" v-model="password" /> <br /><br /><button @click="login">登录</button><button @click="reset">重置</button></div><script src="./vue2.7.16.js"></script><script>const app = new Vue({el: '#app',data: {username: '',password: '',msg: 'hello',ischecked: true,selectedFruit: '',},methods: {login() {console.log(this.username, this.password);},reset() {this.username = '';this.password = '';},},});</script></body>
</html>
html,
body {margin: 0;padding: 0;
}
body {index.cssbackground: #fff;
}
button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}body {font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300;
}:focus {outline: 0;
}.hidden {display: none;
}#app {background: #fff;margin: 180px 0 40px 0;padding: 15px;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#app .header input {border: 2px solid rgba(175, 47, 47, 0.8);border-radius: 10px;
}
#app .add {position: absolute;right: 15px;top: 15px;height: 68px;width: 140px;text-align: center;background-color: rgba(175, 47, 47, 0.8);color: #fff;cursor: pointer;font-size: 18px;border-radius: 0 10px 10px 0;
}#app input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}#app input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}#app input::input-placeholder {font-style: italic;font-weight: 300;color: gray;
}#app h1 {position: absolute;top: -120px;width: 100%;left: 50%;transform: translateX(-50%);font-size: 60px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, 0.8);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility;
}.new-todo,
.edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.new-todo {padding: 16px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}.main {position: relative;z-index: 2;
}.todo-list {margin: 0;padding: 0;list-style: none;overflow: hidden;
}.todo-list li {position: relative;font-size: 24px;height: 60px;box-sizing: border-box;border-bottom: 1px solid #e6e6e6;
}.todo-list li:last-child {border-bottom: none;
}.todo-list .view .index {position: absolute;color: gray;left: 10px;top: 20px;font-size: 22px;
}.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none;
}.todo-list li .toggle {opacity: 0;
}.todo-list li .toggle + label {/*Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/*/background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');background-repeat: no-repeat;background-position: center left;
}.todo-list li .toggle:checked + label {background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}.todo-list li label {word-break: break-all;padding: 15px 15px 15px 60px;display: block;line-height: 1.2;transition: color 0.4s;
}.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through;
}.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out;
}.todo-list li .destroy:hover {color: #af5b5e;
}.todo-list li .destroy:after {content: '×';
}.todo-list li:hover .destroy {display: block;
}.todo-list li .edit {display: none;
}.todo-list li.editing:last-child {margin-bottom: -1px;
}.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6;
}.footer:before {content: '';position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2);
}.todo-count {float: left;text-align: left;
}.todo-count strong {font-weight: 300;
}.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0;
}.filters li {display: inline;
}.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px;
}.filters li a:hover {border-color: rgba(175, 47, 47, 0.1);
}.filters li a.selected {border-color: rgba(175, 47, 47, 0.2);
}.clear-completed,
html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;
}.clear-completed:hover {text-decoration: underline;
}.info {margin: 50px auto 0;color: #bfbfbf;font-size: 15px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center;
}.info p {line-height: 1;
}.info a {color: inherit;text-decoration: none;font-weight: 400;
}.info a:hover {text-decoration: underline;
}/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}
}@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;}
}
<!--* @Date: 2025-01-02 17:54:51* @LastEditors: zl 1077167261@qq.com* @LastEditTime: 2025-01-02 18:12:25* @FilePath: \vue\vue基本语法\6.小黑记事本.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./css/index.css" /><title>记事本</title></head><body><!-- 主体区域 --><section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input placeholder="请输入任务" class="new-todo" v-model="value" /><button class="add" @click="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in lists" :key="item.id"><div class="view"><span class="index">{{index+1}}.</span><label>{{item.name}}</label><button class="destroy" @click="del(index)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><!-- 统计 --><span class="todo-count">合 计:<strong> {{lists.length}} </strong></span><!-- 清空 --><button class="clear-completed" @click = delAll()>清空任务</button></footer></section><!-- 底部 --><script src="./vue2.7.16.js"></script><script>const app = new Vue({el: '#app',data: {id: 3,value: '',lists: [{ id: 1, name: '吃饭饭' },{ id: 2, name: '睡觉觉' },{ id: 3, name: '打豆豆' },],},methods: {del(idx) {this.lists.splice(idx, 1);},add() {if (this.value.trim()) {this.lists.unshift({id: this.id++,name: this.value,});this.value = '';} else {alert('请输入任务');}},delAll() {this.lists = [];}},});</script></body>
</html>
3.指令补充
1.指令修饰符
什么是指令修饰符？
指令修饰符就是通过“.”增加一些指令的后缀 ，让这个指令有不同的作用
常用：
① 按键修饰符 @keyup.enter → 键盘回车监听
② v-model修饰符
- v-model.trim → 去除首尾空格
- v-model.number → 转数字
③ 事件修饰符
- @事件名.stop → 阻止冒泡
- @事件名.prevent → 阻止默认行为
- @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
<!--* @Date: 2025-01-03 09:45:28* @LastEditors: zl 1077167261@qq.com* @LastEditTime: 2025-01-03 09:45:33* @FilePath: \vue\2.watch与computed\1.指令修饰符.html
-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}</style></head><body><div id="app"><h3>v-model修饰符 .trim .number</h3>姓名：<input v-model.trim="username" type="text" /><br />年纪：<input v-model.number="age" type="text" /><br /><h3>@事件名.stop → 阻止冒泡</h3><div @click="fatherFn" class="father"><div @click.stop="sonFn" class="son">儿子</div></div><h3>@事件名.prevent → 阻止默认行为</h3><a @click.prevent href="http://www.baidu.com">阻止默认行为</a></div><script src="./vue.2.7.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',},methods: {fatherFn() {alert('老父亲被点击了');},sonFn(e) {// e.stopPropagation()alert('儿子被点击了');},},});</script></body>
</html>
2.v-model在表单元素中的使用
常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值
它会根据 控件类型 自动选取 正确的方法 来更新元素
值得注意的是在单选框与下拉菜单中v-model的使用有一些不一样
<!--* @Date: 2025-01-03 10:10:31* @LastEditors: zl 1077167261@qq.com* @LastEditTime: 2025-01-03 10:30:41* @FilePath: \vue\2.watch与computed\2.v-model操作表单.html
-->
<style>textarea {display: block;width: 240px;height: 100px;margin: 10px 0;}
</style><div id="app"><h3>小黑学习网</h3>姓名：<input type="text" v-model="user.username" /><br /><br />是否单身：<input type="checkbox" v-model="user.isSingle" /><br /><br /><!-- 前置理解：1. name: 给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据结合 Vue 使用 → v-model-->性别:<input type="radio" name="sex" value="1" v-model="user.sex" />男<input type="radio" name="sex" value="2" v-model="user.sex" />女 <br /><br /><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select v-model="user.city"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br /><br />自我描述：<textarea v-model="user.desc"></textarea><button @click="show">立即注册</button><hr />{{ user }}
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {user: {username: 'zs',isSingle: true,sex: '1',city: '101',desc: '你好我叫zs',},},methods: {show() {console.log(this.user);},},});
</script>
3.v-bind对样式的操作
为了方便开发者进行样式控制，
Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制
① 操作class 类名 语法 :class = "对象/数组"
② 操作style行内样式 语法 :style = "样式对象"
1.操作class类名
操作class 类名 语法 :class = "对象/数组"
- 对象形式
如：
适用场景：一个类名，来回切换
- 数组形式
如：
适用场景：批量添加或删除类
<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 v-for="(item,idx) in list" :key="item.id"><a @click="getActive(idx)" href="#" :class="{active:item.isActive}">{{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: {list: [{ id: 1, name: '京东秒杀', isActive: true },{ id: 2, name: '每日特价', isActive: false },{ id: 3, name: '品类秒杀', isActive: false },],},methods: {getActive(idx) {this.list.forEach((item, index) => {if (idx === index) {item.isActive = true;} else {item.isActive = false;}});},},});
</script>
2.操作style样式
语法 :style = "样式对象"
如：
适用场景：某个具体属性的动态设置
<style>#app {margin: 100px auto;text-align: center;}.progress {margin: 100px auto;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" :style="{width:percent +'%'}"><span>{{percent}}%</span></div></div><button @click="setPercent(25)">设置25%</button><button @click="setPercent(50)">设置50%</button><button @click="setPercent(75)">设置75%</button><button @click="setPercent(100)">设置100%</button><br /><br /><button @click="add">开始</button><button @click="percent=0">重置</button><button @click="clear">停止</button>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent: 50,timer: null,},methods: {setPercent(num) {this.percent = num;},add() {//清除定时器this.clear();this.timer = setInterval(() => {this.percent += 1;if (this.percent >= 100) {this.clear();}}, 300);},clear() {clearInterval(this.timer);this.timer = null;},},});
</script>
相关文章：
1.从零开始学会Vue--{{基础指令}}
全新专栏带你快速掌握Vue2Vue3 1.插值表达式{{}} 插值表达式是一种Vue的模板语法 我们可以用插值表达式渲染出Vue提供的数据 1.作用：利用表达式进行插值，渲染到页面中 表达式：是可以被求值的代码，JS引擎会将其计算出一个结果 …...
VS2022中.Net Api + Vue 从创建到发布到IIS
VS2022中.Net Api Vue 从创建到发布到IIS 前言一、先决条件二、创建项目三、运行项目四、增加API五、发布到IIS六、设置Vue的发布 前言 最近从VS2019 升级到了VS2022,终于可以使用官方的.Net Vue 组合了,但是使用过程中还是有很多问题,这里记录一下. 一、先决条件 Visual …...
RFID技术在制造环节的应用与价值
在现代制造业中，信息化和智能化已经成为企业提升竞争力的重要手段。RFID技术因其非接触式、远距离和高效识别的特点，广泛应用于生产的多个环节。本文将详细解读生产过程中RFID的关键应用场景，并结合实际案例，展示其为制造业带来的…...
（前端基础）HTML（一）
前提 W3C:World Wide Web Consortium（万维网联盟） Web技术领域最权威和具有影响力的国际中立性技术标准机构 其中标准包括：机构化标准语言（HTML、XML） 表现标准语言（CSS） 行为标准…...
Linux文件管理：硬链接与软链接
文章目录 1. 硬链接的设计目的（1）节省存储空间（2）提高文件管理效率（3）数据持久性（4）文件系统的自然特性 2. 软链接的设计目的**（1）跨文件系统引用****&#x…...
pnpm, eslint, vue-router4, element-plus, pinia
利用 pnpm 创建 vue3 项目 pnpm 包管理器 - 创建项目 Eslint 配置代码风格(Eslint用于规范纠错，prettier用于美观） 在 设置 中配置保存时自动修复 提交前做代码检查 husky是一个 git hooks工具（git的钩子工具，可以在特定实际执行特…...
在软件产品从开发到上线过程中，不同阶段可能出现哪些问题，导致软件最终出现线上bug
在软件产品从开发到上线的全生命周期中，不同阶段都可能因流程漏洞、技术疏忽或人为因素导致线上问题。以下是各阶段常见问题及典型案例： 1. 需求分析与设计阶段 问题根源：业务逻辑不清晰或设计缺陷 典型问题： 需求文档模糊&#…...
Spring Boot中如何自定义Starter
文章目录 Spring Boot中如何自定义Starter概念和作用1. 概念介绍2. 作用和优势2.1 简化依赖管理2.2 提供开箱即用的自动配置2.3 标准化和模块化开发2.4 提高开发效率2.5 提供灵活的配置覆盖3. 应用场景创建核心依赖1. 确定核心依赖的作用2. 创建 starter-core 模块2.1 依赖管理…...
制作Ubuntu根文件
系列文章目录 Linux内核学习 Linux 知识（1） Linux 知识（2） WSL Ubuntu QEMU 虚拟机 Linux 调试视频 PCIe 与 USB 的补充知识 vscode 使用说明 树莓派 4B 指南 设备驱动畅想 Linux内核子系统 Linux 文件系统挂载 QEMU 通过网络实现…...
SpringBoot快速接入OpenAI大模型（JDK8）
使用AI4J快速接入OpenAI大模型 本博文给大家介绍一下如何使用AI4J快速接入OpenAI大模型，并且如何实现流式与非流式的输出，以及对函数调用的使用。 介绍 由于SpringAI需要使用JDK17和Spring Boot3，但是目前很多应用依旧使用的JDK8版本&…...
UniApp 中制作一个横向滚动工具栏
前言 最近在用 UniApp 开发项目时，需要一个横向滑动的工具栏。常见的工具栏一般都是竖着的，但横向滑动的工具栏不仅能展示更多内容，还能让界面看起来更加丰富。不过很多朋友可能会发现，如何让内容“横着”展示又不变形、能流畅滚…...
react中如何获取真实的dom
在 React 中，获取真实的 DOM 元素通常通过 ref 来实现。ref 是一个特殊的属性，用于引用组件或 DOM 元素的实例。你可以通过 ref 获取到组件的真实 DOM 元素或组件实例。 1. 函数组件中的 useRef 在函数组件中，获取 DOM 元素的引用需要使用 …...
5G与物联网的协同发展：打造智能城市的未来
引言 随着科技的不断进步，智能城市的概念已经不再是科幻小说中的幻想，它正在逐步走进我们的生活。而这背后的两大驱动力无疑是 5G和 物联网（IoT）。5G网络以其高速率、低延迟、大容量的优势，与物联网的强大连接能力相结…...
【Qt】实现定期清理程序日志
在现有Qt程序中实现可配置日志保存天数的代码示例，分为界面修改、配置存储和核心逻辑三部分： // 1. 在配置文件（如settings.h）中添加保存天数的配置项 class Settings { public:int logRetentionDays() const {return m_settings…...
git bisect 使用二分法查找引入错误的提交
git bisect 使用二分法查找引入错误的提交 Git bisect 命令官方文档 git bisect 这个命令使用二分搜索算法来查找项目历史中哪个提交引入了一个错误 使用该命令时，首先告诉它一个已知包含错误的 “坏” 提交 以及一个已知在错误出现之前的 “好” 提交 然后 git b…...
一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法
论文标题 中文标题：一种面向车载时间敏感网络的联合路由与时隙调度负载均衡算法 英文标题：A Joint Routing and Time-Slot Scheduling Load Balancing Algorithm for In-Vehicle TSN 作者信息 Bo Xu, Xinrui Chang, Dongyang Xu, Shuo Wang, Uzair As…...
【弹性计算】容器、裸金属
容器、裸金属 1.容器和云原生1.1 容器服务1.2 弹性容器实例1.3 函数计算 2.裸金属2.1 弹性裸金属服务器2.2 超级计算集群 1.容器和云原生 容器技术 起源于虚拟化技术，Docker 和虚拟机和谐共存，用户也找到了适合两者的应用场景，二者对比如下图…...
Golang关于结构体组合赋值的问题
现在有一个结构体，其中一个属性组合了另外一个结构体，如下所示： type User struct {Id int64Name stringAge int64UserInfo }type UserInfo struct {Phone stringAddress string }如果要给 User 结构体的 Phone 和 Address 赋值的话&am…...
DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？
DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？ 文章目录 DeepSeek vs ChatGPT：AI对决中的赢家是……人类吗？一、引言1. 背景2. 问题 二、DeepSeek vs ChatGPT：谁更胜一筹？2.1 语言生成能力评测对比场景…...
新建github操作
1.在github.com的主页根据提示新建一个depository。 2.配置用户名和邮箱 git config --global user.name "name" git config --global user.email "email" 3.生成ssh秘钥 ssh-keygen -t rsa 找到public key 对应的文件路径 cat /root/.ssh/id_rsa 复制显…...
SciencePlots——绘制论文中的图片
文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了：一行…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
【7色560页】职场可视化逻辑图高级数据分析PPT模版
7种色调职场工作汇报PPT，橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版：职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
计算机基础知识解析：从应用到架构的全面拆解
目录 前言 1、 计算机的应用领域：无处不在的数字助手 2、 计算机的进化史：从算盘到量子计算 3、计算机的分类：不止 “台式机和笔记本” 4、计算机的组件：硬件与软件的协同 4.1 硬件：五大核心部件 4.2 软件&#…...
Python 实现 Web 静态服务器（HTTP 协议）
目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1）下载安装包2）配置环境变量3）安装镜像4）node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1）使用 http-server2）详解 …...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ，这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器，右键点击 .uproject 文件，选择 "Generate Visual Studio project files"，重…...
WebRTC调研
WebRTC是什么，为什么，如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...
安宝特案例丨寻医不再长途跋涉？Vuzix再次以AR技术智能驱动远程医疗
加拿大领先科技公司TeleVU基于Vuzix智能眼镜打造远程医疗生态系统，彻底革新患者护理模式。 安宝特合作伙伴TeleVU成立30余年，沉淀医疗技术、计算机科学与人工智能经验，聚焦医疗保健领域，提供AR、AI、IoT解决方案。 该方案使医疗…...