Vue 之 修饰符汇总

news2024/11/17 8:19:17

一、简介

在Vue中，修饰符是一种特殊的语法，用于修改指令或事件绑定的行为，它们以点号（.）的形式添加到指令或事件的后面，并可以改变其默认行为或添加额外的功能，如：禁止事件冒泡、数据双向绑定等，当然修饰符的功能也可以通过js在事件函数中自行实现，但是我们更希望在函数中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

​ 因此Vue为我们提供了很多修饰符，相当于将一些常用DOM事件逻辑进行了封装，根据功能类别，共分为以下几类：① 事件修饰符。② 按键修饰符。③ 系统修饰符。 ④ 鼠标修饰符。 ⑤ 表单修饰符。⑥ 其他修饰符。

​ 多个修饰符可以在同一事件上同时串联使用，多方位的限制事件的触发范围。

​ 注意：下面的案例代码，全都是在Chrome浏览器中进行的实验。

二、事件修饰符

1、.stop

​ 该修饰符用于实现阻止事件冒泡，其作用等同于event.stopPropagation()。

案例代码：
<div style="width: 200px; height: 200px; background: #ccc" @click="fatherClick()">
   <div style="width: 100px; height: 100px; background: red" @click.stop="sonClick()">
      stop修饰符测试
   </div>
</div>

<script>
 fatherClick() {
    console.log("父元素的点击事件被冒泡触发了");
 },
 sonClick() {
    console.log("带有stop修饰符的子元素被点击了");
 },
</script>
执行结果：

​ 点击子元素，子元素的事件正常触发执行，但父元素事件没有被触发。

在这里插入图片描述

2、.prevent

​ 该修饰符用于实现阻止事件的默认行为，其作用等同于event.preventDefault()。

案例代码：
<a href="https://www.baidu.com" target="_blank" @click.prevent="preventClick()">测试prevent修饰符</a>

<script>
	preventClick() {
    console.log("阻止了默认事件行为，但事件绑定函数正常执行");
  },
</script>
执行结果：

​ 点击该元素后，页面并未发生跳转，但是click事件正常触发和执行。
在这里插入图片描述

3、.capture

​ 该修饰符用于实现修改事件的传播过程为捕获模式（正常为冒泡模式），其作用等同于在使用addEventListener('事件名','事件函数',{ capture: true })注册事件时将第三个参数中的capture设置为true。

​ **冒泡模式： **事件从触发事件的元素开始向上传播，逐级向上层父元素传递，直到达到根元素（通常是 window 对象）。这意味着父元素的事件处理程序会在子元素的事件处理程序之后被调用。

​ 捕获模式： 事件从根元素开始向下传播，逐级向下层子元素传递，直到达到触发事件的元素。这意味着父元素的事件处理程序会在子元素的事件处理程序之前被调用。

案例代码：
<div style="width: 200px; height: 200px; background: #ccc" @click.capture="fatherClick()">
   <div style="width: 100px; height: 100px; background: red" @click="sonClick()">
      capture修饰符测试
   </div>
</div>

<script>
 fatherClick() {
    console.log("父元素的点击事件被触发了");
 },
 sonClick() {
    console.log("子元素的点击事件被触发了");
 },
</script>
执行结果：

​ 点击子元素后，先触发父元素的点击事件，然后再触发子元素的点击事件。

在这里插入图片描述

4、.self

​ 该修饰符用于实现，只有当触发事件的元素与当前事件绑定的元素是同一个元素时（即event.target 与event.currentTarget指向同一个元素），事件绑定函数才会被执行。主要可用来过滤因为事件冒泡而触发的事件。

​ event.currentTarget 的值只能在事件处理过程中被使用。如果尝试用 console.log()在控制台打印 event 对象，你会发现 currentTarget 的值是 null，如果想在控制台打印 currentTarget ，应该直接使用 console.log(event.currentTarget)。

案例代码：
<div style="width: 200px; height: 200px; background: #ccc" @click.self="fatherClick()">
   <div style="width: 100px; height: 100px; background: red" @click="sonClick()">
      self修饰符测试
   </div>
</div>

<script>
 fatherClick() {
    console.log("父元素的点击事件被触发了");
 },
 sonClick() {
    console.log("子元素的点击事件被触发了");
 },
</script>
执行结果：

​ 点击子元素，子元素事件正常触发执行，虽然会正常冒泡到父元素，但父元素事件不会被触发执行。只有点击父元素本身时，父元素的事件才会正常触发执行。

在这里插入图片描述

5、.once

​ 该修饰符于v2.1.4版本新增，用于实现限制事件只触发执行一次，执行完成后绑定的事件会自动被移除，其作用等同于在使用addEventListener('事件名','事件函数',{ once: true })注册事件时将第三个参数中的once设置为true。后续再次触发事件，事件并不会再次执行，但事件会正常向上冒泡。当绑定事件的元素被销毁再重绘之后，限制会重置，如果元素只是通过display: none;进行隐藏，则不会重置限制。

​ 该修饰符不仅可以用于原生DOM事件，也可用于父子组件之间的自定义组件事件。

案例代码：
<div style="width: 200px; height: 200px; background: #ccc" @click="fatherClick()">
   <div style="width: 100px; height: 100px; background: red" @click.once="sonClick()">
      once修饰符测试
   </div>
</div>

<script>
 fatherClick() {
    console.log("父元素的点击事件被触发了");
 },
 sonClick() {
    console.log("子元素的点击事件被触发了");
 },
</script>
执行结果：

​ 第一次点击子元素，子元素绑定事件正常执行，然后冒泡到父元素，父元素事件也正常执行。后续再点击子元素，子元素事件不再被触发执行，但会正常后冒泡到父元素，触发父元素事件执行。

在这里插入图片描述

6、.passive

​ 该修饰符于v2.3.0版本新增，用于告诉浏览器当前事件永远不会调用 preventDefault()来阻止默认行为，其作用等同于在使用addEventListener('事件名','事件函数',{ passive: true })注册事件时将第三个参数中的passive设置为true。并且在事件被触发时，无需等待绑定事件执行，立即执行事件的默认行为。通常用于提升移动端的滚屏性能。

​ 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告，因为.passive的目的就是告诉浏览器你不想阻止事件的默认行为。

​ 根据规范，事件的 passive 默认值始终为 false。然而，这增加了移动端触摸事件和滚轮事件的事件监听器在浏览器尝试滚动页面时阻塞浏览器主线程的可能性——这可能会大大降低浏览器处理页面滚动时的性能。为了避免这一问题，大部分浏览器（Safari 和 IE 除外）将文档级节点 Window、Document 和 Document.body 上的 wheel、mousewheel、touchstart 和 touchmove 事件的 passive 默认值更改为 true。如此，事件监听器便不能取消事件，也不会在用户滚动页面时阻止页面呈现。

案例代码：
<div @scroll.passive="onScroll()">...</div>
执行结果：

​ 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待事件绑定的onScroll()函数执行结束后再触发。

三、按键修饰符

​ 按键修饰符是Vue提供的处理键盘事件的特殊方式。它允许你在处理键盘事件时，对触发事件的按键进行限制。使用按键修饰符之后，只有修饰符对应的键盘按键才会触发对应事件。

​ 该类型的修饰符通常只在文本域元素上使用，但并不绝对，我们也可以在任何一个非文本域元素上，通过增加tabindex=0属性的方式，使元素可聚焦，从而可以使用该类型的修饰符。

1、.enter

​ 该修饰符对应键盘中的Enter回车键，限制触发事件的按键只能是Enter回车键。

案例代码：
<!-- 通过在非文本域元素中增加tabindex="0"属性 使其能够使用按键修饰符 -->
<div tabindex="0" @keyup.enter="ajFunction($event)">按键修饰符</div>
执行结果：

​ 鼠标指针点击该元素后，再按下键盘的Enter回车键，页面上该元素会出现聚焦效果，并且会触发对应的按键事件。

在这里插入图片描述

2、.tab

​ 该修饰符对应键盘中的tab键，限制触发事件的按键只能是tab键。

案例代码：
 <input @keyup.tab="ajFunction($event, 2)" placeholder="按键修饰符" />
执行结果：

​ 按下键盘的tab键，如果焦点聚焦到该元素，则会触发对应的按键事件。如果按下tab键之前，目标元素正处于聚焦状态，则焦点会切换到下一可聚焦的元素，当前元素的按键事件也不会触发。

在这里插入图片描述

3、.delete

​ 该修饰符对应键盘中的delete删除键和Backspace删除键，限制触发事件的按键只能是delete删除键Backspace删除键。

案例代码：
<input @keyup.delete="ajFunction($event, 2)" placeholder="按键修饰符" />
执行结果：

在这里插入图片描述

4、.esc

​ 该修饰符对应键盘中的esc退出键，限制触发事件的按键只能是esc退出键。

案例代码：
<input @keyup.esc="ajFunction($event, 2)" placeholder="按键修饰符" />
执行结果：

在这里插入图片描述

5、.space

​ 该修饰符对应键盘中的space空格键，限制触发事件的按键只能是space空格键。

案例代码：
<input @keyup.space="ajFunction($event, 2)" placeholder="按键修饰符" />
执行结果：

在这里插入图片描述

6、.up/.down/.left/.right

​ 这四个按键修饰对应着键盘上的上下左右四个键位，设置对应的修饰符可以限制触发事件的按键。

案例代码：
<input @keyup.up="ajFunction($event, 2)" placeholder="按键修饰符1" />
<input @keyup.down="ajFunction($event, 2)" placeholder="按键修饰符2" />
<input @keyup.left="ajFunction($event, 2)" placeholder="按键修饰符3" />
<input @keyup.right="ajFunction($event, 2)" placeholder="按键修饰符4" />
执行结果：

在这里插入图片描述

7、按键名和按键码

​ 除了使用Vue提供的按键修饰符之外，我们还可以通过按键名（KeyboardEvent.key转换为 kebab-case 来作为修饰符）和按键码（keyCode直接作为修饰符），两种方式来实现限制触发事件的按键。

​ 注意：keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。

案例代码：
<input @keyup.arrow-up="ajFunction($event, 2)" placeholder="按键修饰符2" />
执行结果：

在这里插入图片描述

四、系统修饰符

​ 系统修饰符是用来进一步限制鼠标或键盘事件的触发范围，只有在按下系统修饰符对应按键的同时，再去操作其他按键，才能触发对应的鼠标或按键事件，如果单独只按下系统修饰符对应按键或者只按下其他按键都不会触发鼠标或按键事件。

​ 例如在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。以.ctrl修饰符为例，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl或者单独释放其他按键都不会触发事件。

1、.ctrl

​ 该修饰符用于进一步限制按键事件，必须得在按下ctrl键位的同时操作其他按键才会触发对应事件。

​ 但修饰符在浏览器中不能与鼠标事件合用，因为浏览器系统定义很多关于ctrl的快捷键，可能会造成逻辑冲突。

案例代码：
<!-- 在按下ctrl的同时 松开其他任意一个按键 才会触发事件 -->
<input @keyup.ctrl="ajFunction($event, 2)" placeholder="按键修饰符1" />
<!-- 在按下ctrl的同时 松开上方向键按键 才会触发事件 -->
<input @keyup.ctrl.up="ajFunction($event, 2)" placeholder="按键修饰符1" />
执行结果：

在这里插入图片描述

2、.alt

​ 该修饰符用于进一步限制按键事件，必须得在按下alt键位的同时操作其他按键才会触发对应事件。

​ 该修饰符可以与鼠标事件合用。

​ 但是经过实践发现，该修饰符不能跟.space、.tab等部分修饰符合用，目前原因未知，怀疑是与浏览器快捷键冲突了。

案例代码：
<!-- 在按下alt的同时 用鼠标点击事件 才会触发事件 -->
<div @click.alt="ajFunction($event, 1)">系统修饰符</div>
<!-- 在按下alt的同时 松开其他任意一个按键 才会触发事件 -->
<input @keyup.alt="ajFunction($event, 2)" placeholder="按键修饰符1" />
<!-- 在按下alt的同时 松开删除按键 才会触发事件 -->
<input @keyup.alt.delete="ajFunction($event, 2)" placeholder="按键修饰符1" />
执行结果：

在这里插入图片描述

3、.shift

​ 该修饰符用于进一步限制按键事件，必须得在按下shift键位的同时操作其他按键才会触发对应事件。

​ 该修饰符可以与鼠标事件合用。

案例代码：
<!-- 在按下shift的同时 用鼠标点击事件 才会触发事件 -->
<div @click.shift="ajFunction($event, 1)">系统修饰符</div>
<!-- 在按下shift的同时 松开其他任意一个按键 才会触发事件 -->
<input @keyup.shift="ajFunction($event, 2)" placeholder="系统修饰符1" />
<!-- 在按下shift的同时 松开空格按键 才会触发事件 -->
<input @keyup.shift.space="ajFunction($event, 2)" placeholder="系统修饰符1" />
执行结果：

在这里插入图片描述

4、.meta

​ 该修饰符用于进一步限制按键事件，但是该修饰符比较特殊，在不同系统对应的按键不同。在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。

​ 该修饰符可以与鼠标事件合用，但不能跟键盘按键合用，原因未知，怀疑是与浏览器快捷键冲突了。

案例代码：
<!-- 在按下meta的同时 用鼠标点击事件 才会触发事件 -->
<div @click.meta="ajFunction($event, 1)">系统修饰符</div>
执行结果：

在这里插入图片描述

5、.exact

​ 该修饰符是在 v2.5.0 版本中新增的修饰符，用于更精准的控制系统修饰符组合触发的事件。

案例代码：
<!-- 单独使用系统修饰符alt 表示只要按下的按键中包含alt键 就可以通过鼠标触发事件 同时按下了其他按键并不影响 -->
<div @click.alt="ajFunction($event, 1)">系统修饰符1</div>
<!-- 使用系统修饰符alt+exact 表示按下的按键中只能包含alt键 不可以有其他按键 然后才能通过鼠标触发事件 
		 如果同时按下了其他按键 则不会触发事件 -->
<div @click.alt.exact="ajFunction($event, 1)">系统修饰符2</div>
<!--  单独使用系统修饰符exact 表示通过鼠标触发事件时，不能按下任何一个系统修饰符对应的按键 才能触发事件
      否则事件不会被触发-->
<div @click.exact="ajFunction($event, 1)">系统修饰符3</div>
执行结果：

在这里插入图片描述

五、鼠标按钮修饰符

​ 鼠标修饰符用来限制触发鼠标事件的按键，共分为三种：left-鼠标左键、right-鼠标右键、middle-鼠标中键(鼠标滚轮)。

1、.left

​ 该修饰限制只当点击鼠标左键时，才会触发对应的鼠标事件。

2、.right

​ 该修饰限制只当点击鼠标右键时，才会触发对应的鼠标事件。但是在网页中点击鼠标右键是会显示页面功能菜单的，可以借助.prevent取消默认行为来屏蔽显示菜单功能。

3、.middle

​ 该修饰限制只当点击鼠标中键(鼠标滚轮)时，才会触发对应的鼠标事件。

案例代码：
<div @click.left="ajFunction($event, 1)">鼠标修饰符1</div>
<div @click.right="ajFunction($event, 2)">鼠标修饰符2</div>
<div @click.middle="ajFunction($event, 3)">鼠标修饰符3</div>
执行结果：

在这里插入图片描述

六、表单修饰符

​ 该类型的修饰符基本都是在文本域元素上与v-model语法糖一起使用，用于在处理表单输入时修改或增强默认行为。下面所有讲解中的文本域元素都以input元素为示例。

1、.lazy

​ 默认情况下，使用v-model在文本域元素上实现数据的双向绑定时，都是在input 事件后更新数据（IME拼字阶段的状态例外，详情请看第二段）。我们可以通过使用该修饰符，修改更新数据的时机为每次 change 事件后。

​ 对于需要使用 IME 的语言 (中文，日文和韩文等)，你会发现 v-model 不会在 IME 输入还在拼字阶段时触发更新。如果你的确想在拼字阶段也触发更新，请直接使用自己的 input 事件监听器和 value 绑定而不要使用 v-model。

案例代码：
<input v-model="msg" @input="inputHandle" @change="changeHandle" placeholder="表单修饰符1" />
<input v-model.lazy="msg" @input="inputHandle" @change="changeHandle" placeholder="表单修饰符2" />

<script>
inputHandle() {
  console.log("input事件被触发了---", this.msg);
},
changeHandle() {
  console.log("change事件被触发了--", this.msg);
},
</script>
页面表现：

在这里插入图片描述

2、.number

​ 该修饰符的作用是将用户输入的内容自动转化成Number数字类型，其内部是通过parseFloat()方法进行处理，如果输入的内容不能被该方法处理，那将返回原始输入的内容值。如果一开始输入的内容可以被转成数字（如：123），但是后续输入的内容无法转成数字（如：123abc），则在change事件触发后，后面输入的非数字内容将会被清空，变量值最终为123。并且在input事件阶段获取到的变量值也为123，不包含后面输入的非数字内容。

​ 如果设置了input元素的type="number" ，则会自动启用该修饰符。

案例代码：
<input v-model.number="msg" @input="inputHandle" @change="changeHandle" placeholder="表单修饰符1" />
执行结果：

先输入123，然后清空，再输入abc，然后清空，最后输入123，紧接着输入abc，然后切换焦点，触发change事件

在这里插入图片描述

3、.trim

​ 该修饰符的作用是自动去除输入内容前后两端的空格。在input事件触发时，就已经将空格去除。

案例代码：
<input v-model.trim="msg" @input="inputHandle" @change="changeHandle" placeholder="表单修饰符1" />

<script>
inputHandle() {
  console.log("input事件被触发了---",this.msg,"--数据长度--",this.msg.length);
},
changeHandle() {
  console.log("change事件被触发了--",this.msg,"--数据长度--",this.msg.length);
},
</script>
页面效果：

在这里插入图片描述

七、其他修饰符

1、.sync

​ 该修饰符用于实现父子组件之间props传递数据的双向绑定。在父组件向子组件传值时，使用该修饰符后，我们就可以直接在子组件中通过$emit('update:propName')来更新数据。

案例代码：

父组件：

<template>
  <div>
    <h1>这是父组件{{ count }}</h1>
    <!-- 向子组件传递数据并使用sync修饰符 -->
    <son :count.sync="count"></son>
  </div>
</template>

<script>
import son from "../components/son.vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      count: 1,
    };
  },
};
</script>

子组件：

<template>
  <div>
    <h3 @click="add()">这是子组件{{ count }}</h3>
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传递过来的值
    count: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    add() {
      // 子组件直接修改父组件传递的值
      this.$emit("update:count", this.count + 1);
    },
  },
};
</script>
页面效果：

初始状态：

在这里插入图片描述

点击后：

在这里插入图片描述

八、修饰符串联

​ 在同一个元素上，修饰符并不是只能使用一种，而是能够叠加使用多个修饰符，其作用也将同事发挥作用，对事件作更详细的限制。 但要注意修饰符的使用顺序，对于大部分修饰符来说，顺序并不重要。但对于部分修饰符来说顺序很重要，以 .prevent 和 .self 这两个修饰符来说，顺序会影响它们的行为。因为这两个修饰符的作用顺序与使用顺序相同，后面的修饰符是在前面修饰符的基础上进一步做限制。

​ 例如：用 @click.prevent.self 会阻止当前元素的所有的点击产生的默认行为，包括冒泡过来的点击事件，而 @click.self.prevent 只会阻止当前元素自身点击产生的默认行为，冒泡过来的点击则会正常执行默认行为。

常见组合修饰符：
1、.stop.prevent

​ 在阻止事件冒泡的同时，阻止事件默认行为。

2、.enter.space

​ 限制触发事件的按键只能为Enter 键或者 Space 键。

3、.self.once

​ 只有当事件是从元素本身触发时执行绑定函数，且只触发一次。

4、.prevent.self

​ 阻止当前元素的当前事件的产生的默认行为，包括冒泡过来的事件。

5、.lazy.trim.number

​ 当离开输入框时(change 事件)，移除首尾空白后的输入框的值，将转为数值类型，然后进行数据同步。

6、其他。。。

九、相关资料

Vue官方文档-事件修饰符

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于springboot的java读取文档内容（超简单）

基于springboot的java读取文档内容（超简单）

读取一个word文档里面的内容&#xff0c;并取出来。 代码&#xff1a; SneakyThrowsGetMapping(value "/readWordDoc")ApiOperationSupport(order 1)ApiOperation(value "文档读取 ", notes "文档读取 ")public R ReadWordDoc () {System.o…
阅读更多...
【深入浅出RocketMQ原理及实战】「云原生升级系列」打造新一代云原生“消息、事件、流“统一消息引擎的融合处理平台

【深入浅出RocketMQ原理及实战】「云原生升级系列」打造新一代云原生“消息、事件、流“统一消息引擎的融合处理平台

打造新一代云原生"消息、事件、流"统一消息引擎的融合处理平台 云原生架构RocketMQ的云原生架构实现RocketMQ的云原生发展历程互联网时期的诞生无法支持云原生的能力 云原生阶段的升级云原生升级方向促进了Mesh以及多语言化发展可分合化的存算分离架构存储分离架构的…
阅读更多...
复现PointNet（分割网络）：Windows + PyTorch+代码

复现PointNet（分割网络）：Windows + PyTorch+代码

一、平台 Windows 10 GPU RTX 3090 CUDA 11.1 cudnn 8.9.6 Python 3.9 Torch 1.9.1cu111 所用的原始代码&#xff1a;https://github.com/fxia22/pointnet.pytorch​​​​​​​ 二、数据 shapenetcore_partanno_segmentation_benchmark_v0 三、代码 分享给有需要的…
阅读更多...
数据分析工具PlotJuggler使用小技巧

数据分析工具PlotJuggler使用小技巧

一款优秀的开源的工具能事倍功倍。今天给大家推荐的工具主要是Davide Faconti开发。该工具是基于QT开发&#xff0c;支持静态文件和实时数据流画图分析。以下是该工具的官网链接https://github.com/facontidavide/PlotJuggler。本人旨在介绍使用心得。 1.支持静态文件和实时数…
阅读更多...
IDEA中自动导包及快捷键

IDEA中自动导包及快捷键

导包设置及快捷键 设置&#xff1a;Setting->Editor->General->Auto import快捷键 设置&#xff1a;Setting->Editor->General->Auto import java区域有两个关键选项 Add unambiguous imports on the fly 快速添加明确的导包 IDEA将在我们书写代码的时候…
阅读更多...
SwinTransformer

SwinTransformer

patch embedding (b,3,224,224)->(b,N,96) N:patch数量 为每个stage中的每个Swin Transformer block设置drop_rate&#xff0c;根据设置[2,2,6,2]&#xff0c;每个Swin Transformer block的drop_path为0~0.1等间距采样的12个小数&#xff0c;参数0.1也可以更改。还有个drop参…
阅读更多...
前端页面的生命周期

前端页面的生命周期

性能问题呈现给用户的感受往往就是简单而直接的&#xff1a;加载资源缓慢、运行过程卡顿或响应交互延迟等。而在前端工程师的眼中&#xff0c;从域名解析、TCP建立连接到HTTP的请求与响应&#xff0c;以及从资源请求、文件解析到关键渲染路径等&#xff0c;每一个环节都有可能因…
阅读更多...
C语言编译器（C语言编程软件）完全攻略（第十一部分：VS2022使用教程（使用VS2022编写C语言程序））

C语言编译器（C语言编程软件）完全攻略（第十一部分：VS2022使用教程（使用VS2022编写C语言程序））

介绍常用C语言编译器的安装、配置和使用。 十一、VS2022使用教程&#xff08;使用VS2022编写C语言程序&#xff09; 继《十、VS2022下载和安装教程&#xff08;图解版&#xff09;》之后&#xff0c;本节教大家如何用 VS2022 运行 C 语言程序。 例如&#xff0c;在 VS2022 中…
阅读更多...
精致旅游公司Treker网页设计 html模板

精致旅游公司Treker网页设计 html模板

一、需求分析 旅游网站通常具有多种功能&#xff0c;以下是一些常见的旅游网站功能&#xff1a; 酒店预订&#xff1a;旅游网站可以提供酒店预订服务&#xff0c;让用户搜索并预订符合其需求和预算的酒店房间。 机票预订&#xff1a;用户可以通过旅游网站搜索、比较和预订机票…
阅读更多...
用js封装实现余额函数

用js封装实现余额函数

要求: 1. 运行程序后, 浏览器显示输入确认框(prompt) 2. 第一个输入确认框提示输入银行卡余额 3. 第二个输入确认框提示输入当月食宿消费金额 4. 第三个输入确认框提示输入当月生活消费金额 5. 输入完毕后,在页面中显示银行卡剩余金额 6. 提示: 所有功能代码封装在函数内部&…
阅读更多...
【物联网】手把手完整实现STM32+ESP8266+MQTT+阿里云+APP应用——第3节-云产品流转配置

【物联网】手把手完整实现STM32+ESP8266+MQTT+阿里云+APP应用——第3节-云产品流转配置

&#x1f31f;博主领域&#xff1a;嵌入式领域&人工智能&软件开发 本节目标&#xff1a;本节目标是进行云产品流转配置为后面实际的手机APP的接入做铺垫。云产品流转配置的目的是为了后面能够让后面实际做出来的手机APP可以控制STM32/MCU&#xff0c;STM32/MCU可以将数…
阅读更多...
计算机基础知识——数据的表示概述

计算机基础知识——数据的表示概述

目录 1 进制转换 1.1 二进制、十进制和十六进制等常用数制及其相互转换 1.2 十进制和二进制之间转换 1.3 二进制数与八进制数、十六进制数之间的转换 2 码值&#xff1a;原码、反码、补码 2.1 原码 2.2 反码 2.3 补码 3 浮点数表示 3.1 浮点数的运算 1 进制转换 1…
阅读更多...
基于闪电搜索算法优化的Elman神经网络数据预测 - 附代码

基于闪电搜索算法优化的Elman神经网络数据预测 - 附代码

基于闪电搜索算法优化的Elman神经网络数据预测 - 附代码 文章目录 基于闪电搜索算法优化的Elman神经网络数据预测 - 附代码1.Elman 神经网络结构2.Elman 神经用络学习过程3.电力负荷预测概述3.1 模型建立 4.基于闪电搜索优化的Elman网络5.测试结果6.参考文献7.Matlab代码 摘要&…
阅读更多...
Android 相机库CameraView源码解析 (四) : 带滤镜预览

Android 相机库CameraView源码解析 (四) : 带滤镜预览

1. 前言 这段时间&#xff0c;在使用 natario1/CameraView 来实现带滤镜的预览、拍照、录像功能。 由于CameraView封装的比较到位&#xff0c;在项目前期&#xff0c;的确为我们节省了不少时间。 但随着项目持续深入&#xff0c;对于CameraView的使用进入深水区&#xff0c;逐…
阅读更多...
Javaweb之Mybatis的基础操作之新增和更新操作的详细解析

Javaweb之Mybatis的基础操作之新增和更新操作的详细解析

1.4 新增 功能&#xff1a;新增员工信息 1.4.1 基本新增 员工表结构&#xff1a; SQL语句&#xff1a; insert into emp(username, name, gender, image, job, entrydate, dept_id, create_time, update_time) values (songyuanqiao,宋远桥,1,1.jpg,2,2012-10-09,2,2022-10-…
阅读更多...
十年磨一剑

十年磨一剑

随着不停的优化和改进&#xff0c;JRT开发已经接近尾声&#xff0c;计划过年时候低调发布JRT1.0&#xff0c;框架目标&#xff1a;只做信创下的医疗龙头而不是信创下的苟活着。 十年前&#xff0c;我从南京踏上去沈阳的火车&#xff0c;去东北参加三方协议的启航计划&#xff…
阅读更多...
电极箔，预计到2025年市场规模将达到35亿美元

电极箔，预计到2025年市场规模将达到35亿美元

电极箔是一种关键性材料&#xff0c;广泛应用于太阳能电池、电动汽车电池、储能电池、5G基站电池等领域。随着新能源产业的迅猛发展&#xff0c;电极箔市场也在逐步壮大。下面将从全球市场和中国市场进行分析其发展趋势。全球市场分析&#xff1a; 在全球范围内&#xff0c;随着…
阅读更多...
HarmonyOS4.0系统性深入开发14AbilityStage组件容器

HarmonyOS4.0系统性深入开发14AbilityStage组件容器

AbilityStage组件容器 AbilityStage是一个Module级别的组件容器&#xff0c;应用的HAP在首次加载时会创建一个AbilityStage实例&#xff0c;可以对该Module进行初始化等操作。 AbilityStage与Module一一对应&#xff0c;即一个Module拥有一个AbilityStage。 DevEco Studio默…
阅读更多...
深入理解Python中的二分查找与bisect模块

深入理解Python中的二分查找与bisect模块

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…
阅读更多...
PCIe 6.0生态业内进展分析总结-2

PCIe 6.0生态业内进展分析总结-2

3.PCIe 6.0协议分析仪 (1)Keysight Keysight是德科技在2023年6月份对外宣布&#xff0c;第一款支持PCIe 6.0协议验证调试工具。 Keysight PCIe 6.0架构解决方案具备以下特点&#xff1a; 分析PCIe 6.0技术设计的数据链路/事务层 支持所有PCIe技术速率——从2.5 GT/s至64 GT/…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023