三个小时学完vue3（一）
Vue3
之前就学过一些，不过用的比较少，基本忘完了/(ㄒoㄒ)/~~
跟着B站视频迅速回忆一下
创建一个Vue 3 应用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><!-- vue3 学习： 创建一个vue3应用 -->
<body><div id="app"><!-- 插值表达式 --><!-- 可以获取到msg的值 -->{{ msg }} <h2>{{ web.title }}</h2><h2>{{ web.url }}</h2></div><script>// 去掉前面的Vue.// 使用的一种结构赋值语法，将vue对象中的createApp和reactive的属性赋值给createApp和reactive变量// Vue本身就是一个对象，而且createApp和reactive和Vue里面存在的属性一致，所有可以精确的解包const {createApp,reactive} = VuecreateApp({// setup选项， 用于设置响应式数据和方法等setup(){// 定义一个应用网站const web = reactive({title: "zzz学习编程",url: "baidu.com"})return {msg: "success",web}}}).mount("#app") // 挂载// Vue.createApp({// // setup选项， 用于设置响应式数据和方法等// setup(){// // 定义一个应用网站// const web = Vue.reactive({// title: "zzz学习编程",// url: "baidu.com"// })// return {// msg: "success",// web// }// }// }).mount("#app") // 挂载</script>
</body>
</html>
Vue 3 模块化开发
<!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">{{msg}}<h2>{{web.title}}</h2><h2>{{web.url}}</h2></div><!-- 添加属性：type="module" --><script type="module">import {createApp, reactive} from './vue.esm-browser.js'// 无法显示: 需要安装插件 live server（使用本地服务器进行调试）createApp({setup() {const web = reactive({title: "zz",url: "XXX.com"})return {msg: 'success',web}}}).mount("#app") // 挂载</script>
</body>
</html>
ref和reactive区别
<!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><!-- ref 和 reactive 的区别：ref用于存储单个基本类型的数据,如:数字、字符串等使用ref创建的响应式对象,需要通过,value属性来访问和修改其值reactive用于存储复杂数据类型,如:对象或数组等--><div id="app">{{msg}}<h2>{{ web.title }}</h2><h2>{{ web.url }}</h2><h2>{{ number }}</h2></div><script type="module">import {createApp, reactive, ref} from './vue.esm-browser.js'createApp({setup() {// ref 和 reactive 的区别// const number = ref(10)// ref 修改number的值(使用.value)// number.value = 20// 定义一个数组const number = ref([1, 2, 3])const web = reactive({title: "zz",url: 'xxx.com'})// reactive修改值，直接修改web.url = 'baidu.com'return {msg: 'ref 和 reactive 的区别',web,number}}}).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>Document</title>
</head>
<body><!-- 绑定事件 v-on最常用的是click事件--><div id="app">{{ msg }}<h2>{{ web.url }}</h2><h2>{{ web.user }}</h2><!-- 定义按钮 --><button v-on:click="edit">修改</button><br><button @click="edit">修改-简写</button> <hr>按回车键： <input type="text" @:keyup.enter="add(40, 60)"><hr>空格：<input type="text" @keyup.space="add(20, 30)"><hr><!-- 使用tab 使用：@keydown -->Tab: <input type="text" @keydown.tab="add(10, 20)"><hr>w: <input type="text" @keyup.w="add(1, 2)"><hr><!-- 组合快捷键 -->Ctrl + enter: <input type="text" @keyup.ctrl.enter="add(3, 4)"><hr>Ctrl + A: <input type="text" @keyup.ctrl.a="add(4, 5)"><hr></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({url: "baidu.com",user: 0})// 修改网站网址const edit = () => {web.url = "www.zzzz.com"}const add = (a, b) => {// 假设有两个网站（a和b）// 统计这两个网站用户的新增数量web.user += a + b}return {msg: 'success',web,edit,add}}}).mount("#app")</script>
</body>
</html>
显示和隐藏 v-show
<!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">{{ web.show }} <hr><!-- 一段文字的显示和隐藏 --><p v-show="web.show">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</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>
</body>
</html>
条件渲染 v-if
- v-show：v-show 指令是通过修改元素的 display CSS 属性来控制元素的显示与隐藏。当 v-show 绑定的值为 true 时，元素的 display 属性会恢复为原本的值（如 block、inline 等），元素会正常显示；当绑定的值为 false 时，元素的 display 属性会被设置为 none，元素在页面上不可见，但仍然会占据页面布局空间。
- v-if 指令是根据表达式的值来决定是否将元素插入到 DOM 中。当 v-if 绑定的值为 true 时，元素会被渲染到 DOM 中；当绑定的值为 false 时，元素会从 DOM 中移除，不占据页面布局空间。
性能表现：
- v-show：由于 v-show 只是修改元素的 CSS 属性，不会涉及 DOM 的插入和移除操作，因此在初始渲染时性能开销相对固定。当频繁切换元素的显示状态时，v-show 的性能表现较好，因为它只是简单地修改 CSS 属性，不会触发 DOM 的重新渲染。
- v-if：在初始渲染时会根据表达式的值来决定是否渲染元素，如果条件为 false，则不会渲染该元素，因此在条件初始值为 false 时可以节省一定的初始渲染开销。但当条件发生变化时，v-if 会涉及 DOM 的插入和移除操作，这会带来较大的性能开销，尤其是在包含大量子元素或复杂组件的情况下。因此，v-if 不适合频繁切换的场景。
使用场景 - v-show：适用于需要频繁切换元素显示状态的场景，例如实现一个下拉菜单，当用户点击菜单按钮时显示菜单，再次点击时隐藏菜单。
- v-if：适用于在运行时条件很少改变的场景，例如根据用户的权限来决定是否显示某个功能按钮。
<!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">{{ web.show }} <hr><!-- 一段文字的显示和隐藏 --><p v-show="web.show">这是一段文字</p><p v-if="web.show">这也是一段文字</p><button @click="toggle">切换显示状态</button><p v-if="web.user < 1000">新网站</p><p v-else-if="web.user >= 1000 && web.user <= 10000">优秀网站</p><p v-else>资深网站</p></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({show: true,user: 15000})// const toggle = () => {web.show = !web.show}return {web, toggle}}}).mount("#app")</script>
</body>
</html>
动态属性绑定 v-bind
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.textColor {color: blue;}</style>
</head>
<body><div id="app"><!-- :value --><h3>value="zz.com"</h3><input type="text" value="zz.com"><h3>v-bind:value="zz.com"</h3><input type="text" v-bind:value="web.url"><!-- 简写 --><h3>:value="zz.com"</h3><input type="text" :value="web.url"><!-- :src --><h3>src="pic.jpg"</h3><img src="pic.jpg" style="width: 100px;"><h3>src="pic.jpg"</h3><img :src="web.img" style="width: 100px;"><!-- :class --><h3>class="textcolor"</h3><p class="textColor">zzz学习</p><!-- 动态绑定class属性 --><h3>class="textcolor"</h3><p :class="{textColor: web.fontStatus}">zzz学习</p></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({url: 'zz.com',img: 'pic.jpg',fontStatus: false})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>Document</title>
</head>
<body><!-- 遍历数组或对象 --><div id="app"><ul><li v-for="value in data.number">{{ value }}</li></ul><!-- 数组遍历索引使用 index --><ul><li v-for="(value, index) in data.number">index ==> {{ index }}: value ==> {{ value }}</li></ul><!-- 对象遍历索引使用key --><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 }}: keye ==> {{ key }}: value ==> {{ value }}</li></ul><!-- 关于 template 更完整的说法：Vue会编译<template>里的内容，但是不会将其作为 DOM元素 渲染到页面上 --><ul><template v-for="(value, key, index) in data.user"><li v-if="index === 1">index ==> {{ index }}: keye ==> {{ key }}: value ==> {{ value }}</li></template></ul><ul><!-- 动态属性value 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: ['10', '11', '12'], // 数组user: {// 对象name: 'zzz',gender: '女'},teacher: [ // 包含两个对象的数组{ id: 100, name: '张三', web: 'zhangsan.com' },{ id: 101, name: '李四', web: 'lisi.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>Document</title>
</head>
<body><!-- 之前学的v-bind（语法糖 :）是单向绑定 --><!-- v-model双向绑定 --><div id="app"><h3>文本框：{{ data.text }}</h3><h3>单选框{{ data.radio }}</h3><h3>复选框：{{ data.checkbox }}</h3><h3>记住密码：{{ data.remember }}</h3><h3>下拉框：{{ data.select }}</h3><h3>下拉框：{{ data.select.join(',') }}</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="cc">运动<hr><!-- 单个复选框（记住密码）--><input type="checkbox" v-model="data.remember">记住密码<hr><!-- 下拉框 --><select v-model="data.select"><option value="">请选择</option><option value="A">写作</option><option value="B">画画</option><option value="C">运动</option></select><hr><select v-model="data.select" multiple><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: "zzz.com", // 文本框radio: "", // 单选checkbox: [], // 复选框remember: false, // 单个复选框- 记住密码// select: "" // 下拉框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>Document</title>
</head>
<body><div id="app"><!-- v-model修饰符 --><h3>url: {{ data.url }}</h3><h3>user: {{ data.user }}</h3>实时渲染：<input type="text" v-model="data.url"><br>失去焦点或按下回车之后在进行渲染： <input type="text" v-model.lazy="data.url"><br><!-- 输入 100人， web.user 的值仍为 100 --><!-- 不是完全控制 -->输入框的值转换为数字类型： <input type="text" v-model.number="data.user"><br><!-- trim：感觉这个在项目中还是比较常用的 -->去掉首尾空格：<input type="text" v-model.trim="data.user"></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({url: 'zz.com',user: 10})return {data}}}).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>Document</title>
</head>
<body><!-- 渲染数据：v-text和v-html --><div id="app"><h3>{{ data.title }}</h3><!-- 使用v-text --><h3 v-text="data.title"></h3><!-- 使用v-html --><!-- 解析html标签 --><h3 v-html="data.url"></h3> <!-- www.baidu.com --><!-- 直接输出内容 --><h3 v-text="data.url"></h3> <!-- <i style='color:blue;'>www.baidu.com</i> --></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const data = reactive({title: 'zzzzz',url: "<i style='color:blue;'>www.baidu.com</i>",})return {data}}}).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>Document</title>
</head>
<body><!-- 渲染数据：v-text和v-html --><div id="app"><h3>add: {{ add() }}</h3><h3>add: {{ add() }}</h3><h3>sub: {{ sub }}</h3><h3>sub: {{ sub }}</h3>x: <input type="text" v-model.number="data.x">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 sub = computed(() => {console.log("sub")return data.x - data.y})return {data,add,sub}}}).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>Document</title>
</head>
<body><!-- 渲染数据：v-text和v-html --><div id="app">爱好<select v-model="hobby"><option value="">请选择</option><option value="1">画画</option><option value="2">运动</option><option value="3">玩游戏</option></select><hr>年<select v-model="data.year"><option value="">请选择</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option></select><hr>月<select v-model="data.month"><option value="">请选择</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option></select></div><script type="module">import { createApp, ref, reactive, watch } from './vue.esm-browser.js'createApp({setup() {const hobby = ref("") // 爱好const data = reactive({year: '2022',month: '10'})watch(hobby, (newValue, oldValue) => {// console.log('newValue: ', newValue, 'oldValue:', oldValue)if (newValue === '1') {console.log('画画')}})/*watch 函数用于响应式地监听一个或多个数据源，并在数据源发生变化时执行回调函数接受的第一个参数可以是以下几种类型:响应式引用：例如 ref、computed 创建的引用。getter 函数：一个返回响应式值的函数。数组：包含多个响应式引用或 getter 函数。*/// 监听datawatch(data, (newValue, oldValue) => {/**JS中对象和数组是通过引用传递的，而不是通过值传递当修改对象或数组的值时，实际上修改的是对象或数组的引用，而不是创建一个新的对象或数组所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值*/console.log("oldValue", oldValue, "newValue", newValue)if (newValue.year == "2025") {console.log("2025")}if (newValue.month == '11') {console.log("11")}})// 监听 data 中的某个属性 yearwatch(() => data.year, (newValue, oldValue) => {console.log("oldValue", oldValue, "newValue", newValue)if (data.year == "2024") {console.log("2024")}})return {hobby,data}}}).mount("#app")</script>
</body>
</html>
自动侦听器 watchEffect
<!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><!-- 渲染数据：v-text和v-html --><div id="app">爱好<select v-model="hobby"><option value="">请选择</option><option value="1">画画</option><option value="2">运动</option><option value="3">玩游戏</option></select><hr>年<select v-model="data.year"><option value="">请选择</option><option value="2022">2022</option><option value="2023">2023</option><option value="2024">2024</option><option value="2025">2025</option></select><hr>月<select v-model="data.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, watchEffect } from './vue.esm-browser.js'createApp({setup() {const hobby = ref("") // 爱好const data = reactive({year: '2022',month: '10'})// 自动监听// 建议手动监听watchEffect(() => {console.log("----- 监听开始")if (hobby.value == "1") {console.log('画画')}if (data.year == '2025') {console.log("2025")}if (data.month == '12') {console.log("12")}console.log("----- 监听结束")})return {hobby,data}}}).mount("#app")</script>
</body>
</html>
图片轮播案例记事本案例
<!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"><h3>{{ number }}</h3><img :src=`./imgs/${number}.jpg` style="width: 300px;"> <hr><button @click="prev">上一张</button><button @click="next">下一张</button><hr><ul><li v-for="value in 3"><a href="#" @click="jump(value)">{{ value }}</a></li></ul></div><script type="module">import { createApp, reactive, ref } from './vue.esm-browser.js'createApp({setup() {const number = ref(1)const prev = () => {number.value--if (number.value == 0) {number.value = 3} }const next = () => {number.value++if (number.value == 4) {number.value = 1}}// 跳转const jump = (value) => {number.value = value}return {number,next,prev,jump}}}).mount("#app")</script>
</body>
</html>
以上内容基本涉及了vue3的一些基础语法知识。
相关文章：
三个小时学完vue3（一）
Vue3 之前就学过一些，不过用的比较少，基本忘完了/(ㄒoㄒ)/~~ 跟着B站视频迅速回忆一下 创建一个Vue 3 应用 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&…...
netty如何处理粘包半包
文章目录 NIO中存在问题粘包半包滑动窗口MSS 限制Nagle 算法 解决方案 NIO中存在问题 粘包 现象，发送 abc def，接收 abcdef原因 应用层：接收方 ByteBuf 设置太大（Netty 默认 1024）滑动窗口：假设发送方 25…...
最好Wordpree+Apache+PHP安装教程
前提需要 PHP的安装最少需要7.4以上Mysql的安装，直接默认最新版就行APache服务器（HTTP服务器，只有用这个你的软件才能在服务器上运行） 安装apache 安装 sudo apt install apache2查看防火墙 sudo ufw app list如果有 Apache那…...
0x02 js、Vue、Ajax
文章目录 js核心概念js脚本引入html的方式基础语法事件监听 Vuevue简介v-forv-bindv-if&v-showv-model&v-on Ajax js 核心概念 JavaScript：是一门跨平台、面向对象的脚本语言，用来控制网页行为实现交互效果，由ECMAScript、BOM、DOM…...
如何使用Docker搭建哪吒监控面板程序
哪吒监控（Nezha Monitoring）是一款自托管、轻量级的服务器和网站监控及运维工具，旨在为用户提供实时性能监控、故障告警及自动化运维能力。 文档地址：https://nezha.wiki/ 本章教程，使用Docker方式安装哪吒监控面板，在此之前，你需要提前安装好Docker. 我当前使用的操作系…...
智能图像处理平台：图片管理
接着我们讲图片管理，先实现图片基础的增删改查，再去考虑图像处理。 主要是，我们需要完成查询时，查询的图片的上传者的角色等级小于等于我们当前登陆账号。 后端controller： package com.llpp.controller;import cn.…...
如何使用Docker一键本地化部署LibrePhotos搭建私有云相册
文章目录 前言1.关于LibrePhotos2.本地部署LibrePhotos3.LibrePhotos简单使用4. 安装内网穿透5.配置LibrePhotos公网地址6. 配置固定公网地址 前言 你是不是也经常对着手机里那一堆珍贵的照片发愁，心里想着：‘这要是被谁偷偷看了可咋办？’别…...
删除idea recent projects 记录
1、退出idea（一定要全部退出idea，要不然删除后，idea一退出，又保存上了） 2、进入 C:\Users\Administrator\AppData\Roaming\JetBrains\IntelliJIdea2024.1\options 目录 根据不同的版本号 IntelliJIdea2024.1 这个地方…...
基因组突变数据分析-ClinVar数据库
探序基因肿瘤研究院 数据库简介：ClinVar是一个免费访问的公共数据库，记录了人类变异和表型之间的关系，并提供了支持性证据（supporting evidence）。ClinVar提供的变异临床意义（clinical significance&#…...
windows 下 使用Python OpenCV针对 压缩的tiff 图像进行解压缩 并转换成多张jpeg 图像
文章大纲 Tif/Tiff 图像简介tif 后缀的文件中为什么可以嵌入多张图片Tif 图像 与 jpg 图像转换的要点参考使用的 GitHub 仓库链接tifffile 库的功能与其他库的区别代码实现 基于 tifffile参考文献Tif/Tiff 图像简介 TIFF（Tagged Image File Format）是一种灵活且可适应的文件…...
小皮网站搭建
前提：小皮的安装下载 1、在www目录下创建一个新的文件夹，用来存放网站源码； 2、安装数据库管理工具phpMyadmin 3、新建数据表 添加字段 4、创建网站 5、前端的登录代码 注册 后端php 网页展示 登录成功跳转welcome.php...
Java8面试
Java 8 有哪些新特性? 🐎Java 8五大神装特性🐎 Lambda表达式（魔法调料） 曼波觉得像速食魔法咒语！(๑✧◡✧๑) // 传统写法（像冗长菜谱） new Thread(new Runnable() {public void run() {Syst…...
一个基于C# Winform开源免费的通用快速开发框架，内置完整的权限架构！
前言 今天大姚给大家分享一个基于C# Winform开源免费（GPL-2.0开源协议）的通用快速开发框架，内置完整的权限架构：WinformDevFramework。 项目介绍 WinformDevFramework是一个基于C# Winform开源免费（GPL-2.0开源协议…...
2025年度福建省职业院校技能大赛高职组“信息安全管理与评估”赛项规程样题模块二
模块二 网络安全事件响应、数字取证调查、应用程序安全 竞赛项目赛题 本文件为信息安全管理与评估项目竞赛-第二阶段样题，内容包括：网络安全事件响应、数字取证调查。 本次比赛时间为90分钟。 介绍 竞赛有固定的开始和结束时间，参赛队伍必须…...
【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》005-TypeScript 中的枚举
标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主&…...
使用create_sql_query_chain工具根据自然语言问题生成SQL查询，踩坑版
1. 开启调试模式 from langchain import debugdebug True # 启用调试模式说明： 这里从 langchain 库中导入了一个名为 debug 的变量（或模块），然后将它设置为 True。这通常用来启用调试模式，方便开发者在程序运行时看…...
DeepSeek本地部署+自主开发对话Web应用
文章目录 引言前端部分核心页面DeepSeek.vueMyModal.vue 后端部分WebSocketConfig 配置类AbstractDeepSeekToolDeepSeekWebSocketHandler 数据库设计总结 引言 最近DeepSeep横空出世，在全球内掀起一股热潮，到处都是满血大模型接入的应用，但这…...
【Springboot】解决问题 o.s.web.servlet.PageNotFound : No mapping for *
使用 cursor 进行老项目更新为 springboot 的 web 项目，发生了奇怪的问题，就是 html 文件访问正常，但是静态文件就是 404 检查了各种配置，各种比较，各种调试，最后放弃时候，清理没用的配置文件&…...
微信小程序点击按钮，将图片下载到本地
前言： 最近在公司完成一个小程序的时候需要实现一个功能：点击按钮获取用户相册权限，将图片下载到用户本地相册，经过了好几次的尝试最终算是实现了。将总结的经验在这里分享给小伙伴们。 实现方式： //.wxml文件 <…...
解锁网络防御新思维：D3FEND 五大策略如何对抗 ATTCK
D3FEND 简介 背景介绍 2021年6月22日（美国时间），美国MITRE公司正式发布了D3FEND——一个网络安全对策知识图谱。该项目由美国国家安全局（NSA）资助，并由MITRE的国家安全工程中心（NSECÿ…...
架构案例：从初创互联网公司到分布式存储与反应式编程框架的架构设计
文章目录 引言一、初创互联网公司架构演化案例1. 万级日订单级别架构2. 十万级日订单级别架构3. 百万级日订单级别架构 二、分布式存储系统 Doris 架构案例三、反应式编程框架架构案例总结 引言 分布式架构 今天我们将探讨三种不同类型的架构案例，分别探讨 一个初…...
Redis数据结构-List列表
1.List列表 列表类型适用于存储多个有序的字符串（这里的有序指的是强调数据排列顺序的重要，不是升序降序的意思），列表中的每个字符串称为元素（element），一个列表最多可以存储2^32-1个元素。在R…...
开启AI短剧新纪元!SkyReels-V1/A1双剑合璧!昆仑万维开源首个面向AI短剧的视频生成模型
论文链接：https://arxiv.org/abs/2502.10841 项目链接：https://skyworkai.github.io/skyreels-a1.github.io/ Demo链接：https://www.skyreels.ai/ 开源地址：https://github.com/SkyworkAI/SkyReels-A1 https://github.com/Skywork…...
mac安装环境
minconda https://docs.anaconda.net.cn/miniconda/install/ 注意在下载下来应该有100多兆，太大了应该是完整版，我们不需要 jdk 镜像网站下载设置环境变量： 终端：sudo vim ~/.zshrc # JDK Config JAVA_HOME/Library/Java/Java…...
js加密之延伸requestAnimationFrame
简言 上篇文章有提到requestAnimationFrame,只是随笔带过。这篇文章就着重研究一下requestAnimationFrame的运用，以及实际作用。还有关于在js加密技术中的落地实现可行性。 功能说明 小声说一下,做开发的同学一定要学会翻官方文档,我这里直接引用一段官方介绍。 …...
SpringBoot @Value 注解使用
Value 注解用于将配置文件中的属性值注入到Spring管理的Bean中。 1. 基本用法 Value 可以直接注入配置文件中的属性值。 配置文件 (application.properties 或 application.yml) 配置文件定义需要注入的数据。 consumer:username: lisiage: 23hobby: sing,read,sleepsubje…...
JavaFunction的使用
一、基础概念与核心方法 定义与作用 Function<T, R> 是一个函数式接口，接收类型为 T 的输入参数，返回类型为 R 的结果。其核心方法为 apply(T t)。例如，将字符串转换为整数长度： java Function<String, Integer>…...
TVbox蜂蜜影视：智能电视观影新选择，简洁界面与强大功能兼具
蜂蜜影视是一款基于猫影视开源项目 CatVodTVJarLoader 开发的智能电视软件，专为追求简洁与高效观影体验的用户设计。该软件从零开始编写，界面清爽，操作流畅，特别适合在智能电视上使用。其最大的亮点在于能够自动跳过失效的播放地址…...
Python基于交互注意力的深度时空网络融合多源信息的剩余寿命预测方法
基于交互注意力的深度时空网络融合多源信息的剩余寿命预测方法 一、方法框架设计 本方法的核心思想是通过交互注意力机制动态捕捉多源数据间的跨模态关联，并结合深度时空网络建模序列的时空退化特征。 1. 多源特征编码器 输入：传感器数据、工况参数、…...
阿里云 | 快速在网站上增加一个AI助手
创建智能体应用 如上所示，登录阿里云百炼人工智能业务控制台，创建智能体应用，智能体应用是一个agent，即提供个人或者企业的代理或中间件组件应用，对接阿里云大模型公共平台，为个人或者企业用户提供大模型应…...
基于Electron的应用程序安全测试基础 — 提取和分析.asar文件的案例研究
目录： 4.4. 案例研究 4.4.2. 情况描述 4.4.3. 信息收集 4.4.3.2. 检查隐藏目录（点目录）的可能性 4.4.3.3. 使用 DB Browser for SQLite 打开 .db 文件 4.4.3.4. 寻找加密算法 4.4.3.5. 找到加密算法 4.4.3.6. 理解加密流程 4.4.3.7. 找到“Ke…...
Vue3生命周期以及与Vue2的区别
文章目录 一、Vue3生命周期核心阶段与钩子函数二、Vue3生命周期示例：选项式 vs 组合式 API选项式 API 示例（Vue2）组合式 API 示例（Vue3） 三、Vue3与Vue2生命周期的核心差异1. 钩子函数更名2. 组合式 API 的影响3. 新增…...
windows下安装CUDA-本地微调大模型
1、查看NVIDIA的控制面板的版本号 2 下载CUDA Toolkit https://developer.nvidia.com/cuda-toolkit-archive 这里要下载和自己电脑NVIDIA适配CUDA的大版本要保持一致 选择对应的版本进行下载 文件比较大，直接右键复制链接，放到迅雷中两分钟就下好了 3 …...
LeetCode：132. 分割回文串 II（DP Java）
目录 132. 分割回文串 II 题目描述： 实现代码与解析： DP 原理思路： 132. 分割回文串 II 题目描述： 给你一个字符串 s，请你将 s 分割成一些子串，使每个子串都是回文串。 返回符合要求的 最少分割次数…...
C# 13与.NET 9革新及工业开发应用
摘要 微软推出的C# 13与.NET 9以“高效且智能”为导向，具备扩展类型、半自动属性、锁对象优化等十大革新。本文深入剖析新特性于工业级开发的应用场景，包含性能优化策略、AI集成方案以及EF Core实战技巧，为开发者提供从理论到实践的完整指引…...
IPoIB源码深度解析：如何基于TCP/IP协议栈实现高性能InfiniBand通信
一、IPoIB的核心设计理念 IPoIB（IP over InfiniBand）是一种在InfiniBand网络上承载IP流量的技术，其核心目标是在不修改上层应用的前提下，利用InfiniBand的高带宽和低延迟特性。与自定义协议栈不同，IPoIB通过深度集成到Linux内核TCP/IP协议栈中，将InfiniBand设备抽象为标…...
《白帽子讲 Web 安全：点击劫持》
目录 摘要： 一、点击劫持概述 二、点击劫持的实现示例：诱导用户收藏指定淘宝商品 案例 构建恶意页面： 设置绝对定位和z - index： 控制透明度： 三、其他相关攻击技术 3.1图片覆盖攻击与 XSIO 3.2拖拽劫持与数据…...
PostgreSQL10 逻辑复制实战：构建高可用数据同步架构！
PostgreSQL10 逻辑复制实战：打造高可用数据同步架构！ 概述 PostgreSQL 10 引入了逻辑复制（Logical Replication），为数据库高可用和数据同步提供了更灵活的选择。PostgreSQL 复制机制主要分为物理复制和逻辑复制两种&…...
Spring Boot 异步编程深入剖析
Spring Boot 异步编程深入剖析 1. 异步方法的使用 原理深度解析 Spring Boot 的异步方法基于 Spring 的 AOP（面向切面编程）实现。当在方法上添加 Async 注解时，Spring 会为该方法所在的类创建一个代理对象。当调用该异步方法时，…...
《动手学习深度学习》的笔记，将会持续更新。
1.什么是机器学习？ 机器学习是：换句话说，我们用数据训练（train）模型。 数据不断的训练出比较好的模型。 1.2 机器学习的关键零件 1.学习的数据。 2. 如何转换数据的模型。 3.一个目标函数。 4.调整模型参数以优化目标函数的算法。 1，数据有什么组成？ 数据=样本+…...
[STM32]从零开始的STM32 BSRR、BRR、ODR寄存器讲解
一、前言 学习STM32一阵子以后，相信大家对STM32 GPIO的控制也有一定的了解了。之前在STM32 LED的教程中也教了大家如何使用寄存器以及库函数控制STM32的引脚从而点亮一个LED，之前的寄存器只是作为一个引入，并没有深层次的讲解，在教…...
VUE3+Vite使用TailwindCSS【若依前后端分离框架】
参考：https://tailwind.nodejs.cn/docs/guides/vite#vue 和 https://blog.csdn.net/hjl_and_djj/article/details/144694485依次运行命令： cnpm install -D tailwindcss3.4.17 postcss autoprefixernpx tailwindcss init -p修改配置文件tailwind.config.…...
【Linux文件IO】系统IO详情
目录 一、前言 二、相关API介绍 2.1 open 2.2 read 2.3 write 2.4 lseek 2.5 close 三、简单示例 3.1 示例1 3.2 示例2 一、前言 在 Linux 系统编程中，系统 I/O（又称低级 I/O）是直接通过操作系统提供的系统调用实现的文件操作接口…...
【弹性计算】弹性裸金属服务器和神龙虚拟化（三）：弹性裸金属技术
弹性裸金属服务器和神龙虚拟化（三）：弹性裸金属技术 1.弹性裸金属技术背景1.1 传统 KVM 虚拟化系统导致 CPU 计算特性损失1.2 传统 KVM 虚拟化系统导致资源争抢不可避免1.3 传统 KVM 虚拟化系统导致 I/O 性能瓶颈 2.弹性裸金属技术实现2.1 VPC…...
(贪心 合并区间）leetcode 56
思路来源：代码随想录--代码随想录_合并区间题解 首先用lambda 按照左界值升序排序 建立答案的二维数组，将第一个行区间放入，判断从第二行开始 第i行的左区间一定大于第i-1行的左区间（排序过了），所以只判断…...
如何理解语言模型
统计语言模型 先看语言模型，语言即自然语言，模型及我们要解决的某个任务。 任务一：判断哪句话出现的概率大 任务二：预判空缺的位置最有可能是哪个词 再看统计，统计即解决上述两个任务的解决方法。先对语句进行分词…...
动态规划/贪心算法
一、动态规划 动态规划 是一种用于解决优化问题的算法设计技术，尤其适用于具有重叠子问题和最优子结构性质的问题。它通过将复杂问题分解为更简单的子问题，并保存这些子问题的解以避免重复计算，从而提高效率。 动态规划的核心思想 最优子结…...
Hadoop简介
1. Hadoop简介 官网：http://hadoop.apache.org 1.1 Hadoop架构 Hadoop由三个模块组成：分布式存储HDFS、分布式计算MapReduce、资源调度引擎YARN 1.2 Hadoop历史 Hadoop作者Doug Cutting Apache Lucene是一个文本搜索系统库 Apache Nutch作为前者的一部…...
Vscode 便用快捷键设置教程
文章目录 简介：1. go to define (跳转到函数定义的位置)2. go to declaration (跳转到函数声明的位置)3. move line （上下移动本行代码）3.1上下复制本行代码 4. 前进和后退（就是前进到光标上一次停留的位置，和后退到那…...
数据库（MySQL）：使用命令从零开始在Navicat创建一个数据库及其数据表（一）.创建基础表
一. 使用工具和命令 1.1 使用的工具 Navicat Premium 17 ：“Navicat”是一套可创建多个连接的数据库管理工具。 MySQL版本8.0.39 。 1.2 使用的命令 Navicat中使用的命令 命令 命令解释 SHOW DATABASES； 展示所有的数据库 CREATE DATABASE 数据…...