【Vue3】一文全览基础语法-案例程序及配图版
文章目录
- Vue应用基本结构
- 模块化开发
- ref和reactive
- 绑定事件 v-on 简写@
- 显示和隐藏 v-show
- 条件渲染 v-if
- 动态属性绑定 v-bind 简写：
- 遍历数组或对象 v-for
- 双向数据绑定 v-model
- 渲染数据 v-text 和 v-html
- 计算属性 computed
- 侦听器 watch
- 自动侦听器 watchEffect
本文示例代码下载链接Vue3基本语法示例代码
Vue.js是渐进式JavaScript框架，渐进式是指可以按需引入Vue.js的部分功能, 而不必全量引入整个框架。
下面引入vue采用本地文件的方式：
vue.global.js
vue.esm-browser.js
vue.esm-browser.js和vue.global.js是Vue.js的两个不同构建版本，主要区别在于模块系统和使用场景。前者更适合模块化开发，如webpack打包。后者是一个全局构建，适合在浏览器中直接使用，不依赖模块系统。在全局作用域中注册Vue，使得在浏览器中可以直接通过Vue访问Vue的API。更适合快速原型开发或者在没有构建工具的情况下直接在 HTML 中使用。
加载后可在浏览器页面中右键另存为js文件，放到测试文件中，类似如下：
如果采用的是VS Code，可安装插件Live Server，右键查看页面效果：
Vue应用基本结构
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><!--<div id="app"></div> 指定一个id为app的div元素;{{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染,如: Vue实例中定义一个 msg变量, 值为"Hello world", 在模板中若使用插值表达式{{ msg }}则会被渲染成"Hello world";响应式数据是指当数据发生变化时, 模板中依赖于该数据的部分会自动更新--><div id="app">{{ msg }}<h2>{{ web.title }}</h2><h3>{{ web.url }}</h3></div><script>//创建一个 Vue 应用程序Vue.createApp({//Composition API(组合式API) 的setup选项 用于设置响应式数据和方法等setup() {//Composition API的reactive()函数 用于创建响应式数据//Vue.reactive创建一个响应式数据对象web, 其中包含title和url属性const web = Vue.reactive({ title: "百度搜索",url: "baidu.com"})//返回数据return {msg: "success",web}}}).mount("#app") //将Vue应用程序挂载(mount)到app元素上</script>
</body>
</html>
上述程序运行结果页面如下：
或者将创建app部分更换成如下写法，效果相同：
//将 Vue 对象中的 createApp、reactive 属性赋值给 createApp、reactive 变量
const { createApp, reactive } = Vue //解构赋值语法createApp({setup() {const web = reactive({title: "百度搜索",url: "baidu.com"})return {msg: "success",web}}
}).mount("#app")
模块化开发
或者像如下方式引入esm-browser.js中的模块也是相同的效果。
<script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({title: "百度搜索",url: "baidu.com"})return {msg:"success",web}}}).mount("#app")
</script>
ref和reactive
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><div id="app">msg: {{ msg }}<h3>web.title: {{ web.title }}</h3><h3>web.url: {{ web.url }}</h3><h3>web.number: {{ number }}</h3></div><script type="module">import { createApp, ref, reactive } from './vue.esm-browser.js'createApp({setup() {//ref用于存储单个基本类型的数据, 如:数字、字符串等const number = ref(10) //使用ref创建的响应式对象, 需要通过.value属性来访问和修改其值number.value = 20 //用于存储复杂数据类型, 如:对象或数组等const web = reactive({ title: "百度搜索",url: "baidu.com"})//使用reactive创建的响应式对象, 可以直接通过属性名来访问和修改值web.url = "www.baidu.com" return {msg: "success",number,web}}}).mount("#app")</script>
</body>
</html>
上述程序运行结果如下：
绑定事件 v-on 简写@
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><div id="app"><h3>{{ msg }}</h3><h3>{{ web.url }}</h3><h3>{{ web.user }}</h3><h3>{{ sub(100, 20) }}</h3><!-- v-on:click 表示在 button 元素上监听 click 事件 --><button v-on:click="edit">修改</button> <br><!-- @click 简写形式 --><button @click="add(20, 30)">加法</button> <br><!-- enter space tab 按键修饰符keyup是在用户松开按键时才触发keydown是在用户按下按键时立即触发-->回车 <input type="text" @keyup.enter="add(40, 60)"> <br>空格 <input type="text" @keyup.space="add(20, 30)"> <br>Tab <input type="text" @keydown.tab="add(10, 20)"> <br>w <input type="text" @keyup.w="add(5, 10)"> <br><!-- 组合快捷键 -->Ctrl + Enter <input type="text" @keyup.ctrl.enter="add(40, 60)"> <br>Ctrl + A <input type="text" @keyup.ctrl.a="add(20, 30)"></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({title: "百度搜索",url: "baidu.com",user: 0})const edit = () => {web.url = "www.baidu.com"//错误示例 不能直接改变msg的值,因为msg是一个普通变量, 不是响应式数据//msg = "百度搜索" }const add = (a, b) => {web.user += a + b}const sub = (a, b) => {return a - b}return {//普通变量, 非响应式数据, 在模板中普通变量不会自动更新msg: "success", //响应式数据web, //方法edit, add,sub,}}}).mount("#app")</script></body>
</html>
上述程序运行初始界面如下：
上述页面中点击相应按钮会将光标定位到输入框内再使用快捷键即可完成相应的调用加法功能函数，页面中数据渲染及时更新。
显示和隐藏 v-show
<div id="app"><h3>{{ web.show }}</h3><p v-show="web.show">百度搜索 baidu.com</p><button @click="toggle">点击切换显示状态</button>
</div>
<script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({show: true})const toggle = () => {web.show = !web.show}return {web,toggle}}}).mount("#app")
</script>
上述程序运行后初始页面如下：
点击按钮可切换页面中元素如下：
条件渲染 v-if
<div id="app"><h3>{{ web.show }}</h3><p v-show="web.show">百度搜索</p><p v-if="web.show">baidu.com</p><button @click="toggle">点击切换显示状态</button><p v-if="web.user < 1000">Class1网站</p><p v-else-if="web.user >= 1000 && web.user < 10000">Class2网站</p><p v-else-if="web.user >= 10000 && web.user < 100000">Class3网站</p><p v-else>SuperClass网站</p>
</div>
<script type="module">/*v-show通过 css display属性来控制元素的显示或隐藏;v-if用于对元素进行条件渲染. 当条件为true时, 渲染该元素; 为false时, 则不渲染。v-show适用于频繁切换元素的显示状态, 因为只改变display属性, 不需要重新渲染整个组件。v-if适用于较少改变的场景, 因为频繁从dom中删除或添加元素, 会导致性能下降。*/import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({show: true,user: 500})const toggle = () => {web.show = !web.show}return {web,toggle}}}).mount("#app")
</script>
动态属性绑定 v-bind 简写：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script><style>.textColor{color:aqua;}</style>
</head>
<body><div id="app"><h3>常规方法传值</h3><h3>{{value}}</h3><input type="text" value="baidu.com"><h3>使用v-bind动态传值</h3><h3>{{web.url}}</h3><input type="text" v-bind:value="web.url"><h3>使用v-bind简写形式传值,即只有一个冒号</h3><input type="text" :value="web.url"><!-- :src --><h3>本地路径传图片资源</h3><img src="./images/test.jpg" style="max-width: 20%; height: auto;"><h3>动态绑定图片源</h3><img :src="web.img" style="max-width: 10%; height: auto;"><h3>动态绑定类名</h3>百度搜索<!-- b标签用于加粗文本 --><b class="textColor">百度搜索</b><!-- :class用于动态绑定类名。如果web.fontStatus为true，则会将textColor类应用于<b>标签；如果为false，则不会应用这个类。 --><h3>动态绑定类名并决定是否启用</h3><b :class="{textColor:web.fontStatus}">baidu.com</b></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({url: "www.baidu.com",img: "./images/test.jpg",fontStatus: true})return {web}}}).mount("#app")</script>
</body>
</html>
上述程序运行后效果如下：
遍历数组或对象 v-for
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script><style>.textColor{color:aqua;}</style>
</head>
<body><div id="app"><ul><li v-for="(value, index) in data.number">index值为{{ index }} : value值为{{ value }}</li></ul><ul><li v-for="value in data.user">value值为{{ value }}</li></ul><ul><li v-for="(value, key) in data.user">key值为{{ key }} : value值为{{ value }}</li></ul><ul><li v-for="(value, key, index) in data.user">index值为{{ index }} : key值为{{ key }} : value值为{{ value }}</li></ul><ul><!-- <template> 标签可以用来包装多个元素或者多行代码, 不会在页面中渲染 --><template v-for="(value, key, index) in data.user"><li v-if="index == 1">index值为{{ index }} : key值为{{ key }} : value值为{{ value }}</li></template></ul><ul><!-- :key="value.id" 为 每个 li 元素设置一个唯一的 key 值 --><li v-for="(value, index) in data.teacher" :title="value.name" :key="value.id">index值为 {{ index }} : value.id值为{{ value.id }} value.name值为{{ value.name }} value.web值为{{ value.web }}</li></ul></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({number: ["足球", "篮球", "排球"], //数组user: { //对象name: "tina",gender: "女"},//包含两个对象的数组teacher: [ { id: 100, name: "小明", web: "baidu.com" },{ id: 101, name: "Mario", web: "www.baidu.com" }]})return {data}}}).mount("#app")</script>
</body>
</html>
上述程序运行后效果如下：
双向数据绑定 v-model
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script><style>.textColor{color:aqua;}</style>
</head>
<body><div id="app"><h3>文本框 {{ data.text }}</h3><h3>单选框 {{ data.radio }}</h3><h3>复选框 {{ data.checkbox }}</h3><h3>记住密码 {{ data.remember }}</h3><h3>下拉框 {{ data.select }}</h3><!-- 单向数据绑定 当数据发生改变时, 视图会自动更新. 但用户手动更改 input 的值, 数据不会自动更新 -->单向数据绑定 <input type="text" :value="data.text"><hr><!-- 双向数据绑定 当数据发生改变时, 视图会自动更新. 当用户手动更改 input 的值, 数据也会自动更新对于 <input type="text">, v-model 绑定的是 input 元素的 value 属性-->双向数据绑定 <input type="text" v-model="data.text"><hr><!-- 单选框 对于 <input type="radio">, v-model 绑定的是 input 元素的选中状态--><input type="radio" v-model="data.radio" value="1">男<input type="radio" v-model="data.radio" value="2">女<hr><!-- 复选框对于 <input type="checkbox">, v-model 绑定的是 input 元素的选中状态--><input type="checkbox" v-model="data.checkbox" value="a">红色<input type="checkbox" v-model="data.checkbox" value="b">绿色<input type="checkbox" v-model="data.checkbox" value="c">蓝色<hr><!-- 记住密码 --><input type="checkbox" v-model="data.remember">记住密码<hr><!-- 下拉框对于 <select>, v-model 绑定的是 select 元素的选中状态--><select v-model="data.select"><option value="">请选择</option><option value="A">红色</option><option value="B">绿色</option><option value="C">蓝色</option></select></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({text: "baidu.com", //文本框radio: "", //单选框checkbox: [], //复选框remember: false, //单个复选框-记住密码select: "" //下拉框})return {data}}}).mount("#app")</script>
</body>
</html>
上述程序运行结果如下图所示：
当操作双向绑定文本框或其他可选控件时数据可双向绑定实时更新：
另外还有v-model常见修饰符属性案例，如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><div id="app"><h3>url: {{ web.url }}</h3><h3>user: {{ web.user }}</h3>实时渲染 <input type="text" v-model="web.url"> <br>在失去焦点或按下回车键之后渲染 <input type="text" v-model.lazy="web.url"> <br><!-- 输入 100人, web.user 的值仍为 100 -->输入框的值转换为数字类型 <input type="text" v-model.number="web.user"> <br><!-- 此处的输入框输入完之后去除首尾空格，但管不到其他部分更新的数据 -->去除首尾空格 <input type="text" v-model.trim="web.url"></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({url: "baidu.com",user: 10})return {web}}}).mount("#app")</script>
</body>
</html>
上述程序运行结果如下图所示：
相应动态效果如描述所示。
渲染数据 v-text 和 v-html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><div id="app"><h3>{{ web.title }}</h3><!-- v-text 将数据解析为纯文本格式 --><h3 v-text="web.title"></h3><!-- v-html 将数据解析为 html 格式 --><h3 v-html="web.url"></h3></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({title: "百度搜索",url:"<i style='color:blue;'>www.baidu.com</i>"})return {web}}}).mount("#app")</script>
</body>
</html>
上述程序运行结果如下图所示：
计算属性 computed
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><div id="app"><h3>add: {{ add() }}</h3><h3>add: {{ add() }}</h3><h3>sum: {{ sum }}</h3><h3>sum: {{ sum }}</h3>x <input type="text" v-model.number="data.x"> <br>y <input type="text" v-model.number="data.y"></div><script type="module">import { createApp, reactive, computed } from './vue.esm-browser.js'createApp({setup() {const data = reactive({x: 10,y: 20})//方法-无缓存,只要被调用就会执行方法里面的代码let add = () => {console.log("add") //打印两次return data.x + data.y}//计算属性-有缓存 [计算属性根据其依赖的响应式数据变化而重新计算]//只有当依赖的数据发生变化才会执行里面的内容，否则使用缓存const sum = computed(() => {console.log("sum") //打印一次return data.x + data.y})return {data,sum,add}}}).mount("#app")</script>
</body>
</html>
上述程序运行结果如下图所示：
侦听器 watch
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><div id="app">颜色<select v-model="color"><option value="">请选择</option><option value="1">红色</option><option value="2">绿色</option><option value="3">蓝色</option></select><hr>年<select v-model="date.year"><option value="">请选择</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option></select>月<select v-model="date.month"><option value="">请选择</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><script type="module">import { createApp, ref, reactive, watch } from './vue.esm-browser.js'createApp({setup() {const color = ref("") //颜色const date = reactive({ //日期year: "2024",month: "11"})//监听 colorwatch(color, (newValue, oldValue) => {console.log("oldValue", oldValue, "newValue", newValue)if (newValue == "2") {console.log("绿色")}})//监听 datewatch(date, (newValue, oldValue) => {/*JS中对象和数组是通过引用传递的, 而不是通过值传递当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值*/console.log("oldValue", oldValue, "newValue", newValue)if (newValue.year == "2025") {console.log("2025")}if (newValue.month == "11") {console.log("11")}})//监听 date 中的某个属性 year//使用() = >创建了一个getter函数，这样只监听特定的属性变化watch(() => date.year, (newValue, oldValue) => {console.log("oldValue", oldValue, "newValue", newValue)if (date.year == "2024") {console.log("2024")}})return {color,date}}}).mount("#app")</script>
</body>
</html>
上述程序运行结果如下图所示：
点改变相应控件的值时，相应的监听函数会被调用。
补充引用传递相关知识：
引用传递是指在 JavaScript 中，当对象或数组作为参数传递时，传递的是对该对象或数组的引用，而不是其副本。这意味着在函数内部对该对象或数组的修改将影响到外部的原始对象或数组。
//假设我们有一个对象 person，我们将其作为参数传递给一个函数
let person = {name: "Alice",age: 25
};function updateAge(obj) {obj.age += 1; // 修改对象的 age 属性console.log("内部:", obj);
}//在updateAge函数中，obj实际上是对person对象的引用。对obj.age的修改直接影响了person.age的值。
//因此当在updateAge函数中增加age时，person对象的age属性也发生了变化。
console.log("修改前:", person); // 输出: { name: 'Alice', age: 25 }
updateAge(person); // 传递引用
console.log("修改后:", person); // 输出: { name: 'Alice', age: 26 }
自动侦听器 watchEffect
当在watchEffect内部引用响应式数据（如ref或reactive的属性）时，Vue会自动追踪这些依赖。这意味着只要这些数据发生变化，watchEffect内的函数就会被重新执行。包括：
- 用户在界面上进行交互导致数据变化。
- 程序代码直接修改数据的情况。
- 刷新页面并重新挂载组件时，watchEffect也会在组件首次加载时执行一次。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Demo</title><script src="vue.global.js"></script>
</head>
<body><div id="app">颜色<select v-model="color"><option value="">请选择</option><option value="1">红色</option><option value="2">绿色</option><option value="3">蓝色</option></select><hr>年<select v-model="date.year"><option value="">请选择</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option></select>月<select v-model="date.month"><option value="">请选择</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></div><script type="module">/*watch需要显式指定要监听的属性, 并且只有当监听的属性发生变化时才会执行若需要更精细地控制或需要获取到原值, 需要使用watch*/import { createApp, ref, reactive, watchEffect } from './vue.esm-browser.js'createApp({setup() {const color = ref("") //颜色const date = reactive({ //日期year: "2024",month: "11"})//自动监听watchEffect(() => {console.log("------ 监听开始")if (color.value == "2") {console.log("绿色")}if (date.year == "2025") {console.log("2025")}if (date.month == "11") {console.log("11")}console.log("------ 监听结束")})return {color,date}}}).mount("#app")</script>
</body>
</html>
上述程序运行结果如下图所示：
相关文章：
【Vue3】一文全览基础语法-案例程序及配图版
文章目录 Vue应用基本结构模块化开发ref和reactive绑定事件 v-on 简写显示和隐藏 v-show条件渲染 v-if动态属性绑定 v-bind 简写：遍历数组或对象 v-for双向数据绑定 v-model渲染数据 v-text 和 v-html计算属性 computed侦听器 watch自动侦听器 watchEffect 本文示例…...
【OpenSearch】安装部署OpenSearch和OpenSearch-Dashboard
一、安装OpenSearch 1.禁用主机swap提高性能 sudo swapoff -a2.增加OpenSearch可用的内存映射数量。 编辑sysctl配置文件 sudo vi /etc/sysctl.conf在文件中添加一行来定义所需的值， 或者如果键存在，则更改值，然后保存您的更改。 vm.max…...
【系统架构设计师】2023年真题论文: 论软件可靠性评价的设计与实现（包括和素材和论文）
更多内容请见： 备考系统架构设计师-专栏介绍和目录 文章目录 真题题目（2023年 试题3）论文素材参考论文参考摘要正文总结真题题目（2023年 试题3） 软件可靠性评价是利用可靠性数学模型、统计技术等,对软件失效数据进行处理,评估和预测软件可靠性的过程,包括选择模型、收集数…...
教程：使用 InterBase Express 访问数据库（二）
1. 添加数据模块（IBX 通用教程） 本节将创建一个数据模块（TDataModule），这是一种包含应用程序使用的非可视组件的表单。 以下是完全配置好的 TDataModule 的视图： 创建 TDataModule 后，您可以在其他表单中使用这个数据模块。 2. 添加 TDataModule 要将数据模块添加到…...
Windows密码的网络认证---基于挑战响应认证的NTLM协议
一，网络认证NTLM协议简介 在平时的测试中，经常会碰到处于工作组的计算机，处于工作组的计算机之间是无法建立一个可信的信托机构的，只能是点对点进行信息的传输。 举个例子就是，主机A想要访问主机B上的资源，…...
fpga 常量无法改变
parameter LED_ON_PERIOD0 n0*CLOCK_FREQ; parameter LED_OFF_PERIOD0 (2-n0)*CLOCK_FREQ;这种代码的变量不会无法内部修改 需要改成reg形式并在这种逻辑里面修改变量 always (posedge clk_ref or negedge sys_rst_n) begin虽然是并行逻辑 但是变量尽量还是先赋值从硬件上并…...
【HarmonyOS NEXT】如何给未知类型对象定义类型并使用递归打印所有的Key
关键词：嵌套对象、类型、递归、未知类型 目录 使用 Record 与 ESObject 定义未知对象类型 递归打印未知类型对象的key 在鸿蒙应用开发中，所有的数据都必须定义类型，且不存在 any 类型，那么我们当遇到 key 值可能随时变化的情况…...
RuoYi 样例框架运行步骤（测试项目自用，同学可自取）
目录 后台 API 运行导入，下载包端口号mysql 准备运行 PC（电脑端）运行安装 nodejs安装 yarn 及其依赖，启动服务登录admin(admin123) 或 ry(admin123) App（移动）运行下载 HBuilderX运行app运行注意࿱…...
Java进程CPU飙高排查
一、首先通过top指令查看当前占用CPU较高的进程pid 二、查看当前进程消耗资源的线程PID： top -Hp pid 使用 top -Hp <pid> 命令（pid为Java进程的id号）查看该Java进程内所有线程的资源占用情况。 三、通过print命令将线程pid转为16进…...
conda的对应环境下安装cuda11.0和对应的cudnn
在 Conda 环境中安装 CUDA 11.0 和对应的 cuDNN，可以按照以下步骤进行： 一. 环境配置 1. 创建 Conda 环境 首先，创建一个新的 Conda 环境（可选）： conda create -n myenv python3.8 conda activate myen…...
微服务透传日志traceId
问题 在微服务架构中，一次业务执行完可能需要跨多个服务，这个时候，我们想看到业务完整的日志信息，就要从各个服务中获取，即便是使用了ELK把日志收集到一起，但如果不做处理，也是无法完整把一次业…...
【自然语言处理与大模型】大模型（LLM）基础知识②
（1）LLaMA输入句子的长度理论上可以无限长吗？ 理论上来说，LLM大模型可以处理任意长度的输入句子，但实际上存在一些限制。下面是一些需要考虑的因素： 1. 计算资源：生成长句子需要更多的计算资源&a…...
新能源汽车的未来：车载电源与V2G技术的前景
近年来，新能源汽车在全球市场上发展迅速，尤其是在中国，新能源汽车的月销量已经超过了燃油车。随着新能源技术的不断发展，新能源汽车不仅仅是作为出行工具，而逐渐成为“移动能源站”。本文将探讨电动汽车的车载外放电功…...
Git 本地操作（2）
会以下操作就可以完成本地的版本控制了，就不需要再复制文件每次改一个东西就复制整个工程保存下来啦！ 建议先看上一篇文章噢 ！！！ 一、新建项目git本地操作 1、初始化仓库 创建一个 project 文件夹，将需…...
项目管理软件：5款甘特图工具测评
在项目管理中，甘特图作为一种直观且高效的任务进度展示工具，被广泛应用于各个行业。以下是几款功能强大、易于使用的甘特图工具，它们能够帮助项目经理更好地规划、跟踪和管理项目进度。 1、进度猫 进度猫是国内项目管理新秀，是…...
Unreal5从入门到精通之如何在指定的显示器上运行UE程序
前言 我们有一个设备，是一个带双显示器的机柜，主显示器是一个小竖屏，可以触屏操作，大显示器是一个普通的横屏显示器。我们用这个机柜的原因就是可以摆脱鼠标和键盘，直接使用触屏操作，又可以在大屏观看，非常适合用于教学。 然后我们为这款机柜做了很多个VR项目，包括Uni…...
【Spring MVC】DispatcherServlet 请求处理流程
一、 请求处理 Spring MVC 是 Spring 框架的一部分，用于构建 Web 应用程序。它遵循 MVC（Model-View-Controller）设计模式，将应用程序分为模型（Model）、**视图（View）和控制器&#x…...
【优选算法】——二分查找！
目录 1、二分查找 2、在排序数组中查找元素的第一个和最后一个位置 3、搜索插入位置 4、x的平方根 5、山脉数组的封顶索引 6、寻找峰值 7、寻找旋转排序数组中的最小值 8、点名 9、完结散花 1、二分查找 给定一个 n 个元素有序的（升序）整型数组…...
leetcode hot100【LeetCode 300. 最长递增子序列】java实现
LeetCode 300. 最长递增子序列 题目描述 给定一个未排序的整数数组 nums，找出其中最长递增子序列的长度。 要求： 子序列是由数组派生而来的序列，删除（或不删除）数组中的元素而不改变其余元素的顺序。例如࿰…...
sql注入——靶场Less1
?id1 ?id99union select 1,2,3-- 查看占位 ?id1 order by 3-- 尝试出表有几列 ?id1 order by 4-- 说明只有三列 ?id99 union select 1,database(),3-- 查询当前使用的数据库的名称 ?id99 union select 1,group_concat(table_name),3 from information_schema.tables …...
docker file容器化部署Jenkins（一）
Jenkins Github地址：https://github.com/jenkinsci/jenkins 国内镜像地址：https://docker.aityp.com/ 准备工作 # 创建持久化卷目录 mkdir /data/jenkins_home/Jenkins拉取镜像 # 由于Jenkins需要JDK，所以直接拉取带有JDK的Jenkins镜像 doc…...
ArkTS组件继承的高级用法
在HarmonyOS应用开发中，ArkTS作为开发语言，组件的继承是实现代码复用和扩展功能的重要机制。本文将详细介绍ArkTS中组件继承的高级用法，包括继承的概念、如何使用继承、以及继承在实际开发中的应用和最佳实践。 继承的概念 继承是面向对象编…...
第十二章 spring Boot+shiro权限管理
学习目标 引入依赖配置Shiro设计数据库表编写Mapper、Service和Controller前端页面测试与调优其他注意事项 Spring Boot与Shiro的集成是一种常见的Java Web应用程序权限管理解决方案。Shiro是一个强大的Java安全框架，提供了认证、授权、会话管理、加密等安全功能。以…...
jmeter基础01-3_环境准备-Linux系统安装jdk
Step1. 查看系统类型 打开终端，命令行输入uname -a，显示所有系统信息，包括内核名称、主机名、内核版本等。 如果输出是x86_64，则系统为64位。如果输出是i686 或i386，则系统为32位。 Step2. 官网下载安装包 https://www…...
数字证书的简单记录
CA（Certificate Authority）：即数字证书颁发认证机构。 CA数字证书（crt/cer证书）：数字证书 申请者与颁发者信息申请者公钥颁发者签名，由CA机构使用私钥签名得到数字证书。 CA中间证书࿱…...
ssm基于SSM的校内信息服务发布系统的设计与实现+vue
系统包含：源码论文 所用技术：SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习，获取源码看文章最下面 需要定制看文章最下面 目 录 摘要 1 Abstract 1 目 录 2 1绪论 4 1.1研究背景与意义 4 1.2国内外研究现状 4 1.3研究…...
Java 教程简介
Java 教程简介 Java 是 Sun Microsystems 公司于 1995 年 5 月推出的一种面向对象的编程语言和运行平台，由 James Gosling 和他的同事共同研发。当前，这个产品已被 Oracle 公司所收购。这篇教程将带你了解 Java 的一些基础知识和应用。 Java 系统简介 …...
【C/C++】【三种方法】模拟实现strlen
学习目标： 使用代码模拟实现strlen。 逻辑： strlen 需要输入一个字符串数组类型的变量，并且返回一个整型类型的数据。strlen 需要计算字符串数组有多少个元素。 代码1：使用计数器 #define _CRT_SECURE_NO_WARNINGS 1 #include&…...
外贸平台开发多语言处理的三种方式
随着全球贸易的不断增长，外贸平台的多语言处理已成为提升用户体验和市场竞争力的重要因素。在开发外贸平台时，有多种方法可以实现多语言支持。本文将探讨三种主要的多语言处理方式：数据库级多语言支持、前端国际化框架以及内容管理系统&#…...
学习GCC
浅显易懂的GCC使用教程——初级篇_gcc -ddebug-CSDN博客 本文摘抄学习自上面的文章！ GCC: GNU Compiler Collection: GNU编译器套件，属于一种编程语言编译器，其原名为GCC(GNU C Compiler)，即GNU c语言编译器，虽然缩写…...