vue 3.0组件(下)

news2024/12/26 21:54:16

文章目录

  • 前言：
  • 一，`透传`属性和事件
    • 1. 如何“透传属性和事件”
    • 2.如何禁止“透传属性和事件”
    • 3.多根元素的“透传属性和事件”
    • 4. 访问“透传属性和事件”
  • 二，插槽
    • 1. 什么是插槽
    • 2. 具名插槽
    • 3. 作用域插槽
  • 三，单文件组件CSS功能
    • 1. 组件作用域CSS
    • 2.深度选择器
    • 3.CSS中的v-bind()
  • 四，依赖注入
    • 1. provide(提供)
    • 2.inject(注入)
  • 总结

前言：

上一章给大家讲解了组件的注册以及父子组件之间数据的传递，本文继续给大家讲解Vue3组件剩下的东西

一，透传属性和事件

1. 如何“透传属性和事件”

父组件在使用子组件的时候，如何“透传属性和事件”给子组件呢？

  1. 透传属性和事件并没有在子组件中用props和emits声明
  2. 透传属性和事件最常见的如@click和class、id、style
  3. 当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上；如果根元素已有class或style属性，它会自动合并
// 父组件
<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

// 子组件
<template>
    <!-- 
        当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上
        如果根元素已有 class 或 style 属性，它会自动合并
     -->
    <button class="chip" style="box-shadow: 0 0 8px grey;">
        普通纸片
    </button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}

.rounded {
    border-radius: 100px;
}
</style>

渲染结果：

请添加图片描述

2.如何禁止“透传属性和事件”

  • 当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上，那怎么阻止呢？
    • 在组合式 API 的< script setup>中，你需要一个额外的< script>块来书写inheritAttrs: false选项声明来禁止
// 父组件
<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

// 子组件
<script>
export default {
    inheritAttrs: false // 阻止自动透传给唯一的根组件
}
</script>

<!-- 
    在组合式 API 的 <script setup> 中，
    你需要一个额外的 <script> 块来书写 inheritAttrs: false 选项声明来禁止 
-->
<script setup></script>

<template>
    <!-- 
        当子组件只有一个根元素时，透传属性和事件会自动添加到该根元素上
        如果根元素已有 class 或 style 属性，它会自动合并
     -->
    <button class="chip" style="box-shadow: 0 0 8px grey;">
        普通纸片
    </button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}

.rounded {
    border-radius: 100px;
}
</style>

3.多根元素的“透传属性和事件”

  • 多根节点的组件并没有自动“透传属性和事件”的行为，由于Vue不确定要将“透传属性和事件”透传到哪里，所以我们需要v-bind="$attrs"来显式绑定，否则将会抛出一个运行时警告
// 父组件
<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

// 子组件
<template>
    <!-- 多根节点的组件并没有自动“透传属性和事件”的行为 -->

    <button class="chip">
        普通纸片
    </button>

    <hr>

    <button class="chip" v-bind="$attrs">
        普通纸片
    </button>

    <hr>

    <button class="chip" v-bind="$attrs">
        普通纸片
    </button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
}

.rounded {
    border-radius: 100px;
}
</style>

4. 访问“透传属性和事件”

  • 在组合式 API 中的< script setup>中引入useAttrs()来访问一个组件的“透传属性和事件”
// 父组件
<script setup>
import ChipVue from './components/Chip.vue';

function say() {
    alert('Hello')
}
</script>

<template>
    <!-- 透传的属性（style，class，title）在子组件中并没有在 props 声明 -->
    <!-- 透传的事件（click）在子组件中并没有在 emits 声明 -->
    <ChipVue
        class="rounded"
        style="border: 1px solid blue;"
        title="纸片"
        @click="say"
    />
</template>

// 子组件
<script setup>
import { useAttrs } from 'vue';

// 透传的属性和事件对象
let attrs = useAttrs()

 // 在 JS 中访问透传的属性和事件
function showAttrs() {
    console.log(attrs)
    console.log(attrs.class)
    console.log(attrs.title)
    console.log(attrs.style)
    attrs.onClick()
}
</script>

<template>
    <button class="chip" v-bind="attrs">
        普通纸片
    </button>

    <hr>

    <h6>{{ attrs }}</h6>

    <ul>
        <li>{{ attrs.title }}</li>
        <li>{{ attrs.class }}</li>
        <li>{{ attrs.style }}</li>
    </ul>

    <button @click="attrs.onClick()">执行透传的事件</button>

    <hr>

    <button @click="showAttrs">在 JS 中访问透传的属性和事件</button>
</template>

<style>
.chip {
    border: none;
    background-color: rgb(231, 231, 231);
    padding: 8px 15px;
    margin: 10px;
}

.rounded {
    border-radius: 100px;
}
</style>

注意：
● 虽然这里的attrs对象总是反映为最新的“透传属性和事件”，但它并不是响应式的 (考虑到性能因素)，你不能通过侦听器去监听它的变化
● 如果你需要响应性，可以使用prop或者你也可以使用onUpdated()使得在每次更新时结合最新的attrs执行副作用

二，插槽

  • 在某些场景中，我们可能想要为子组件传递一些模板片段，让子组件在它们的组件中渲染这些片段，为此 vue 提供了组件的插槽

1. 什么是插槽

  • 在封装组件时，可以使用<slot>元素把不确定的、希望由用户指定的部分定义为插槽；插槽可以理解为给预留的内容提供占位符
  • 插槽也可以提供默认内容，如果组件的使用者没有为插槽提供任何内容，则插槽内的默认内容会生效

注意：如果在封装组件时没有预留任何插槽，用户提供传递一些模板片段将会被遗弃

请添加图片描述

// 父组件
<script setup>
import CardVue from './components/Card.vue'
</script>

<template>
    <CardVue>
        <!-- 向子组件插槽中提供内容 -->
        <button>关闭</button>
    </CardVue>
</template>

// 子组件
<template>
    <div class="card">
        <h2 class="title"></h2>
        <div class="subtitle"></div>
        <div class="content"></div>
        <div class="action">
            <!-- 定义一个插槽 -->
            <!-- 插槽的默认内容，只有没有提供内容时，才会显示 -->
            <slot>卡片功能区域</slot>
        </div>
    </div>
</template>

<style>
.card {
    width: 250px;
    border: 1px solid black;
}

.card h2,
.card div {
    margin: 10px;
    padding: 5px;
}

.title {
    border: 1px solid red;
}

.subtitle {
    border: 1px solid green;
}

.content {
    border: 1px solid blue;
}

.action {
    border: 1px solid pink;
}
</style>

2. 具名插槽

  • 如果在封装组件时需要预留多个插槽节点，则需要为每个< slot>插槽指定具体的name名称，这种带有具体名称的插槽叫做“具名插槽”
  • 没有指定name名称的插槽，会有隐含的名称叫做 default
  • 在< template>元素上使用 v-slot:slotName或者#slotName向指定的具名插槽提供内容
// 父组件
<script setup>
import CardVue from './components/Card.vue'
</script>

<template>
    <CardVue>
        <!-- 向具名插槽提供内容 -->
        <template v-slot:cardTitle>
            博客
        </template>

        <template #cardSubtitle>
            <i>百万博主分享经验</i>
        </template>

        <!-- 向子组件默认插槽中提供内容 -->
        <!-- <button>关闭</button> -->

        <template #default>
            <button>关闭</button>
        </template>
    </CardVue>
</template>

// 子组件
<template>
    <div class="card">
        <h2 class="title">
            <!-- 带有 name 的属性的插槽，称为具名插槽 -->
            <slot name="cardTitle"></slot>
        </h2>
        <div class="subtitle">
            <slot name="cardSubtitle"></slot>
        </div>
        <div class="content">
            <slot name="cardContent"></slot>
        </div>
        <div class="action">
            <!-- 定义一个插槽 -->
            <!-- 插槽的默认内容，只有没有提供内容时，才会显示 -->
            <!-- 没有 name 属性的插槽称为默认插槽，会有一个隐含的名字：default -->
            <slot>卡片功能区域</slot>
        </div>
    </div>
</template>

<style>
.card {
    width: 250px;
    border: 1px solid black;
}

.card h2,
.card div {
    margin: 10px;
    padding: 5px;
}

.title {
    border: 1px solid red;
}

.subtitle {
    border: 1px solid green;
}

.content {
    border: 1px solid blue;
}

.action {
    border: 1px solid pink;
}
</style>

3. 作用域插槽

  • 如何在向插槽提供的内容时获得子组件域内的数据呢？
    • 在声明插槽时使用属性值的方式来传递子组件的数据，这种带有数据的插槽称之为作用域插槽
    • 在< template>元素上使用v-slot:slotName="slotProps"或#slotName="slotProps"的方式来访问插槽传递属性值
    • 如果没有使用< template>元素，而是直接在使用子组件中直接给默认插槽提供内容，我们可以在使用该子组件时用v-slot="slotProps"来接收该插槽传递的数据对象

注意：< slot >插槽上的name是一个Vue特别保留的属性，不会在作用域插槽中访问到

// 父组件
<script setup>
import CardVue from './components/Card.vue'
</script>

<template>
    <CardVue>
        <!-- 向具名插槽提供内容 -->
        <template v-slot:cardTitle>
            博客
        </template>

        <template #cardSubtitle>
            <i>百万博主分享经验</i>
        </template>

        <!-- 访问插槽中提供的数据 -->
        <template #cardContent="dataProps">
            <ul>
                <li>{{ dataProps }}</li>
                <li>博客的标题：{{ dataProps.cardBlog.title }}</li>
                <li>博客的时间：{{ dataProps.cardBlog.time }}</li>
                <li>博主：{{ dataProps.cardAuthor }}</li>
            </ul>
        </template>

        <!-- 向子组件默认插槽中提供内容 -->
        <!-- <button>关闭</button> -->

        <template #default>
            <button>关闭</button>
        </template>
    </CardVue>

    <hr>

    
    <CardVue v-slot="dataProps">

        <!-- 如果使用子组件时用到了 v-slot，则该子组件标签中将无法向其他具名插槽中提供内容 -->
        <!-- 
        <template #cardSubtitle>
            <i>百万博主分享经验</i>
        </template> 
        -->

        <button>{{dataProps.close}}</button>
        <button>{{dataProps.sure}}</button>
    </CardVue>
</template>

// 子组件
<script setup>
import { reactive, ref } from 'vue';

let blog = reactive({
    title: 'Java 如何实现上传文件',
    time: '2021-12-25 15:33:25'
})

let author = ref('爱思考的飞飞')

let closeBth = ref('关闭')
let determine = ref('确定')
</script>

<template>
    <div class="card">
        <h2 class="title">
            <!-- 带有 name 的属性的插槽，称为具名插槽 -->
            <slot name="cardTitle"></slot>
        </h2>
        <div class="subtitle">
            <slot name="cardSubtitle"></slot>
        </div>
        <div class="content">
            <!-- 带有数据的插槽称之为作用域插槽 -->
            <!-- <slot>插槽上的 name 是一个Vue特别保留的属性，不会在作用域插槽中访问到 -->
            <slot name="cardContent" :cardBlog="blog" :cardAuthor="author"></slot>
        </div>
        <div class="action">
            <!-- 定义一个插槽 -->
            <!-- 插槽的默认内容，只有没有提供内容时，才会显示 -->
            <!-- 没有 name 属性的插槽称为默认插槽，会有一个隐含的名字：default -->
            <slot :close="closeBth" :sure="determine">卡片功能区域</slot>
        </div>
    </div>
</template>

<style>
.card {
    width: 450px;
    border: 1px solid black;
}

.card h2,
.card div {
    margin: 10px;
    padding: 5px;
}

.title {
    border: 1px solid red;
}

.subtitle {
    border: 1px solid green;
}

.content {
    border: 1px solid blue;
}

.action {
    border: 1px solid pink;
}
</style>

三，单文件组件CSS功能

  • 默认情况下，写在.vue组件中的样式会全局生效，很容易造成多个组件之间的样式冲突问题
    导致组件之间样式冲突的根本原因是：
    • 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的
    • 每个组件中的样式，都会影响整个index.html页面中的DOM元素

1. 组件作用域CSS

  • 当< style>标签带有scoped属性的后：
    • 它的CSS只会影响当前组件的元素，父组件的样式将不会渗透到子组件中
    • 该组件的所有元素编译后会自带一个特定的属性
    • 该< style scoped>内的选择器，在编译后会自动添加特定的属性选择器
    • 子组件的根节点会同时被父组件的作用域样式和子组件的作用域样式影响，主要是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式
// 转换前
<style scoped>
.error {
    color: red;
}
</style>

<template>
    <div class="error">hi</div>
</template>

// 转换后
<style>
.error[data-v-f3f3eg9] {
    color: red;
}
</style>

<template>
    <div class="example" data-v-f3f3eg9>hi</div>
</template>

案例：

// 父组件
<script setup>
import ButtonVue from './components/Button.vue';
</script>

<template>
    <div class="error">
        <h3>【父】标题</h3>
        <button>【父】普通按钮</button>
    </div>

    <hr>
    <ButtonVue />
</template>

<!-- 
    scoped 属性，
    让下方的选择器的样式只作用在该组件中，或者子组件的根元素上 
-->
<style scoped>
h3 {
    border: 1px solid blue;
}

.error {
    border: 1px solid red;
    padding: 15px;
}
</style>

// 子组件
<template>
    <div class="error">
        <h3>【子】标题</h3>
        <button>【子】普通按钮</button>
    </div>
</template>

2.深度选择器

  • 处于scoped样式中的选择器如果想要做更“深度”的选择，即影响到子组件，可以使用:deep()这个伪类
// 编译前
<style scoped>
    .a :deep(.b) { /* ... */ }	
</style>

// 编译后
<style>
    .a[data-v-f3f3eg9] .b { /* ... */ }
</style>

案例

// 父组件
<script setup>
import ButtonVue from './components/Button.vue';
</script>

<template>
    <div class="error">
        <h3>【父】标题</h3>
        <button>【父】普通按钮</button>
    </div>

    <hr>
    <ButtonVue />
</template>

<!-- 
    scoped 属性，
    让下方的选择器的样式只作用在该组件中，或者子组件的根元素上
    该组件中的所有元素及子组件中的根元素会加上固定的属性（data-v-~）
    该 css 选择器都会自动添加固定的属性选择器（[data-v-~]）
-->
<style scoped>
h3 {
    border: 1px solid blue;
}

.error {
    border: 1px solid red;
    padding: 15px;
}

/* 如果想在 style scoped 中让样式作用到子组件中，那么可以使用 :deep() 伪类选择器 */
.error:deep(button) {
    border: 2px solid green;
    padding: 8px 15px;
}
</style>

// 子组件
<template>
    <div class="error">
        <h3>【子】标题</h3>
        <button>【子】普通按钮</button>
    </div>
</template>

3.CSS中的v-bind()

  • 单文件组件的< style >标签支持使用v-bindCSS函数将CSS的值链接到动态的组件状态
  • 这个语法同样也适用于< script setup>，且支持JavaScript表达式（需要用引号包裹起来）
  • 实际的值会被编译成哈希化的CSS自定义属性，因此CSS本身仍然是静态的
  • 自定义属性会通过内联样式的方式应用到组件的某个元素上，并且在源值变更的时候响应式地更新
<script setup>
import { reactive } from 'vue';

// 按钮主题
let btnTheme = reactive({
    backColor: '#000000', // 背景色
    textColor: '#FFFFFF' // 文本色
})
</script>

<template>
    <button>普通按钮</button>

    <hr>

    背景色：<input type="color" v-model="btnTheme.backColor">
    文本色：<input type="color" v-model="btnTheme.textColor">
</template>


<style scoped>
    button {
        /* 使用 v-bind() 可以使用该组件的中数据源，如果绑定的数据源值发生变化，则样式也会随着更新 */
        background-color: v-bind('btnTheme.backColor');
        color: v-bind('btnTheme.textColor');
    }
</style>

四，依赖注入

  • 如果有一个深层的子组件需要一个较远的祖先组件中的部分数据，如果实现呢？
    • 可使用props沿着组件链逐级传递下去，如图
      请添加图片描述
  • 我们可在祖先组件使用provide提供数据，后代组件使用inject注入数据，如图
    请添加图片描述

1. provide(提供)

在应用层如何提供：

  • 在应用层方面可通过app.provide()为后代提供数据
import { createApp } from 'vue'
const app = createApp({ })
app.provide('message', 'hello!') // message 注入名， 'hello' 值

在组件中如何提供：

- 在组合式 API` < script setup`> 中，可通过`provide()函数`来为后代组件提供数据 
<script setup>
import { ref, provide } from 'vue'

const message = 'hello'
const title = ref('博客')
const subtitle = ref('百万博主分享经验')

function changeSubtitle(sub) {
    this.subtitle = sub
}

provide('message', message) // 提供固定数据
provide('title', title) // 提供响应式数据
provide('subtitle', subtitle) // 提供响应式数据
provide('changeSubtitle', changeSubtitle) // 为后代组件提供修改响应式数据 subtitle 的函数
</script>

2.inject(注入)

  • 在组合式 API 中，使用inject()函数的返回值来注入祖先组件提供的数据
    • 如果提供数据的值是一个ref，注入进来的会是该ref对象，和提供方保持响应式连接
    • 如果注入的数据并没有在祖先组件中提供，则会抛出警告，可在provide()函数的第二个参数设置默认值来解决
    • 他们可以在JS和视图模板中直接访问
<script setup>
import { inject } from 'vue'

const c_message = inject('message')
const title = inject('title')
const c_subtitle = inject('subtitle')
const c_changeSub = inject('changeSubtitle')
// 祖先组件并未提供 content，则会报警告，设置默认值来解决
const c_content = inject('content',  '暂时还未有内容') 
</script>

总结

以上就是vue3.0 组件的全部内容和基本用法，文章的代码为一个一个的案例感兴趣可以敲一敲看一看。希望本篇文章能够帮助到你，不懂得可以评论区或者私信问我，我也会一 一解答。谢谢观看！
我的其他文章:https://blog.csdn.net/m0_60970928?type=blog

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

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

相关文章

css实现音乐播放器页面 · 笔记

css实现音乐播放器页面 · 笔记

效果 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width, …
阅读更多...
k8s 系列之 CoreDNS 解读

k8s 系列之 CoreDNS 解读

k8s 系列之 CoreDNS CoreDNS工作原理 kuberntes 中的 pod 基于 service 域名解析后&#xff0c;再负载均衡分发到 service 后端的各个 pod 服务中&#xff0c;如果没有 DNS 解析&#xff0c;则无法查到各个服务对应的 service 服务 在 Kubernetes 中&#xff0c;服务发现有几…
阅读更多...
都2023年还不知道Java8如何优雅简化代码就落后了

都2023年还不知道Java8如何优雅简化代码就落后了

1、使用 Stream 简化集合操作 Java8 Stream流操作总结_出世&入世的博客-CSDN博客 2、使用 Optional 简化判空逻辑 空指针异常&#xff08;NullPointerExceptions&#xff09;是 Java 最常见的异常之一&#xff0c;一直以来都困扰着 Java 程序员。一方面&#xff0c;程序…
阅读更多...
springboot集成canal 实现mysql增量同步mongodb

springboot集成canal 实现mysql增量同步mongodb

一、canal官网https://kgithub.com/alibaba/canal/二、下载地址https://kgithub.com/alibaba/canal/releases三、细节1.6版本有bug&#xff08;如果只是部署deployer&#xff0c;那没问题&#xff0c;如果你想部署admin模块来监控&#xff0c;那就会报错&#xff1a;java.nio.B…
阅读更多...
运算方法和运算电路

运算方法和运算电路

文章目录运算方法和运算电路基本运算部件定点数的移位运算算术移位逻辑移位循环移位定点数的加减运算原码的加减法补码的加减法原码的乘法补码的乘法原码的除法补码的除法符号扩展大小端和内存对齐刷题小结最后运算方法和运算电路 基本运算部件 运算器一般包含这么几部分&…
阅读更多...
7 线性回归及Python实现

7 线性回归及Python实现

1 统计指标 随机变量XXX的理论平均值称为期望: μE(X)\mu E(X)μE(X)但现实中通常不知道μ\muμ, 因此使用已知样本来获取均值 X‾1n∑i1nXi.\overline{X} \frac{1}{n} \sum_{i 1}^n X_i. Xn1​i1∑n​Xi​.方差variance定义为&#xff1a; σ2E(∣X−μ∣2).\sigma^2 E(|…
阅读更多...
STM32单片机的FLASH和RAM

STM32单片机的FLASH和RAM

STM32内置有Flash和RAM&#xff08;而RAM分为SRAM和DRAM&#xff0c;STM32内为SRAM&#xff09;&#xff0c;硬件上他们是不同的设备存储器、属于两个器件&#xff0c;但这两个存储器的寄存器输入输出端口被组织在同一个虚拟线性地址空间内。 MDK预处理、编译、汇编、链接后编…
阅读更多...
月薪7k和月薪27k的测试人都有哪些区别？掌握这些，领导都要高看你...

月薪7k和月薪27k的测试人都有哪些区别？掌握这些，领导都要高看你...

了解软件测试这行的人都清楚&#xff0c;功能测试的天花板可能也就15k左右&#xff0c;而自动化的起点就在15k左右&#xff0c;当然两个岗位需要掌握的技能肯定是不一样的。 如果刚入门学习完软件测试&#xff0c;那么基本薪资会在7-8k左右&#xff0c;这个薪资不太高主要是因…
阅读更多...
【存储】RAID0、RAID1、RAID3、RAID5、RAID6、混合RAID10、混合RAID50

【存储】RAID0、RAID1、RAID3、RAID5、RAID6、混合RAID10、混合RAID50

存储RAID基本概念RAID数据组织形式RAID数据保护方式常用RAID级别与分类标准创建RAID组成员盘要求热备盘&#xff08;Hot Spare&#xff09;RAID 0的工作原理RAID 0的数据写入RAID 0的数据读取RAID 1的工作原理RAID 1的数据写入RAID 1的数据读取RAID 3的工作原理RAID 3的数据写入…
阅读更多...
数据Python 异常处理

数据Python 异常处理

python标准异常异常名称描述BaseException所有异常的基类SystemExit解释器请求退出KeyboardInterrupt用户中断执行(通常是输入^C)Exception常规错误的基类StopIteration迭代器没有更多的值GeneratorExit生成器(generator)发生异常来通知退出StandardError所有的内建标准异常的基…
阅读更多...
python学习之定制发送带附件的电子邮件

python学习之定制发送带附件的电子邮件

Python SMTP发送邮件 SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则&#xff0c;由它来控制信件的中转方式。python的smtplib提供了一种很方便的途径发送电子邮件。它对smtp协议进行了简单的封…
阅读更多...
数据结构与算法基础（王卓）（12）：队列的定义及其基础操作（解决假上溢的方法，循环队列解决队满时判断方法，链队和循环队列的初始化等）

数据结构与算法基础（王卓）（12）：队列的定义及其基础操作（解决假上溢的方法，循环队列解决队满时判断方法，链队和循环队列的初始化等）

循环队列&#xff1a; 解决假上溢的方法&#xff1a;引入循环队列&#xff08;判断是否溢出&#xff09; 将入队操作由&#xff1a; base[rear]x; rear; 准确的来说&#xff0c;是&#xff1a; Q.base[Q.rear]x; Q.rear; 改为 Q.base[Q.rear]x; Q.rear(Q.rear1)% MAXQSIZ…
阅读更多...
摘录一下Python列表和元组的学习笔记

摘录一下Python列表和元组的学习笔记

1 基础概念 列表一个值&#xff0c;列表值指的是列表本身&#xff0c;而不是列表中的内容 列表用[]表示 列表中的内容称为 表项 len()函数可以显示列表中表项的个数&#xff0c;比如下面这个例子 spam [cat, bat, dog, rat]print(len(spam))列表的范围选取中&#xff0c;比…
阅读更多...
96.【SpringBoot接入支付宝-thymeleaf-springBoot】

96.【SpringBoot接入支付宝-thymeleaf-springBoot】

SpringBoot接入支付宝(一)、前提工作:1、进入支付宝开发平台—沙箱环境1.1、进入个人沙箱环境1.2、接下来进行几个密钥的生成1.3、拿到两个密钥后&#xff0c;进行自定义密钥配置1.4、至此&#xff0c;我们沙箱环境的配置和基本参数都已经获取到。(二)、Java代码-thymeleaf1.导…
阅读更多...
蓝桥杯-超级质数

蓝桥杯-超级质数

蓝桥杯-超级质数1、问题描述2、解题思路3、代码实现1、问题描述 如果一个质数 P 的每位数字都是质数, 而且每两个相邻的数字组成的两位 数是质数, 而且每三位相邻的数字组成的三位数是质数, 依次类推, 如果每相邻的 k 位数字组成的 k 位数都是质数, 则 P 称为超级质数。 如果把…
阅读更多...
重型工业机械设备远程监控解决方案

重型工业机械设备远程监控解决方案

随着企业的发展&#xff0c;各类机械设备日益增多&#xff0c;为了实现高效的管理和使用&#xff0c;保障安全生产&#xff0c;建立智能化、信息化的工业制造系统成为了必然趋势。 传统的机械设备管理大多采用人工方式&#xff0c;现场作业人员需要每天通过电话、或者E-mail等方…
阅读更多...
利用反射实现通过读取配置文件对类进行实例化-课后程序(JAVA基础案例教程-黑马程序员编著-第十二章-课后作业)

利用反射实现通过读取配置文件对类进行实例化-课后程序(JAVA基础案例教程-黑马程序员编著-第十二章-课后作业)

【案例12-3】&#xff1a;利用反射实现通过读取配置文件对类进行实例化 【案例介绍】 1.案例描述 现在有一个项目&#xff0c;项目中创建了一个Person类&#xff0c;在Person类中定义了一个sleep()方法。在工程中还定义了一个Student类继承Person类&#xff0c;在Student类中…
阅读更多...
项目管理PMP证书的含金量真的高吗？

项目管理PMP证书的含金量真的高吗？

含金量当然高的&#xff0c;特别是在项目管理这个领域&#xff0c;绝对是知名度最高的&#xff0c;行业内最受认可的相关证书&#xff0c;含金量等同于于MBA&#xff0c;那么&#xff0c;除去它本身专业知识价值&#xff0c;它的含金量高在哪里呢&#xff1f; &#xff08;含资…
阅读更多...
linux离线状态下将视频mp4格式转换m3u8

linux离线状态下将视频mp4格式转换m3u8

因为业务需求&#xff0c;python文件生成的视频为MP4格式&#xff0c;无法在前端浏览器正常播放&#xff0c;需切换m3u8格式&#xff0c;但因为服务器是没有网络的&#xff0c;因袭需要在离线状态下进行完成。 1.离线安装ffmpeg 看网上许多教程&#xff0c;ffmpeg可完成视频格…
阅读更多...
【工具】笔记软件测评（简单）

【工具】笔记软件测评（简单）

介绍 笔记软件测评 印象笔记 ── ❌开源、❌markdown&#xff08;不好用&#xff09;、❌本地存储 臭名昭著&#xff0c;被资本搞烂的理想。 notion ── ❌开源、❌本地存储、✔️数据导出&#xff1a;PDF、HTML、Markdown & CSV &#xff08;include subpages&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023