【三十天精通Vue 3】 第三天 Vue 3的组件详解

news2024/11/13 3:40:06

在这里插入图片描述

✅创作者:陈书予
🎉个人主页:陈书予的个人主页
🍁陈书予的个人社区,欢迎你的加入: 陈书予的社区
🌟专栏地址: 三十天精通 Vue 3

文章目录

  • 引言
    • 一、Vue 3 组件的概述
      • 1. Vue 3 的组件系统
      • 2. Vue 3 组件的特点
    • 二、组件的基本语法
      • 1. Vue 3 组件的实例结构
      • 2. Vue 3 组件的指令
      • 3. Vue 3 组件的生命周期
    • 生命周期图示
    • 三、组件的模板和数据
      • 1. 组件的模板语法
      • 2. 组件的数据传递
      • 3. 组件的嵌套
    • 四、组件的事件与响应
      • 1. 组件的事件机制
      • 2. 组件的响应式系统
      • 3. 组件的发布 - 订阅模式
    • 五、组件的通信
      • 1. 组件之间的数据传递
      • 2. 组件之间的通信机制
      • 3. Vue 3 的跨组件通信插件
    • 六、Vue 3 的虚拟 DOM
      • 1. Vue 3 的虚拟 DOM 原理
      • 2. Vue 3 的虚拟 DOM 的优势
      • 3. Vue 3 的虚拟 DOM 的实现方式

引言

Vue 3 组件是 Vue.js 框架中最重要的概念之一。Vue 3 组件是一个可复用、可组合、可交互的 Vue 实例,它封装了一个特定功能的 UI 界面。在 Vue 3 中,组件的设计和使用都变得更加简单和灵活,使得开发人员能够更加快速地构建复杂的 Web 应用程序。今天,我们将介绍 Vue 3 组件的基本语法、模板和数据、事件与响应、通信以及虚拟 DOM 等方面的内容。

一、Vue 3 组件的概述

1. Vue 3 的组件系统

Vue 3 的组件系统是 Vue.js 3 的核心,它允许开发者将 HTML、CSS 和 JavaScript 组合成可重用的组件。Vue 3 组件的特点包括:

  • 可嵌套:组件可以嵌套在一起,形成复杂的 DOM 结构。
  • 响应式:组件中的数据可以响应外部事件和数据变化,并更新组件的视图。
  • 模板语法:组件可以使用模板语法来描述 DOM 结构,使组件更易于复用和维护。
  • 指令:Vue 3 组件支持指令,可以动态修改组件的属性或数据。

2. Vue 3 组件的特点

Vue 3 组件的特点包括:

  • 响应式:组件中的数据可以响应外部事件和数据变化,并更新组件的视图。
  • 模板语法:组件可以使用模板语法来描述 DOM 结构,使组件更易于复用和维护。
  • 指令:Vue 3 组件支持指令,可以动态修改组件的属性或数据。
  • 组件通信:不同组件之间可以相互通信,传递数据和事件。
  • 虚拟 DOM:Vue 3 使用虚拟 DOM 来提高渲染性能,减少 DOM 操作。

二、组件的基本语法

1. Vue 3 组件的实例结构

在 Vue 3 中,一个组件实例是由一个 Vue 实例构造函数创建的,可以通过 Vue.component 方法来注册组件。下面是一个例子:

// 定义一个组件
const myComponent = {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello, World!'
    }
  }
};

// 注册组件
Vue.component('my-component', myComponent);

在这个例子中,我们定义了一个名为 myComponent 的组件,它包含一个模板和数据。通过 Vue.component 方法注册这个组件后,就可以在应用程序中使用 <my-component> 标签来渲染这个组件。

2. Vue 3 组件的指令

Vue 3 中的指令是一种特殊的属性,用于在组件中添加动态行为。常用的指令有:

  • v-bind:用于绑定元素属性;
  • v-model:用于绑定表单元素的值;
  • v-if:用于条件渲染元素;
  • v-show:用于条件展示元素;
  • v-for:用于循环渲染元素;
  • v-on:用于绑定事件监听器;
  • v-bind:prop:用于绑定组件 prop;
  • v-on:event:用于组件触发事件;
  • v-slot:用于插槽;
  • v-html:用于渲染 HTML 字符串。

下面是这些指令的用法示例:

<!-- v-bind -->
<div v-bind:class="{'active': isActive}"></div>

<!-- v-model -->
<input v-model="message">

<!-- v-if -->
<div v-if="isShown">Hello World!</div>

<!-- v-show -->
<div v-show="isShown">Hello World!</div>

<!-- v-for -->
<div v-for="item in items">{{ item }}</div>

<!-- v-on -->
<button v-on:click="doSomething">Click me</button>

<!-- v-bind:prop -->
<my-component v-bind:title="title"></my-component>

<!-- v-on:event -->
<my-component v-on:custom-event="handleCustomEvent"></my-component>

<!-- v-slot -->
<my-component>
  <template v-slot:default> Some content </template>
</my-component>

<!-- v-html -->
<div v-html="htmlString"></div>

3. Vue 3 组件的生命周期

在 Vue 3 中,组件的生命周期是指组件实例从创建到销毁期间所经过的一系列过程,包括了组件实例的创建、挂载、更新和销毁等过程。Vue 3 组件的生命周期钩子函数可以让我们在不同阶段对组件进行操作和处理,例如初始化数据、挂载 DOM、监听事件等。

生命周期图示

Vue 3 的组件生命周期与 Vue 2 有所不同,以下是 Vue 3 组件生命周期的详细说明:

  1. beforeCreate:实例刚被创建出来,此时组件的属性和方法都还没有被初始化,不能访问 data、props、methods 等数据。
  2. created:实例已经被创建出来,数据已经初始化好了,可以访问 data、props、methods 等数据,但是$el 属性还没有被创建,还不能访问 DOM 节点。
  3. beforeMount:在挂载开始之前被调用,相关的 render 函数首次被调用,此时 render 函数得到的 DOM 节点还没有被渲染到页面上。
  4. mounted:组件挂载完成之后被调用,相关的 render 函数最后一次被调用,此时 render 函数得到的 DOM 节点已经被渲染到页面上了。
  5. beforeUpdate:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。
  6. updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后被调用。
  7. beforeDestroy:实例销毁之前被调用,此时组件实例仍然完全可用,可以访问 data、methods 等数据。
  8. destroyed:实例销毁之后被调用,此时组件实例已经被完全销毁,无法访问 data、methods 等数据。

此外,还有一个被废弃的生命周期是 beforeMount、mounted 和 beforeUpdate、updated,这些生命周期被废弃是因为 Vue 3 中使用 render 函数时不需要关心 DOM 节点的渲染过程,因此这些生命周期的调用时机已经不再重要。

三、组件的模板和数据

1. 组件的模板语法

Vue 3 组件的模板语法采用了类似 HTML 的标记语言,用于描述组件的外观和行为。Vue 3 的模板语法主要由以下几个部分组成:

  • 插值表达式:用于在模板中插入变量值、表达式或计算结果。
  • 指令:用于在模板中绑定变量、控制元素的显示或隐藏、循环渲染列表等。
  • 事件绑定:用于在模板中绑定事件处理函数。

下面我们通过一个简单的示例来说明 Vue 3 的模板语法:

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="handleClick">点击</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: '我的组件',
      items: [
        { id: 1, name: '选项一' },
        { id: 2, name: '选项二' },
        { id: 3, name: '选项三' },
      ],
    };
  },
  methods: {
    handleClick() {
      console.log('按钮被点击了!');
    },
  },
};
</script>

在上面的示例中,我们定义了一个名为 MyComponent 的组件,它包含了一个标题、一个列表和一个按钮。在模板中,我们使用了插值表达式来展示标题和列表项的名称,使用 v-for 指令循环渲染了列表,并使用 @click 事件绑定来绑定按钮的点击事件。

2. 组件的数据传递

在 Vue 3 中,组件之间的数据传递可以通过 props 和 events 进行。

  1. Props

props 是组件之间传递数据的主要方式。在父组件中,可以通过 props 将数据传递给子组件。子组件可以通过接收 props 来获取父组件传递的数据。下面是一个简单的示例:

// 父组件    
export default {  
  name: 'ParentComponent',  
  props: {  
    childData: {  
      type: String,  
      default: ''  
    }  
  },  
  data() {  
    return {  
      counter: 0  
    };  
  },  
  mounted() {  
    this.$nextTick(() => {  
      this.childData = this.childData || 'default value';  
    });  
  }  
};

// 子组件    
export default {  
  name: 'ChildComponent',  
  props: {  
    childData: {  
      type: String,  
      default: ''  
    }  
  },  
  template: `  
    <div>  
      <p>{{ childData }}</p>  
    </div>  
  `  
};  

在上面的示例中,父组件 ParentComponent 可以通过 props 将数据传递给子组件 ChildComponent。子组件 ChildComponent 通过接收 props 来获取父组件传递的数据。在子组件中,我们可以通过 $nextTick 方法在组件挂载后更新 props 的值。

  1. Events

除了 props,组件之间还可以使用 events 进行数据传递。在父组件中,可以通过发布事件将数据传递给子组件。子组件可以通过订阅事件来获取父组件传递的数据。下面是一个简单的示例:

// 父组件    
export default {  
  name: 'ParentComponent',  
  events: {  
    childEvent: {  
      type: 'child-event',  
      data: {}  
    }  
  },  
  data() {  
    return {  
      counter: 0  
    };  
  },  
  mounted() {  
    this.$nextTick(() => {  
      this.childEvent({ data: 'child event data' });  
    });  
  }  
};

// 子组件    
export default {  
  name: 'ChildComponent',  
  setup() {  
    const childEvent = (data) => {  
      this.dispatchEvent(new Event('child-event', { data }));  
    };

    return {  
      childEvent  
    };  
  }  
};  

在上面的示例中,父组件 ParentComponent 发布了一个事件 childEvent,该事件包含一个数据对象。子组件 ChildComponent 通过 setup 函数中的 childEvent 方法订阅了这个事件,并在事件触发时执行相应的方法。在子组件中,我们可以通过 dispatchEvent 方法在触发事件时执行方法。

3. 组件的嵌套

在 Vue 3 中,组件的嵌套是一种常见的组件设计模式。组件嵌套可以提高组件的复用性和可维护性,同时也可以让组件更好地处理自己的状态和行为。下面是一个简单的组件嵌套示例:

// 父组件      
export default {  
  name: 'ParentComponent',  
  data() {  
    return {  
      children: [  
        {  
          name: 'Child1',  
          component: require('./Child1.vue')  
        },  
        {  
          name: 'Child2',  
          component: require('./Child2.vue')  
        }  
      ]  
    };  
  },  
  mounted() {  
    // 监听子组件更新  
    this.$nextTick(() => {  
      this.children.forEach((child) => {  
        child.component.update();  
      });  
    });  
  }  
};

// 子组件      
export default {  
  name: 'Child1',  
  props: {  
    name: {  
      type: String,  
      default: ''  
    }  
  },  
  template: `  
    <div>  
      <h1>{{ name }}</h1>  
      <Child2Component />  
    </div>  
  `  
};

export default {  
  name: 'Child2',  
  props: {  
    name: {  
      type: String,  
      default: ''  
    }  
  },  
  template: `  
    <div>  
      <h1>{{ name }}</h1>  
      <Child1Component />  
    </div>  
  `  
};  

在上面的示例中,父组件 ParentComponent 包含两个子组件 Child1Child2。这两个子组件都使用了 Vue 3 的组件嵌套机制,并且都包含了一个 Child2Component。在父组件中,我们监听了子组件的更新,并在子组件挂载后更新它们的名称。

在子组件 Child1 中,我们使用了 props 来接收父组件传递的数据。在子组件 Child2 中,我们使用了 props 来接收父组件传递的数据,并将其传递给子组件 Child1

四、组件的事件与响应

1. 组件的事件机制

在 Vue 3 中,组件可以使用@event 命名约定来触发自定义事件。通过在父组件中使用 v-on 指令来监听这些事件,并在事件处理函数中执行相应的操作。

以下是一个示例:

<template>  
  <div>  
    <button @click="handleClick">点击我</button>  
  </div>  
</template>

<script>  
export default {  
  data() {  
    return {  
      value: ''  
    }  
  },  
  methods: {  
    handleClick() {  
      this.value = '点击了按钮'  
    }  
  }  
}
</script>  

在上面的示例中,我们定义了一个按钮组件,并在按钮的点击事件上使用@click 属性来触发一个自定义事件 handleClick。在父组件中,我们使用 v-on 指令来监听这个事件,并在事件处理函数中更新组件的数据值 value。

<template>  
  <div>  
    <child-component @event="handleClick" />  
    <p>按钮点击事件处理函数执行了:</p>  
    <template v-if="value">{{ value }}</template>  
  </div>  
</template>

<script>  
import ChildComponent from '@/components/ChildComponent.vue'

export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      value: ''  
    }  
  },  
  methods: {  
    handleClick() {  
      this.value = '点击了按钮'  
    }  
  }  
}
</script>  

在上面的示例中,我们定义了一个父组件,并在其中使用 v-on 指令来监听 child-component 组件触发的 handleClick 事件。在事件处理函数中,我们更新组件的数据值 value,并在模板中使用 v-if 指令来显示或隐藏一个文本框。

在 Vue 3 中,组件还可以使用@mousedown、@click 等事件来触发自定义事件。同时,组件还可以触发全局事件,例如@load、@error 等。这些事件可以用于异步数据的加载和错误处理。

2. 组件的响应式系统

在 Vue 3 中,组件可以使用响应式系统来管理组件状态。响应式系统使用一个数据列表来跟踪组件状态的变化,并在组件模板中使用 v-model 指令来绑定输入框的值。

以下是一个示例:

<template>  
  <div>  
    <input type="text" v-model="inputValue" />  
    <button @click="handleClick">点击我</button>  
  </div>  
</template>

<script>  
import { reactive } from 'vue'

export default {  
  setup() {  
    const inputValue = reactive('')

    this.handleClick = () => {  
      inputValue.push('点击了按钮')  
    }

    return {  
      inputValue,  
      handleClick  
    }  
  }  
}
</script>  

在上面的示例中,我们定义了一个文本输入组件和一个按钮组件。我们在输入框中使用 v-model 指令来绑定输入框的值,并在按钮的点击事件上使用@click 属性来触发一个事件。在事件处理函数中,我们使用 push 方法来将一个字符串添加到列表中,以更新组件的状态。

在 Vue 3 中,响应式系统还可以通过@data、@computed、@methods 等属性来管理组件状态。这些属性可以存储和更新组件状态,并使用 v-model 指令来绑定输入框的值。

3. 组件的发布 - 订阅模式

在 Vue 3 中,组件可以使用发布 - 订阅模式来处理事件和响应。发布者发布事件,订阅者订阅事件,当事件发生时,订阅者可以收到通知并执行相应的操作。

下面是一个简单的示例:

// 发布者  
export default {  
  methods: {  
    incrementCounter() {  
      this.counter++;  
    }  
  },  
  export default {}  
}

// 订阅者  
import { incrementCounter } from './Counter';

export default {  
  name: 'Counter',  
  data() {  
    return {  
      counter: 0  
    };  
  },  
  mounted() {  
    incrementCounter();  
  },  
  methods: {  
     decrementCounter() {  
      this.counter--;  
    }  
  }  
};  

在上面的示例中,发布者 Counter 组件发布了一个 increment 事件,订阅者 Counter.vue 组件订阅了这个事件,并在 mounted 生命周期钩子中调用 incrementCounter 方法来触发事件。

在订阅者中,我们通过调用 incrementCounter 方法来触发事件。这个方法可以被看作是发布者的订阅者,因为它接收并处理发布者发布的事件。

五、组件的通信

1. 组件之间的数据传递

在 Vue 3 中,组件之间的数据传递可以通过 props 和 events 进行。props 是主要方式,而 events 可以用于单向数据传递。下面是一个简单的示例:

// 父组件  
export default {  
  name: 'ParentComponent',  
  props: {  
    childData: {  
      type: String,  
      default: ''  
    }  
  },  
  data() {  
    return {  
      counter: 0  
    };  
  },  
  mounted() {  
    this.$nextTick(() => {  
      this.childData = this.childData || 'default value';  
    });  
  }  
};

// 子组件  
export default {  
  name: 'ChildComponent',  
  props: {  
    childData: {  
      type: String,  
      default: ''  
    }  
  },  
  template: `  
    <div>  
      <p>{{ childData }}</p>  
    </div>  
  `  
};  

在上面的示例中,父组件 ParentComponent 可以通过 props 将数据传递给子组件 ChildComponent。子组件 ChildComponent 通过接收 props 来获取父组件传递的数据。在子组件中,我们可以通过 $nextTick 方法在组件挂载后更新 props 的值。

2. 组件之间的通信机制

在 Vue 3 中,组件之间的通信机制主要包括两个方面:props 和 events。props 是主要方式,而 events 可以用于单向数据传递。下面是一个简单的示例:

// 父组件  
export default {  
  name: 'ParentComponent',  
  props: {  
    childData: {  
      type: String,  
      default: ''  
    }  
  },  
  data() {  
    return {  
      counter: 0  
    };  
  },  
  mounted() {  
    this.$nextTick(() => {  
      this.childData = this.childData || 'default value';  
    });  
  }  
};

// 子组件  
export default {  
  name: 'ChildComponent',  
  props: {  
    childData: {  
      type: String,  
      default: ''  
    }  
  },  
  template: `  
    <div>  
      <p>{{ childData }}</p>  
    </div>  
  `  
};  

在上面的示例中,父组件 ParentComponent 可以通过 props 将数据传递给子组件 ChildComponent。子组件 ChildComponent 通过接收 props 来获取父组件传递的数据。在子组件中,我们可以通过 $nextTick 方法在组件挂载后更新 props 的值。

3. Vue 3 的跨组件通信插件

Vue 3 的跨组件通信插件主要有 two-way data binding、computed properties、watch 和 events。下面是一个简单的示例:

// 父组件  
export default {  
  name: 'ParentComponent',  
  data() {  
    return {  
      counter: 0  
    };  
  },  
  methods: {  
    incrementCounter() {  
      this.counter++;  
    }  
  }  
};

// 子组件  
export default {  
  name: 'ChildComponent',  
  props: {  
    value: {  
      type: Number,  
      default: 0  
    }  
  },  
  template: `  
    <div>  
      <p>{{ value }}</p>  
      <button @click="increment">Click me</button>  
    </div>  
  `  
};  

在上面的示例中,父组件 ParentComponent 可以通过 two-way data binding 将子组件 ChildComponent 的值与父组件的变量进行绑定。子组件 ChildComponent 通过 props 接收父组件传递的值。在子组件中,我们可以通过 @click 事件监听器触发父组件的方法 incrementCounter

六、Vue 3 的虚拟 DOM

1. Vue 3 的虚拟 DOM 原理

在 Vue 2 中,Vue 使用真实的 DOM 来管理组件的渲染。当组件更新时,Vue 会遍历组件中的所有子组件,然后根据新的数据重新渲染它们。这种方式称为“块状渲染”。

在 Vue 3 中,Vue 使用了一种新的渲染方式,称为“响应式渲染”。Vue 3 中的虚拟 DOM 是一种轻量级的 DOM 表示形式,它只包含已经被更新的部分。当 Vue 发现组件的数据发生了变化时,它会将虚拟 DOM 重新渲染为真实 DOM。

虚拟 DOM 是 Vue 3 中的一个重要概念,它使得 Vue 3 的渲染性能得到了极大的提升。虚拟 DOM 具有以下特点:

  • 虚拟 DOM 是轻量级的,它只包含已经被更新的部分,因此不会对性能产生太大影响。
  • 虚拟 DOM 可以动态添加、删除和修改组件,这使得 Vue 的渲染性能得到了极大的提升。
  • 虚拟 DOM 支持数据绑定和事件处理,这使得组件之间的交互变得更加简单和高效。

2. Vue 3 的虚拟 DOM 的优势

Vue 3 的虚拟 DOM 相比 Vue 2 的真实 DOM 具有以下优势:

  • 性能更高:虚拟 DOM 减少了 DOM 操作的数量,使得 Vue 的渲染性能得到了极大的提升。
  • 更易于维护:虚拟 DOM 使得 Vue 的代码更加清晰和易于维护。
  • 灵活性更高:虚拟 DOM 支持动态添加、删除和修改组件,这使得 Vue 的渲染性能得到了极大的提升,同时也使得组件之间的交互变得更加简单和高效。

3. Vue 3 的虚拟 DOM 的实现方式

在 Vue 3 中,虚拟 DOM 是由 Vue 自己创建和维护的。当一个组件更新时,Vue 会创建一个新的虚拟 DOM,然后根据新的数据重新渲染为真实 DOM。

虚拟 DOM 的实现方式包括以下几个方面:

  • 虚拟 DOM 的渲染:Vue 会遍历组件中的所有子组件,然后根据新的数据重新渲染它们。Vue 使用了自己的渲染函数,可以将虚拟 DOM 转换为真实 DOM。
  • 真实 DOM 的构建:Vue 使用了自己的构建函数,可以将虚拟 DOM 转换为真实 DOM。Vue 的构建函数会将虚拟 DOM 中的每个节点和属性转换为真实 DOM 中的对应节点和属性。
  • 虚拟 DOM 的比较:当 Vue 发现组件的数据发生了变化时,它会将虚拟 DOM 重新渲染为真实 DOM。在比较虚拟 DOM 和真实 DOM 的差异时,Vue 使用了基于 DOM 操作的比较算法,这使得虚拟 DOM 的比较更加高效。

在这里插入图片描述

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

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

相关文章

【CE】Mac下的CE教程Tutorial:进阶篇(第9关:共享的代码)

▒ 目录 ▒&#x1f6eb; 导读开发环境1️⃣ 第9关&#xff1a;共享的代码翻译操作&#x1f6ec; 文章小结&#x1f4d6; 参考资料&#x1f6eb; 导读 开发环境 版本号描述文章日期2023-03-操作系统MacOS Big Sur 11.5Cheat Engine7.4.3 1️⃣ 第9关&#xff1a;共享的代码 翻…

Python数据分析matplotlib学习

Python数据分析的工具和库包括&#xff1a; 1.Jupyter Notebook&#xff1a;用于交互式数据分析和可视化。 2.NumPy&#xff1a;用于进行数值计算和数组操作。 3.Pandas&#xff1a;用于数据处理和清洗。 4.Matplotlib&#xff1a;用于数据可视化。 5.Scikit-learn&#xff1a;…

MAZDA CX-50没现车怎么办?赶紧去VR看车啊!

爱车一族往往都有过这样的经历&#xff1a;听说某家品牌出了一款心仪的新车&#xff0c;于是一直心心念念想要先睹为快。然而这时候问题就来了&#xff1a;新车从发布到量产上市往往要经历一段过程。没有现车的日子里&#xff0c;就算每天去4S店蹲守也看不到新车。那种心里痒痒…

集成学习详细总结(不涉及数学理论部分)

集成学习&#xff08;Ensemble Learning&#xff09; 1概念 集成学习就是将多个弱学习器组合在一起&#xff0c;从而得到一个更好更全面的强监督学习器模型。其中集成学习被分为3大类&#xff1a;bagging&#xff08;袋装法&#xff09;不存在强依赖关系&#xff0c;其中基学…

Pytorch深度学习笔记(一)前瞻概述

目录 1.人类智能Human intelligence 2.机器学习Machine learning 3.学习系统Learning System 4.神经网络neural network 课程推荐&#xff1a;《PyTorch深度学习实践》完结合集_哔哩哔哩_bilibili 1.人类智能Human intelligence 人类智能Human intelligence&#xff1a;把视…

2023年第十四届蓝桥杯javaB组省赛真题

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;练习时长两年半的java博主 &#x1f4d6;个人主页&#xff1a;君临๑ &#x1f39e;️文章介绍&#xff1a;2023年第十四届蓝桥杯javaB组省赛真题 &#x1f389;所属专栏&#xff1a;算法专栏 &#x1f381; ps&#xff1a;点…

批量自动翻译软件-准确的翻译软件

现代社会&#xff0c;在全球化背景下&#xff0c;语言障碍是碍企业发展的主要因素之一。而翻译软件的出现&#xff0c;为人们跨越语言障碍带来了新的解决方案。针对翻译需要大量文字内容的情况&#xff0c;有一些能翻译大量文字的翻译软件&#xff1a; 147CGPT翻译软件特点&…

【硬件】嵌入式板卡硬件电路设计、焊接

文章目录嵌入式板卡电路 框图常用焊接工具和焊接操作 框图一、元器件//——有极性——//1 肖特基二极管2 钽电容3 三极管4 MOS5 LED6 SMAJ5.0CA&#xff08;TVS管&#xff09;8 SRV05-4&#xff08;ESD管&#xff09;7 电解电容//——无极性——//1 电容2 电阻3 电感4 保险丝//…

软件测试别再说简历项目不会写了,给你安排的明明白白

目录 个人信息 职业技能 工作经历 项目经历 工作经历 项目经历 教育经历 自我评价 个人信息 姓 名&#xff1a;xxx 性 别&#xff1a;女 手 机&#xff1a;xxxxxxxxxxxx 最高学历&#xff1a;统招硕士 工作年限&#xff1a;3 年 职…

Linux搭建docker

1. 查看系统的内核版本 [rootwide ~]# uname -r 3.10.0-1160.el7.x86_642. 将yum更新到最新版本 [rootwide ~]# yum upate -y Complete!3. 安装Docker所需的依赖包 [rootwide ~]# sudo yum install -y yum-utils device-mapper-persistent-data lvm2 Loaded plugins: fastes…

Ae:几何选项

在 Ae 中&#xff0c;一个图层开启 3D 之后&#xff0c;会多出几何选项 Geometry Options和材质选项 Material Options两个属性组。如果“几何选项”不可用&#xff0c;可尝试“更改渲染器” Change Renderer&#xff0c;比如&#xff0c;在合成设置中将“经典 3D” Classic 3D…

SpringBoot使用Freemarker导出word模板(OpenXML)

1、OpenXML word.docx文档另存为xml之后会生成带有OpenXML标签的文档。 1.1、常用标签示意 标签解释<w:wordDocument>XML文档开头描述&#xff0c;包括各种命名空间的描述<o:DocumentProperties> <o:CustomDocumentProperties> <w:fonts> <w:sty…

算法总结-深度优先遍历和广度优先遍历

深度优先遍历(Depth First Search&#xff0c;简称DFS) 与广度优先遍历(Breath First Search&#xff0c;简称BFS)是图论中两种非常重要的算法&#xff0c;生产上广泛用于拓扑排序&#xff0c;寻路(走迷宫)&#xff0c;搜索引擎&#xff0c;爬虫等。 一、深度优先遍历 深度优先…

网络编程三要素

网络编程三要素 IP、端口号、协议 三要素分别代表什么 ip&#xff1a;设备在网络中的地址&#xff0c;是唯一的标识 端口号&#xff1a;应用程序在设备中的唯一标识 协议&#xff1a;数据在网络中传输的规则 常见的协议有UDP、TCP、http、https、ftp ip&#xff1a;IPv4和…

mongodb $lookup 联表查询

ollection orders : orders record example collection items :items record example $lookup 联表查询 通过item字段连接两个集合orders和items,然后使用 $replaceRoot 中的 $mergeObjects 合并成items和orders的连接文档 db.orders.aggregate( [{$lookup: {from: …

ChatGPT原理解析

文章目录Transformer模型结构构成组件整体流程GPT预训练微调模型GPT2GPT3局限性GPT4相关论文Transformer Transformer&#xff0c;这是一种仅依赖于注意力机制而不使用循环或卷积的简单模型&#xff0c;它简单而有效&#xff0c;并且在性能方面表现出色。 在时序模型中&#…

Databend 开源周报第 88 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.com 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 Support Eager…

瑞吉外卖——后台系统登录与退出功能

目录 一、登录功能 1.1 思路 1.2 代码 1.3 完善登录功能——过滤器 一、登录功能 1.1 思路 将页面提交的密码password进行md5加密处理 根据页面提交的用户名username查询数据库 如果没有查询到则返回登录失败结果 密码比对&#xff0c;如果不一致则返回登…

你真的会用background属性?

引言 在日常前端开发中&#xff0c;经常需要进行背景或背景图的处理。但是大多数前端er并未真正清楚背景的正确使用方式。经过本章的学习&#xff0c;相信你一定可以解决99%的背景处理问题。 一&#xff1a;简单使用 背景颜色和背景图片是可以共同出现的 div {width: 300px…

STM32F407移植LVGL基于RT-Thread和无操作系统版本

文章目录一、无操作系统1.源码获取&#xff1a;2.输出设备配置&#xff08;屏幕配置&#xff09;几个关键函数屏幕初始化函数&#xff1a;显示刷新(画点)函数3.输入配置&#xff08;触摸&#xff09;4.提供时基二、RT-Thread1.新建工程2.添加软件包&#xff0c;屏幕相关文件以及…