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 复制显…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明：假设每台服务器已…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵，其中每行，每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid，其中有多少个 3 3 的 “幻方” 子矩阵&am…...
Xen Server服务器释放磁盘空间
disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...
MySQL 知识小结（一）
一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库，分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷，但是文件存放起来数据比较冗余，用二进制能够更好管理咱们M…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序（Program） 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序，比如我们使用QQ，就启动了一个进程，操作系统就会为该进程分配内存…...
代码规范和架构【立芯理论一】（2025.06.08）
1、代码规范的目标 代码简洁精炼、美观，可持续性好高效率高复用，可移植性好高内聚，低耦合没有冗余规范性，代码有规可循，可以看出自己当时的思考过程特殊排版，特殊语法，特殊指令，必须…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...
掌握 HTTP 请求：理解 cURL GET 语法
cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...