前端面试五之vue2基础

news2025/6/8 20:42:02

1.属性绑定v-bind（：）

v-bind 是 Vue 2 中用于动态绑定属性的核心指令，它支持多种语法和用法，能够灵活地绑定 DOM 属性、组件 prop，甚至动态属性名。通过 v-bind，可以实现数据与视图之间的高效同步，是构建动态界面的重要工具。

<template>
  <div class="demo-container">
    <!-- 基础属性绑定 -->
    <div :id="dynamicId">动态 ID 的 div</div>

    <!-- 绑定多个属性 -->
    <div :="{ id: dynamicId, title: dynamicTitle, class: 'my-class' }">
      绑定多个属性
    </div>

    <!-- 动态属性名 -->
    <div :[attributeName]="attributeValue">
      动态属性名绑定
    </div>

    <!-- 布尔属性绑定 -->
    <button :disabled="isDisabled">点击我</button>

    <!-- 绑定组件的 prop -->
    <child-component :message="parentMessage" :title.sync="parentTitle"></child-component>
  </div>
</template>

<script>
// 定义子组件
const ChildComponent = {
  props: {
    message: String,
    title: String
  },
  template: `
    <div>
      <h3>子组件</h3>
      <p>从父组件接收到的 message: {{ message }}</p>
      <p>从父组件接收到的 title: {{ title }}</p>
      <button @click="updateTitle">更新父组件的 title</button>
    </div>
  `,
  methods: {
    updateTitle() {
      // 使用 $emit 触发父组件的更新
      this.$emit('update:title', '新的标题');
    }
  }
};

export default {
  name: "demo",
  components: {
    ChildComponent
  },
  data() {
    return {
      dynamicId: 'my-dynamic-id', // 动态 ID
      dynamicTitle: '这是一个标题', // 动态标题
      attributeName: 'class', // 动态属性名
      attributeValue: 'my-class', // 动态属性值
      isDisabled: false, // 布尔属性
      parentMessage: 'Hello from parent!', // 父组件的 message
      parentTitle: '初始标题' // 父组件的 title
    };
  }
};
</script>

<style scoped>
.demo-container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}
.my-class {
  color: blue;
  font-weight: bold;
}
button {
  margin-top: 10px;
}
</style>

1.1示例代码中的父子组件通信

  1. 父组件向子组件传递数据

    • 父组件在模板中使用 :message="parentMessage" 和 :title.sync="parentTitle"。

    • Vue 会将 parentMessage 和 parentTitle 的值传递给子组件的 message 和 title。

    • 子组件通过 props 接收这些值，并可以在模板中使用。

  2. 子组件向父组件传递事件

    • 子组件在模板中有一个按钮，点击按钮时调用 updateTitle 方法。

    • updateTitle 方法通过 this.$emit('update:title', '新的标题') 触发一个自定义事件 update:title，并传递新值 '新的标题'。

    • 父组件监听到 update:title 事件后，会自动更新 parentTitle 的值为 '新的标题'。

1.2面试问题：

  • 如何实现父子组件之间的数据传递？

  • 父组件如何向子组件传递数据？

  • 子组件如何向父组件传递事件？

回答要点：

  • 父组件向子组件传递数据： 使用 props。

    • 父组件通过 v-bind 将数据绑定到子组件的 props。

    • 子组件通过 props 接收父组件传递的数据。

  • 子组件向父组件传递事件： 使用 $emit。

    • 子组件通过 this.$emit 触发一个自定义事件，并传递数据。

    • 父组件通过监听子组件的事件来接收数据。

      <!-- 父组件 -->
<template>
  <div>
    <child-component :message="parentMessage" @update:title="handleTitleUpdate"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent!',
      parentTitle: 'Initial Title'
    };
  },
  methods: {
    handleTitleUpdate(newTitle) {
      this.parentTitle = newTitle;
    }
  }
};
</script>
      <!-- 子组件 -->
<template>
  <div>
    <p>Message from parent: {{ message }}</p>
    <button @click="updateTitle">Update Parent Title</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  },
  methods: {
    updateTitle() {
      this.$emit('update:title', 'New Title');
    }
  }
};
</script>

    • .sync 修饰符的作用

      • 简化父子组件之间的双向绑定。

2.事件绑定 v-on（@）

v-on 是 Vue.js 中用于绑定事件监听器的指令，它允许你为 DOM 元素或组件绑定事件处理函数。通过 v-on，你可以监听用户的交互行为（如点击、输入等），并在事件触发时执行特定的逻辑。

<template>
  <div>
    <h1>事件绑定示例</h1>
    <button @click="handleClick">点击我</button>
    <input type="text" @input="handleInput($event)">
    <a href="https://example.com" @click.prevent="handleLinkClick">链接</a>
    <div @click="handleDivClick">
      <button @click.stop="handleButtonClick">点击我</button>
    </div>
    <input type="text" @keyup.enter="handleSubmit">
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    },
    handleInput(event) {
      console.log('输入框的值：', event.target.value);
    },
    handleLinkClick() {
      alert('链接被点击了，但不会跳转！');
    },
    handleDivClick() {
      alert('div 被点击了！');
    },
    handleButtonClick() {
      alert('按钮被点击了，但不会触发 div 的点击事件！');
    },
    handleSubmit() {
      alert('回车键被按下，表单提交！');
    }
  }
};
</script>

2.1基本用法

1. 监听原生 DOM 事件

v-on 可以用来监听原生 DOM 事件，例如 click、input、mouseover 等。

<button @click="handleClick">点击我</button>
2. 监听组件事件

v-on 也可以用来监听自定义组件的事件。子组件通过 $emit 触发事件，父组件通过 v-on 监听这些事件。

<child-component @custom-event="handleCustomEvent"></child-component>

  • custom-event 是子组件触发的自定义事件。

  • handleCustomEvent 是父组件中定义的事件处理函数。

3. 传递事件参数 

在事件处理函数中，你可能需要访问事件对象（例如获取输入框的值或鼠标的位置）。可以通过 $event 获取事件对象。

<input type="text" @input="handleInput($event)">
4. 传递额外参数

除了事件对象，你还可以传递其他参数到事件处理函数。

<button @click="handleClick('Hello', $event)">点击我</button>


methods: {
  handleClick(message, event) {
    console.log(message); // 输出 "Hello"
    console.log(event.type); // 输出 "click"
  }
}
5.事件修饰符

Vue 为 v-on 提供了一些事件修饰符，用于更方便地处理常见的事件行为。

 .stop：阻止事件冒泡

  • 点击按钮时，handleButtonClick 会被触发，但不会触发 handleDivClick。

<div @click="handleDivClick">
  <button @click.stop="handleButtonClick">点击我</button>
</div>
.prevent：阻止默认行为

  • 点击链接时，不会跳转到 https://example.com，因为默认行为被阻止了。

<a href="https://example.com" @click.prevent="handleLinkClick">链接</a>
.capture：使用事件捕获模式

  • 在事件冒泡阶段，handleDivClick 会在 handleButtonClick 之前被触发。

<div @click.capture="handleDivClick">
  <button @click="handleButtonClick">点击我</button>
</div>
.self：只触发绑定元素自身的事件

  • 只有直接点击按钮时，handleButtonClick 才会被触发。

<div @click="handleDivClick">
  <button @click.self="handleButtonClick">点击我</button>
</div>
.once：事件只触发一次

  • handleClick 只会在第一次点击时被触发，之后的点击不会触发。

2.2总结

v-on 是 Vue 中非常强大的指令，用于绑定事件监听器。它支持以下功能：

  1. 监听原生 DOM 事件和自定义组件事件。

  2. 传递事件对象和额外参数。

  3. 使用事件修饰符（如 .stop、.prevent、.capture 等）简化事件处理逻辑。

  4. 使用键盘修饰符（如 .enter、.tab 等）处理键盘事件。

 3.双向绑定v-model

v-model 是 Vue 中实现双向数据绑定的核心指令，它允许你将表单输入和应用状态进行同步。通过 v-model，表单元素的值会自动与 Vue 实例的数据保持一致，同时用户对表单的修改也会实时更新到数据中，反之亦然。这种双向绑定机制是 Vue 的一大特色，极大地简化了表单处理逻辑。

3.1基本用法

<template>
  <div class="v-model-demo">
    <h2>v-model 双向绑定示例</h2>

    <!-- 输入框 -->
    <div>
      <label for="text-input">输入框：</label>
      <input id="text-input" v-model="message" placeholder="输入内容">
      <p>输入的内容是：{{ message }}</p>
    </div>

    <!-- 多行文本框 -->
    <div>
      <label for="textarea">多行文本框：</label>
      <textarea id="textarea" v-model="multiLineMessage" placeholder="输入多行内容"></textarea>
      <p>输入的内容是：</p>
      <p style="white-space: pre">{{ multiLineMessage }}</p>
    </div>

    <!-- 单个复选框 -->
    <div>
      <label><input type="checkbox" v-model="singleCheckbox"> 单个复选框</label>
      <p>复选框是否选中：{{ singleCheckbox }}</p>
    </div>

    <!-- 多个复选框 -->
    <div>
      <label><input type="checkbox" v-model="checkedCities" value="北京"> 北京</label>
      <label><input type="checkbox" v-model="checkedCities" value="上海"> 上海</label>
      <label><input type="checkbox" v-model="checkedCities" value="广州"> 广州</label>
      <p>选中的城市：{{ checkedCities }}</p>
    </div>

    <!-- 单选按钮 -->
    <div>
      <label><input type="radio" v-model="picked" value="A"> A</label>
      <label><input type="radio" v-model="picked" value="B"> B</label>
      <p>选中的选项是：{{ picked }}</p>
    </div>

    <!-- 下拉选择框 -->
    <div>
      <label for="select">下拉选择框：</label>
      <select id="select" v-model="selected">
        <option disabled value="">请选择</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
      </select>
      <p>选中的城市是：{{ selected }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "VModelDemo",
  data() {
    return {
      message: "", // 输入框绑定的数据
      multiLineMessage: "", // 多行文本框绑定的数据
      singleCheckbox: false, // 单个复选框绑定的数据
      checkedCities: [], // 多个复选框绑定的数据
      picked: "", // 单选按钮绑定的数据
      selected: "" // 下拉选择框绑定的数据
    };
  }
};
</script>

<style scoped>
.v-model-demo {
  margin: 20px;
  font-family: Arial, sans-serif;
}
label {
  margin-right: 10px;
}
p {
  margin: 10px 0;
}
textarea {
  width: 100%;
  height: 100px;
}
select {
  width: 100%;
}
</style>

v-model 的工作原理

v-model 实际上是一个语法糖，它背后做了以下几件事：

  1. 绑定 value 属性：

    • 对于 <input> 和 <textarea>，v-model 会绑定 value 属性。

    • 对于 <select>，v-model 会绑定 value 属性到选中的 <option>。

    • 对于 <input type="checkbox"> 和 <input type="radio">，v-model 会绑定 value 属性到对应的值。

  2. 监听 input 或 change 事件：

    • v-model 会监听表单元素的 input 事件（对于 <input> 和 <textarea>）或 change 事件（对于 <select>、<input type="checkbox"> 和 <input type="radio">）。

    • 当事件触发时，它会自动更新绑定的数据。

3.2v-model 修饰符 

<template>
  <div class="v-model-modifiers-demo">
    <h2>v-model 修饰符示例</h2>

    <!-- .lazy 修饰符 -->
    <div>
      <label for="lazy-input">输入框（.lazy）：</label>
      <input id="lazy-input" v-model.lazy="lazyMessage" placeholder="输入内容">
      <p>输入的内容是：{{ lazyMessage }}</p>
      <!--
        .lazy 修饰符：
        - 默认情况下，v-model 在每次 input 事件触发时更新数据。
        - 使用 .lazy 修饰符后，数据会在 change 事件触发时更新，即用户离开输入框时。
      -->
    </div>

    <!-- .number 修饰符 -->
    <div>
      <label for="number-input">输入框（.number）：</label>
      <input id="number-input" v-model.number="numberValue" type="number" placeholder="输入数字">
      <p>输入的数字是：{{ numberValue }}</p>
      <!--
        .number 修饰符：
        - 默认情况下，v-model 会将输入框的值作为字符串处理。
        - 使用 .number 修饰符后，输入框的值会自动转换为数字类型。
      -->
    </div>

    <!-- .trim 修饰符 -->
    <div>
      <label for="trim-input">输入框（.trim）：</label>
      <input id="trim-input" v-model.trim="trimMessage" placeholder="输入内容">
      <p>输入的内容是：{{ trimMessage }}</p>
      <!--
        .trim 修饰符：
        - 默认情况下，v-model 会保留输入框的首尾空格。
        - 使用 .trim 修饰符后，输入框的值会自动去除首尾空格。
      -->
    </div>
  </div>
</template>

<script>
export default {
  name: "VModelModifiersDemo",
  data() {
    return {
      lazyMessage: "", // .lazy 修饰符绑定的数据
      numberValue: 0, // .number 修饰符绑定的数据
      trimMessage: "" // .trim 修饰符绑定的数据
    };
  }
};
</script>

<style scoped>
.v-model-modifiers-demo {
  margin: 20px;
  font-family: Arial, sans-serif;
}
label {
  margin-right: 10px;
}
p {
  margin: 10px 0;
}
input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}
</style>

  1. 输入框（.lazy）：

    • 用户输入内容时，数据不会立即更新，直到用户离开输入框（触发 change 事件）。

    • {{ lazyMessage }} 会显示最终的输入内容。

  2. 输入框（.number）：

    • 用户输入数字时，数据会自动转换为数字类型。

    • {{ numberValue }} 会显示数字类型的值。

  3. 输入框（.trim）：

    • 用户输入内容时，首尾空格会被自动去除。

    • {{ trimMessage }} 会显示去除首尾空格后的内容。

3.3自定义组件中的 v-model 

在自定义组件中，v-model 默认绑定的是子组件的 value 属性和 input 事件。如果你需要自定义 v-model 的行为，可以通过 props 和 $emit 来实现。

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      message: ''
    };
  }
};
</script>
<!-- CustomInput.vue -->
<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
    placeholder="输入内容"
  >
</template>

<script>
export default {
  props: ['value']
};
</script>

  • 工作原理

  • 父组件传递数据到子组件：

    • 父组件通过 v-model="message" 将 message 的值传递给子组件的 value prop。

    • 子组件的 value prop 会接收这个值，并将其绑定到输入框的 value 属性上。

  • 子组件向父组件发送数据：

    • 当用户在输入框中输入内容时，input 事件被触发。

    • 子组件通过 $emit('input', $event.target.value) 将用户输入的值发送回父组件。

    • 父组件监听到 input 事件后，会更新 message 的值。

  • 双向绑定：

    • 父组件的 message 和子组件的输入框内容始终保持同步。

    • 用户在输入框中输入的内容会实时更新到父组件的 message 中。

    • 父组件的 message 如果发生变化，输入框的内容也会自动更新。

4.计算属性 Computed

在 Vue 2 中，计算属性（Computed Properties）是一种非常强大的功能，它允许你基于 Vue 实例的数据动态计算值。计算属性是响应式的，当依赖的响应式数据发生变化时，计算属性会自动重新计算并更新。

计算属性通常用于以下场景：

  1. 基于现有数据派生新数据：例如，将用户的输入转换为大写或计算总价。

  2. 简化模板逻辑：避免在模板中编写复杂的逻辑。

  3. 缓存计算结果：计算属性会缓存结果，只有当依赖的数据发生变化时才会重新计算。

计算属性通过 computed 选项定义。计算属性的值由一个函数返回，这个函数的返回值会自动绑定到模板中。

<template>
  <div>
    <p>原字符串：{{ message }}</p>
    <p>大写字符串：{{ upperCaseMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'hello'
    };
  },
  computed: {
    upperCaseMessage() {
      return this.message.toUpperCase();
    }
  }
};
</script>

 

  • data：定义了响应式数据 message。

  • computed：定义了计算属性 upperCaseMessage。

    • upperCaseMessage 是一个函数，返回 message 的大写形式。

    • 计算属性的值会自动更新，当 message 发生变化时，upperCaseMessage 也会重新计算。

计算属性的缓存机制

计算属性是基于它们的依赖进行缓存的。只有当依赖的响应式数据发生变化时，计算属性才会重新计算。这意味着如果你的依赖数据没有变化，计算属性的值不会重新计算，从而提高性能。

计算属性与方法的区别

计算属性和方法都可以基于数据动态计算值，但它们有一些关键区别：

  1. 缓存机制：

    • 计算属性：会缓存结果，只有当依赖的响应式数据发生变化时才会重新计算。

    • 方法：每次调用都会重新计算，不会缓存结果。

  2. 使用场景：

    • 计算属性：适用于基于现有数据派生新数据的场景，尤其是需要缓存结果的场景。

    • 方法：适用于需要动态执行的逻辑，例如事件处理函数。

 

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

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

相关文章

Unity版本使用情况统计（更新至2025年5月）

Unity版本使用情况统计（更新至2025年5月）

UWA发布&#xff5c;本期UWA发布的内容是Unity版本使用统计&#xff08;第十六期&#xff09;&#xff0c;统计周期为2024年11月至2025年5月&#xff0c;数据来源于UWA网站&#xff08;www.uwa4d.com&#xff09;性能诊断提测的项目。希望给Unity开发者提供相关的行业趋势作为参…
阅读更多...
GPUCUDA 发展编年史：从 3D 渲染到 AI 大模型时代（上）

GPUCUDA 发展编年史：从 3D 渲染到 AI 大模型时代（上）

目录 文章目录 目录1960s~1999&#xff1a;GPU 的诞生&#xff1a;光栅化&#xff08;Rasterization&#xff09;3D 渲染算法的硬件化实现之路 学术界算法研究历程工业界产品研发历程光栅化技术原理光栅化技术的软件实现&#xff1a;OpenGL 3D 渲染管线设计 1. 顶点处理&…
阅读更多...
人机融合智能 | 可穿戴计算设备的多模态交互

人机融合智能 | 可穿戴计算设备的多模态交互

可穿戴计算设备可以对人体以及周围环境进行连续感知和计算,为用户提供随时随地的智能交互服务。本章主要介绍人机智能交互领域中可穿戴计算设备的多模态交互,阐述以人为中心的智能穿戴交互设计目标和原则,为可穿戴技术和智能穿戴交互技术的设计提供指导,进而简述支持智能穿戴交…
阅读更多...
Impromptu VLA：用于驾驶视觉-语言-动作模型的开放权重和开放数据

Impromptu VLA：用于驾驶视觉-语言-动作模型的开放权重和开放数据

25年5月来自清华和博世的论文“Impromptu VLA: Open Weights and Open Data for Driving Vision-Language-Action Models”。 用于自动驾驶的“视觉-语言-动作” (VLA) 模型前景光明&#xff0c;但在非结构化极端场景下却表现不佳&#xff0c;这主要是由于缺乏有针对性的基准测…
阅读更多...
AI智能体，为美业后端供应链注入“智慧因子”(4/6)

AI智能体，为美业后端供应链注入“智慧因子”(4/6)

摘要&#xff1a;本文深入剖析美业后端供应链现状&#xff0c;其产品具有多样性、更新换代快等特点&#xff0c;原料供应和生产环节也面临诸多挑战。AI 智能体的登场为美业后端供应链带来变革&#xff0c;包括精准需求预测、智能化库存管理、优化生产计划排程、升级供应商管理等…
阅读更多...
跨平台资源下载工具：res-downloader 的使用体验

跨平台资源下载工具：res-downloader 的使用体验

一款基于 Go Wails 的跨平台资源下载工具&#xff0c;简洁易用&#xff0c;支持多种资源嗅探与下载。res-downloader 一款开源免费的下载软件(开源无毒、放心使用)&#xff01;支持Win10、Win11、Mac系统.支持视频、音频、图片、m3u8等网络资源下载.支持视频号、小程序、抖音、…
阅读更多...
数据湖是什么？数据湖和数据仓库的区别是什么？

数据湖是什么？数据湖和数据仓库的区别是什么？

目录 一、数据湖是什么 &#xff08;一&#xff09;数据湖的定义 &#xff08;二&#xff09;数据湖的特点 二、数据仓库是什么 &#xff08;一&#xff09;数据仓库的定义 &#xff08;二&#xff09;数据仓库的特点 三、数据湖和数据仓库的区别 &#xff08;一&#…
阅读更多...
【深度学习新浪潮】如何入门三维重建？

【深度学习新浪潮】如何入门三维重建？

入门三维重建算法技术需要结合数学基础、计算机视觉理论、编程实践和项目经验，以下是系统的学习路径和建议： 一、基础知识储备 1. 数学基础 线性代数：矩阵运算、向量空间、特征分解（用于相机矩阵、变换矩阵推导）。几何基础：三维几何（点、线、面的表示）、射影几何（单…
阅读更多...
Codeforces Round 1025 (Div. 2) B. Slice to Survive

Codeforces Round 1025 (Div. 2) B. Slice to Survive

Codeforces Round 1025 (Div. 2) B. Slice to Survive 题目 Duelists Mouf and Fouad enter the arena, which is an n m n \times m nm grid! Fouad’s monster starts at cell ( a , b ) (a, b) (a,b), where rows are numbered 1 1 1 to n n n and columns 1 1 1 t…
阅读更多...
ubuntu中使用docker

ubuntu中使用docker

上一篇我已经下载了一个ubuntu:20.04的镜像&#xff1b; 1. 查看所有镜像 sudo docker images 2. 基于本地存在的ubuntu:20.04镜像创建一个容器&#xff0c;容器的名为cppubuntu-1。创建的时候就会启动容器。 sudo docker run -itd --name cppubuntu-1 ubuntu:20.04 结果出…
阅读更多...
[ElasticSearch] DSL查询

[ElasticSearch] DSL查询

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…
阅读更多...
iview中的table组件点击一行中的任意一点选中本行

iview中的table组件点击一行中的任意一点选中本行

<Table border ref"selection" size"small" on-row-click"onClickRow"></Table>// table组件点击一行任意位置选中onClickRow(row, index) {this.$refs.selection.toggleSelect(index)}写上toggleSelect(index)方法即可&#xff0c;…
阅读更多...
《探秘跨网段局域网IP广播：解锁网络通信的新姿势》

《探秘跨网段局域网IP广播：解锁网络通信的新姿势》

一、从基础出发：广播与跨网段 在计算机网络的世界中，广播域是一个至关重要的概念。简单来说，广播域是指网络中能接收任一台主机发出的广播帧的所有主机集合。当一台主机在广播域内发出一个广播帧时，同一广播域内的所有其他主机都可以收到该广播帧。在没有路由器或 VLAN 分割…
阅读更多...
maven微服务${revision}依赖打包无法识别

maven微服务${revision}依赖打包无法识别

1、场景描述 我现在又一个微服务项目&#xff0c;父pom的版本&#xff0c;使用<properties>定义好&#xff0c;如下所示&#xff1a; <name>ypsx-finance-center</name> <artifactId>ypsx-finance</artifactId> <packaging>pom</pack…
阅读更多...
2025年06月07日Github流行趋势

2025年06月07日Github流行趋势

项目名称&#xff1a;netbird 项目地址url&#xff1a;https://github.com/netbirdio/netbird项目语言&#xff1a;Go历史star数&#xff1a;14824今日star数&#xff1a;320项目维护者&#xff1a;mlsmaycon, braginini, pascal-fischer, lixmal, pappz项目简介&#xff1a;使…
阅读更多...
WPS中将在线链接转为图片

WPS中将在线链接转为图片

WPS中将在线链接转为图片 文章目录 WPS中将在线链接转为图片一&#xff1a;解决方案1、下载图片&#xff0c;精确匹配&#xff08;会员功能&#xff09;2、将在线链接直接转为图片 一&#xff1a;解决方案 1、下载图片&#xff0c;精确匹配&#xff08;会员功能&#xff09; …
阅读更多...
实战二：开发网页端界面完成黑白视频转为彩色视频

实战二：开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…
阅读更多...
vue生成二维码图片+文字说明

vue生成二维码图片+文字说明

需求&#xff1a;点击下载图片&#xff0c;上方是二维码&#xff0c;下方显示该二维码的相关内容&#xff0c;并且居中显示&#xff0c;支持换行 解决方案步骤&#xff1a; 1. 使用qrcode生成二维码的DataURL。 2. 创建canvas&#xff0c;将二维码图片绘制到canvas的上半部分…
阅读更多...
机器学习监督学习实战五：六种算法对声呐回波信号进行分类

机器学习监督学习实战五：六种算法对声呐回波信号进行分类

本项目基于UCI的声呐目标识别数据集&#xff08;Sonar, Mines vs. Rocks&#xff09;&#xff0c;通过10种机器学习算法比较&#xff0c;发现集成学习方法表现最优。研究首先对60个声呐能量特征进行可视化分析&#xff08;分布直方图、相关性矩阵&#xff09;&#xff0c;对比了…
阅读更多...
​React Hooks 的闭包陷阱问题

​React Hooks 的闭包陷阱问题

这是主包在面试中遇到的一道题目&#xff0c;面试官的问题是&#xff1a;"这个页面初次展示出来时Count和step的值是什么&#xff0c;我点击按钮count和step的值有什么变化&#xff1f;“ 这个题目主包回答的不好&#xff0c;所以想做一个总结。 题目 import React, { …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023