Vue--常用组件解析

绑定事件v-on和按键修饰符

  • v-on:click 表示在button元素上监听click事件 简写:@click

  • enter space tab 按键修饰符

  • keyup是用户松开按键才触发

  • keydown是在用户按下按键时立即触发

代码展示:

<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app">{{msg}}<h2>{{web.title}}</h2><h2>{{web.age}}</h2><a :href="web.url">{{web.url}}</a><!--  v-on:click 表示在button元素上监听click事件--><button v-on:click="edit">修改url</button><!--  简写:@click--><button @click="edit">修改url-简写模式</button>​<hr><!--  当用户按下回车键并松开的时候触发-->回车<input type="text" @keyup.enter="add(1,2)"><br>空格<input type="text" @keyup.space="add(1,2)"><br><!--  不能使用keyup,当按下tab键时,光标会移到下一个文本框,失去焦点,所以要使用keydown-->Tab<input type="text" @keydown.tab="add(1,2)"><br>W <input type="text" @keyup.w="add(1,2)"><br><!--  组合快捷键-->CTRL+shift+enter <input type="text" @keyup.ctrl.shift.enter="add(1,2)"></div><script type="module">import {createApp,reactive} from "./vue.esm-browser.js";createApp({setup(){const web=reactive({title:'vue3',author:'vue',year:'2023',age:18,url:'https://www.baidu.com'})const edit= ()=>{web.url='https://www.meituan.com'}const add =(a,b)=>{return web.age += a+b}return{msg:'hello world',//普通变量web,//响应式数据edit,add}}}).mount('#app')</script></body></html>

显示和隐藏 v-show

v-show:通过设置布尔值确定是否显示

原理:通过添加移除插件中style的display:none来实现显示与隐藏

代码展示:

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><h2>{{web.show}}</h2><p v-show="web.show"> 你好,Vue</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-if 用于对元素进行条件渲染,当条件为true时,渲染该元素,当为false时,则不渲染

  • v-if 适用于较少改变的场景,因为频繁从DOM中添加与删除元素,会导致性能下降

  • v-else-if v-else

  • v-show 通过添加移除插件中style的display:none来实现显示与隐藏

  • v-show 适用于频繁切换元素的显示状态,因为只改变display属性,不需要重新渲染整个组件

 
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><h2>{{web.show}}</h2><p v-show="web.show"> 你好,Vue</p><p v-if="web.show">你好,if</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:11100})const toggle=()=>{web.show=!web.show}return{web,toggle//方法}}}).mount('#app')</script></body></html>

Vue:双向数据绑定 v-model

什么是双向数据绑定

Vue. js 是一个MVVM 框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是,我们所说的数据双向绑定,一定是对于U1控件醉说的,非UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突。

为什么要实现数据的双向绑定

在 Vue.js 中,如果使用 vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI 控件来说,对于我们处理表单,Vue. js 的双向数据绑定用起来就特别舒服了。即两者并不互斥,在全局性数据流使用单项,方便跟踪;局部性数据流使用双向,简单易操作。

在表单中使用双向数据绑定

你可以用 v-model指令在表单<input>、(textarea)及<select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。 注意:v-model 会忽略所有表单元素的value、checked、selected 特性的初始值而总是将Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

代码示例

 
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app">输入的文本: <input type="text" v-model="number">{{number}}文本域: <textarea name="" id="" cols="30" rows="10" v-model="obj.name"></textarea> {{obj.name}}<br>单选框: <input type="radio" v-model="obj.name" value="zhangsan">zhangsan<input type="radio" v-model="obj.name" value="lisi">lisi<p>选中了谁:{{obj.name}}</p>下拉框:<select v-model="obj.name"><option value="" disabled>===请选择===</option><option value="zhangsan" selected>zhangsan</option><option value="lisi">lisi</option></select></div><script type="module">import {createApp,ref,reactive} from './vue.esm-browser.js'createApp({setup(){const number = ref(0)//响应式数据 ref用于存储单个基本类型的数据,如数字,字符串等number.value = 20 // 使用ref创建的响应式对象,可以直接修改其value值const obj = reactive({//响应式数据 reactive用于存储对象,数组等复杂数据类型name:'zhangsan',age:18})obj.name = 'lisi'//使用reactive创建的响应式对象,可以直接通过属性名修改其属性值return{msg:'hello world',number,obj}}}).mount('#app')</script>​</body></html>

注意:如果v-model表达式的初始值未能匹配任何选项,<select>元素会被渲染为“未选中状态”,推荐提供一个值为空的禁用选择项

v-model常用修饰符
  • v-model.lazy:在失去焦点或按下回车键之后渲染

  • v-model.number:输入框的值被转换成数字类型,非数字类型不识别

  • v-model.trim:去除首尾空格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h3>url:{{web.url}}</h3><h3>user:{{web.user}}</h3>实时渲染<input type="text" v-model="web.url"><br>
<!--    输入100人,web.user的值仍为100-->在失去焦点或按下回车键之后渲染<input type="text" v-model.lazy="web.url"><br>输入框的值被转换成数字类型<input type="text" v-model.number="web.user"><br>去除首尾空格<input type="text" v-model.trim="web.url"><br>
</div>
<script type="module">import {createApp,reactive} from './vue.esm-browser.js'createApp({setup(){const web = reactive({url:'https://www.baidu.com',user:10})return{web}}}).mount('#app')</script>
</body>
</html>

v-for(循环)

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div class="app"><li v-for="(item,index) in vm.items">{{item.name}}===={{index}}</li></div><script type="module">import {createApp,reactive,ref} from "./vue.esm-browser.js";createApp({setup(){const vm = reactive({msg:"hello world",items:[{name:"xwq",age:18},{name:"xwq1",age:19},{name:"xwq2",age:20}]})const message = ref("hello world1")return{vm,message}}}).mount(".app")</script></body></html>

Attribute绑定 :v-bind:

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute,应该使用 v-bind指令

 <b :class="{textColor:web.fontStatus}"> 你好</b>

v-bind 指令指示 Vue 将元素的 class attribute 与组件的 选择器 属性保持一致。如果绑定的值是 null 或者 undefined,那么该 attribute 将会从渲染的元素上移除。

可以直接简写为 v-bind: ==》:

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样,但它的确是合法的 attribute 名称字符,并且所有支持 Vue 的浏览器都能正确解析它。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<style>.textColor{color: red;}
</style>
<div id="app">
<!--    :value--><h3>value="xwqnoicwen"</h3><input type="text" value="xwqnoicwen"><h3>value="xwqnoicwen"</h3><input type="text" v-bind:value="web.url"><p></p><input type="text" :value="web.url">
<!--:src--><h3>src="101.png"</h3><img src="101.png" style="width: 10%" height="10%"><p></p><img :src="web.img" style="width: 10%" height="10%">
<!--    :class--><h3>class="textColor"</h3><b class="textColor"> 你好</b><p></p>
<!--    可以通过布尔值确认是否渲染样式--><b :class="{textColor:web.fontStatus}"> 你好</b>
</div>
<script type="module">import {createApp,reactive} from './vue.esm-browser.js'createApp({setup(){const web = reactive({url:'https://www.baidu.com',fontStatus:false,img:"101.png"})return{web}}}).mount("#app")
</script>
</body>
</html>

渲染数据 v-text和v-html

  • v-text将数据解析纯文本格式 与{{}}作用相同

  • v-html将数据解析成HTML格式

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="vue.global.js"></script></head><body><div id="app"><!--    差值表达式,将vue实例中定义的数据在视图中渲染-->{{msg}}<h2>{{web.title}}</h2><p>Using text interpolation: {{ rawHtml }}</p><p>Using v-html directive: <span v-text="rawHtml"></span></p><p>Using v-html directive: <span v-html="rawHtml"></span></p><a :href="web.url">{{web.title}}</a></div><script>//这里使用的是一种解构赋值语法,将vue对象中的createApp方法,reactive方法,mount方法等挂载到Vue上const {createApp,reactive,ref} = VuecreateApp({//设置响应数据和方法等setup(){const web=reactive({title:'vue3',author:'vue',year:'2023',url:'https://www.baidu.com'})const rawHtml = '<span style="color:red">this should be red</span>'return{msg:'hello world',web,rawHtml}}}).mount('#app')</script></body></html>

计算属性 computed

计算属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果:

 
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><h2>{{add()}}</h2><h2>{{add()}}</h2><h2>{{sum}}</h2><h2>{{sum}}</h2>​</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{add,sum}}}).mount('#app')</script></body></html>

若我们将同样的函数定义为一个方法而不是计算属性,两种方式在结果上确实是完全相同的,

不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

这意味着只要 author.books 不改变,无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果,而不用重复执行 getter 函数。

这也解释了为什么下面的计算属性永远不会更新,因为 Date.now() 并不是一个响应式依赖:

js

 const now = computed(() => Date.now())

相比之下,方法调用总是会在重渲染发生时再次执行函数。没有缓存

为什么需要缓存呢?想象一下我们有一个非常耗性能的计算属性 list,需要循环一个巨大的数组并做许多计算逻辑,并且可能也有其他计算属性依赖于 list。没有缓存的话,我们会重复执行非常多次 list 的 getter,然而这实际上没有必要!如果你确定不需要缓存,那么也可以使用方法调用。

手动监听侦听器 watch()

侦听一个或多个响应式数据源,并在数据源变化时调用所给的回调函数。

详细:

watch() 默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数。

第一个参数是侦听器的。这个来源可以是以下几种:

  • 一个函数,返回一个值

  • 一个 ref

  • 一个响应式对象

  • ...或是由以上类型的值组成的数组

第二个参数是在发生变化时要调用的回调函数。这个回调函数接受三个参数:新值、旧值,以及一个用于注册副作用清理的回调函数。该回调函数会在副作用下一次重新执行前调用,可以用来清除无效的副作用,例如等待中的异步请求。

当侦听多个来源时,回调函数接受两个数组,分别对应来源数组中的新值和旧值。

第三个可选的参数是一个对象,支持以下这些选项:

  • immediate:在侦听器创建时立即触发回调。第一次调用时旧值是 undefined

  • deep:如果源是对象,强制深度遍历,以便在深层级变更时触发回调。在 3.5+ 中,此参数还可以是指示最大遍历深度的数字。参考深层侦听器。

  • flush:调整回调函数的刷新时机。参考回调的刷新时机及 watchEffect()。

  • onTrack / onTrigger:调试侦听器的依赖。参考调试侦听器。

  • once:(3.4+) 回调函数只会运行一次。侦听器将在回调函数首次运行后自动停止。

与 watchEffect() 相比,watch() 使我们可以:

  • 懒执行副作用;

  • 更加明确是应该由哪个状态触发侦听器重新执行;

  • 可以访问所侦听状态的前一个值和当前值。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>侦听器</title></head><body><div id="app">爱好<select v-model="hobby"><option value="" disabled>请选择</option><option value="1">足球</option><option value="2">篮球</option><option value="3">排球</option></select><hr>年<select v-model="date.year"><option value="" disabled>请选择</option><option value="2020">2020</option><option value="2021">2021</option><option value="2023">2022</option></select>月<select v-model="date.month"><option value="" disabled>请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div><script type="module">import {createApp,ref,reactive,watch} from './vue.esm-browser.js'createApp({setup(){const hobby = ref('')//爱好const date = reactive({year:'2023',month:'1'})// 监听hobby的变化 通过监听的值,可以获取到变化前后的值,这样当你切换到某个选项时,我们可以进行对应的操作watch(hobby,(newValue,oldValue)=>{console.log("newValue\t"+newValue,"oldValue\t"+oldValue)if(newValue==='1'){alert('足球')}else if(newValue==='2'){alert('篮球')}else if(newValue==='3'){alert('排球')}})// 监听date的变化watch(date,(newValue,oldValue)=>{/**JS中对象和数组是通过引用传递的,而不是通过值传递的* 当修改对象或数组的时候,实际上修改的是对象或数组的引用,而不是创建一个新的对象或数组* 所以,当监听到date的变化时,newValue和oldValue都是同一个对象,* 所以,如果修改了对象或数组的值,那么打印的结果是修改后的值*/console.log("newValue\t",newValue,"oldValue",oldValue)if(newValue.year==='2020'&&newValue.month==='1'){alert('2020年1月')}else if(newValue.year==='2021'&&newValue.month==='2'){alert('2021年2月')}else if(newValue.year==='2023'&&newValue.month==='3'){alert('2023年3月')}})//监听date.year的变化watch(()=>date.year,(newValue,oldValue)=>{console.log("newValue\t",newValue,"oldValue\t",oldValue)if(newValue==='2020'){alert('2020年')}else if(newValue==='2021'){alert('2021年')}else if(newValue==='2023'){alert('2023年')}})return{hobby,date}}}).mount('#app')</script></body></html>

自动侦听器 watchEffect()

立即运行一个函数,同时响应式地追踪其依赖,并在依赖更改时重新执行。

第一个参数就是要运行的副作用函数。这个副作用函数的参数也是一个函数,用来注册清理回调。清理回调会在该副作用下一次执行前被调用,可以用来清理无效的副作用,例如等待中的异步请求 (参见下面的示例)。

第二个参数是一个可选的选项,可以用来调整副作用的刷新时机或调试副作用的依赖。

默认情况下,侦听器将在组件渲染之前执行。设置 flush: 'post' 将会使侦听器延迟到组件渲染之后再执行。详见回调的触发时机。在某些特殊情况下 (例如要使缓存失效),可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 flush: 'sync' 来实现。然而,该设置应谨慎使用,因为如果有多个属性同时更新,这将导致一些性能和数据一致性的问题。

简单代码展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>侦听器</title>
</head>
<body>
<div id="app">爱好<select v-model="hobby"><option value="" disabled>请选择</option><option value="1">足球</option><option value="2">篮球</option><option value="3">排球</option></select><hr>年<select v-model="date.year"><option value="" disabled>请选择</option><option value="2020">2020</option><option value="2021">2021</option><option value="2022">2022</option></select>月<select v-model="date.month"><option value="" disabled>请选择</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>
</div>
<script type="module">import {createApp,ref,reactive,watchEffect} from './vue.esm-browser.js'createApp({setup(){const hobby = ref('')//爱好const date = reactive({year:'2023',month:'1'})//自动监听watchEffect(()=> {console.log("监听开始")if (hobby.value === '1') {alert('足球')}if (date.year === '2022') {alert('2022')}if (date.month === '3') {alert('3')}})return{hobby,date}}}).mount('#app')
</script>
</body>
</html>

返回值是一个用来停止该副作用的函数。

 const count = ref(0)​watchEffect(() => console.log(count.value))// -> 输出 0​count.value++// -> 输出 1

停止侦听器:

js

 const stop = watchEffect(() => {})​// 当不再需要此侦听器时:stop()

暂停/恢复侦听器:

js

 const { stop, pause, resume } = watchEffect(() => {})​// 暂停侦听器pause()​// 稍后恢复resume()​// 停止stop()

副作用清理:

js

 watchEffect(async (onCleanup) => {const { response, cancel } = doAsyncWork(newId)// 如果 `id` 变化,则调用 `cancel`,// 如果之前的请求未完成,则取消该请求onCleanup(cancel)data.value = await response})

3.5+ 中的副作用清理:

js

 import { onWatcherCleanup } from 'vue'​watchEffect(async () => {const { response, cancel } = doAsyncWork(newId)// 如果 `id` 变化,则调用 `cancel`,// 如果之前的请求未完成,则取消该请求onWatcherCleanup(cancel)data.value = await response})

选项:

js

 watchEffect(() => {}, {flush: 'post',onTrack(e) {debugger},onTrigger(e) {debugger}})

以上就是Vue.js常用的指令,希望对大家有所帮助

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

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

相关文章

《JVM考古现场(十八):造化玉碟·用字节码重写因果律的九种方法》

"鸿蒙初判&#xff01;当前因果链突破十一维屏障——全体码农修士注意&#xff0c;《JVM考古现场&#xff08;十八&#xff09;》即将渡劫飞升&#xff01;" 目录 上卷阴阳交缠 第一章&#xff1a;混沌初开——JVM因果律的量子纠缠 第二章&#xff1a;诛仙剑阵改—…

前端vue 项目px转为rem的自适应解决方案

postcss-pxtorem&#xff08;或是postcss-px2rem&#xff09; npm install postcss-pxtorem amfe-flexible --save-dev 在入口文件 main.js 中引入 amfe-flexible&#xff08;响应式适配&#xff09;&#xff1a; main.js import amfe-flexible // 自动设置 html 的 font-s…

基于时间序列分解与XGBoost的交通通行时间预测方法解析

一、问题背景与数据概览 在城市交通管理系统中,准确预测道路通行时间对于智能交通调度和路径规划具有重要意义。本文基于真实道路传感器数据,构建了一个结合时间序列分解与机器学习模型的预测框架。数据源包含三个核心部分: 道路通行数据(new_gy_contest_traveltime_train…

Day14:关于MySQL的索引——创、查、删

前言&#xff1a;先创建一个练习的数据库和数据 1.创建数据库并创建数据表的基本结构 -- 创建练习数据库 CREATE DATABASE index_practice; USE index_practice;-- 创建基础表&#xff08;包含CREATE TABLE时创建索引&#xff09; CREATE TABLE products (id INT PRIMARY KEY…

【C++】继承:万字总结

&#x1f4dd;前言&#xff1a; 这篇文章我们来讲讲面向对象三大特性之一——继承 &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;个人专栏&#xff1a;C学习笔记 &#x1f380;CSDN主页 愚润求学 &#x1f304;其他专栏&#xff1a;C语言入门基础&#xff0c;py…

Java 架构设计:从单体架构到微服务的转型之路

Java 架构设计&#xff1a;从单体架构到微服务的转型之路 在现代软件开发中&#xff0c;架构设计的选择对系统的可扩展性、可维护性和性能有着深远的影响。随着业务需求的日益复杂和用户规模的不断增长&#xff0c;传统的单体架构逐渐暴露出其局限性&#xff0c;而微服务架构作…

Django3 - 开启Django Hello World

一、开启Django Hello World 要学习Django首先需要了解Django的操作指令&#xff0c;了解了每个指令的作用&#xff0c;才能在MyDjango项目里编写Hello World网页&#xff0c;然后通过该网页我们可以简单了解Django的开发过程。 1.1 Django的操作指令 无论是创建项目还是创建项…

2025阿里云AI 应用-AI Agent 开发新范式-MCP最佳实践-78页.pptx

2025阿里云AI 应用-AI Agent 开发新范式-MCP最佳实践&#xff0c;包含以下内容&#xff1a; 1、AI 应用架构新范式 2、云原生API网关介绍 3、云原生API网关底座核心优势 4、流量网关最佳实践 5、AI 网关代理 LLM 最佳实践 6、MCP网关最佳实践 7、MSE Nacos MCP Server 注册中心…

Pytorch深度学习框架60天进阶学习计划 - 第41天:生成对抗网络进阶(一)

Pytorch深度学习框架60天进阶学习计划 - 第41天&#xff1a;生成对抗网络进阶&#xff08;一&#xff09; 今天我们将深入探讨生成对抗网络(GAN)的进阶内容&#xff0c;特别是Wasserstein GAN&#xff08;WGAN&#xff09;的梯度惩罚机制&#xff0c;以及条件生成与无监督生成…

大模型到底是怎么产生的?一文了解大模型诞生全过程

前言 大模型到底是怎么产生的呢? 本文将从最基础的概念开始,逐步深入,用通俗易懂的语言为大家揭开大模型的神秘面纱。 大家好,我是大 F,深耕AI算法十余年,互联网大厂核心技术岗。 知行合一,不写水文,喜欢可关注,分享AI算法干货、技术心得。 【专栏介绍】: 欢迎关注《…

五子棋(测试报告)

文章目录 一、项目介绍二、测试用例三、自动化测试用例的部分展示注册登录游戏大厅游戏匹配 总结 一、项目介绍 本项目是一款基于Spring、SpringMVC、MyBatis、WebSocket的双人实时对战五子棋游戏,游戏操作便捷&#xff0c;功能清晰明了。 二、测试用例 三、自动化测试用例的…

idea开发工具多账号使用拉取代码报错问题

设置git不使用凭证管理 把 use credential helper 取消勾选 然后重新pull代码&#xff0c;并勾选remember 这样就可以使用多账号来连接管理代码了

【OpenCV】【XTerminal】talk程序运用和linux进程之间通信程序编写,opencv图像库编程联系

目录 一、talk程序的运用&Linux进程间通信程序的编写 1.1使用talk程序和其他用户交流 1.2用c语言写一个linux进程之间通信&#xff08;聊天&#xff09;的简单程序 1.服务器端程序socket_server.c编写 2.客户端程序socket_client.c编写 3.程序编译与使用 二、编写一个…

【软考系统架构设计师】信息系统基础知识点

1、 信息的特点&#xff1a;客观性&#xff08;真伪性&#xff09;、动态性、层次性、传递性、滞后性、扩压性、分享性 2、 信息化&#xff1a;是指从工业社会到信息社会的演进与变革 3、 信息系统是由计算机硬件、网络和通信设备、计算机软件、信息资源、信息用户和规章制度…

一种基于学习的多尺度方法及其在非弹性碰撞问题中的应用

A learning-based multiscale method and its application to inelastic impact problems 摘要&#xff1a; 我们在工程应用中观察和利用的材料宏观特性&#xff0c;源于电子、原子、缺陷、域等多尺度物理机制间复杂的相互作用。多尺度建模旨在通过利用固有的层次化结构来理解…

基于PyQt5的Jupyter Notebook转Python工具

一、项目背景与核心价值 在数据科学领域,Jupyter Notebook因其交互特性广受欢迎,但在生产环境中通常需要将其转换为标准Python文件。本文介绍一款基于PyQt5开发的桌面级转换工具,具有以下核心价值: 可视化操作:提供友好的GUI界面,告别命令行操作 批量处理:支持目录递归…

图论之并查集——含例题

目录 介绍 秩是什么 例子——快速入门 例题 使用路径压缩&#xff0c;不使用秩合并 使用路径压缩和秩合并 无向图和有向图 介绍 并查集是一种用于 处理不相交集合的合并与查询问题的数据结构。它主要涉及以下基本概念和操作&#xff1a; 基本概念&#xff1a; 集合&…

【数学建模】(智能优化算法)天牛须算法(Beetle Antennae Search, BAS)详解与Python实现

天牛须算法(Beetle Antennae Search, BAS)详解与Python实现 文章目录 天牛须算法(Beetle Antennae Search, BAS)详解与Python实现1. 引言2. 算法原理2.1 基本思想2.2 数学模型 3. Python实现4.实测效果测试1. Michalewicz函数的最小化测试2. Goldstein-Price函数的约束最小化 5…

【家政平台开发(42)】筑牢家政平台安全防线:安全测试与漏洞修复指南

本【家政平台开发】专栏聚焦家政平台从 0 到 1 的全流程打造。从前期需求分析,剖析家政行业现状、挖掘用户需求与梳理功能要点,到系统设计阶段的架构选型、数据库构建,再到开发阶段各模块逐一实现。涵盖移动与 PC 端设计、接口开发及性能优化,测试阶段多维度保障平台质量,…

学习笔记八——内存管理相关

&#x1f4d8; 目录 内存结构基础&#xff1a;栈、堆、数据段Rust 的内存管理机制&#xff08;对比 C/C、Java&#xff09;Drop&#xff1a;Rust 的自动清理机制Deref&#xff1a;为什么 *x 能访问结构体内部值Rc&#xff1a;多个变量“共享一个资源”怎么办&#xff1f;Weak&…