vue2 组件封装

vue2 组件封装

    • 文件组织形式
    • Vue 组件的三大核心
      • 属性(props、data 和样式)
        • data vs props
        • 打破 props 单向数据流
      • 事件
        • 表单修饰符
        • 事件修饰符
      • 插槽
        • 新指令 v-slot
    • 其他杂项
      • 组件生成 id
      • \$nextTick 函数的使用
      • 在父级组件中调用子组件的方法
    • 样式
    • 总结
    • 参考

本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点:

  • 封装一个组件的代码组织形式;
  • vue 组件的三大核心:
    • 属性(props、data);
    • 事件
    • 插槽
  • 样式
  • 其他一些杂项
    • $nextTick 函数的使用
    • 获取 DOM 元素及在父级组件中执行子组件方法

使用第三方计数库 countup.js 创建一个 count-to 组件对以上知识进行总结。

文件组织形式

在组件文件夹 component 下创建一个与组件名相同的文件,文件夹内必须有 index.js , 并将组件导入到该文件中,这样方便我们引用组件。

count-to 文件夹内:

// index.js
import CountTo from './count-to.vue'
export default CountTo

使用组件时,只需这样引入:

import CountTo from '_c/count-to' // _c 是组件存放路径

Vue 组件的三大核心

属性(props、data 和样式)

props 定义了组件 可配置 的数据,确定的组件的核心功能。封装组件时,props 推荐写成对象形式,方便对数据进行验证,提高了代码健壮性也能明确如何使用。

常见的检查类型: NumberStringBooleanArrayObjectDateFunctionSymbol构造函数null|undefined 会通过所有类型。

还可以自定义验证函数,指定是否必须和默认值。

props: {// 多个可能的类型propB: [String, Number],// 必填的字符串propC: {type: String,required: true},// 带有默认值的数字propD: {type: Number,default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组默认值必须从一个工厂函数获取default: function() {return {message: 'hello'}}},// 自定义验证函数propF: {validator: function(value) {// 这个值必须匹配下列字符串中的一个return ['success', 'warning', 'danger'].indexOf(value) !== -1}}
}

通过阅读 countUP 文档,了解到构造函数 CountUp 的参数

CountUp(eleDOM, startValue, endValue, decimals, duration, options) // eleDOM 是数值显示的元素;endValue 是数值的最终值,这两个参数必须的。

组件代码如下:

<template><div><span :id="eleId"></span></div>
</template>
<script>import CountUp from 'countup'export default {name: 'CountTo',props: {/*** @description 起始值*/startValue: {type: Number,default: 0},/*** @description 终止值*/endValue: {type: Number,required: true},/*** @description 小数点后保留几位小数(精度)*/decimals: {type: Number,default: 0},/*** @description 渐变时长(秒)*/duration: {type: Number,default: 1},/***@description 变速效果*/useEasing: {type: Boolean,default: false},/***@description 分组*/useGrouping: {type: Boolean,default: true},/***@description 分组符号 2,2234*/separator: {type: String,default: ','},/***@description 整数小数分隔符 34.56*/decimal: {type: String,default: '.'},/*** @description  动画延迟(秒)*/delay: {type: Number,default: 0}},data() {return {}},computed: {eleId() {// 使用 this.uid 生成组件内唯一idreturn `count_up_uid${this._uid}`}},mounted() {// TODO: this.$nextTickthis.$nextTick(() => {let options = {useEasing: this.useEasing,useGrouping: this.useGrouping,separator: this.separator,decimal: this.decimal}this.counter = new CountUp(this.eleId, this.startValue, this.endValue, this.decimals, this.duration, options)})}}
</script>

代码说明:
this._uid 用于生成 组件内唯一 的 id 值,可用作元素的 id,值是递增的。

this.$nextTick 函数接收一个回调函数作为参数,回调函数会在 DOM更新 之后执行,如果某些操作必须在 DOM 更新之后,可将这些操作作为其参数。

计数组件的基本功能就满足了。

这样使用组件:

<template><div><count-to :end-value="endValue" :decimals="decimals" :duration="5" title="这个会挂载到组件根元素上"></count-to></div>
</template>
<script>import CountTo from '_c/count-to'export default {name: 'count_to',components: {CountTo},data() {return {endValue: 4000,decimals: 2,className: ''}}}
</script>
<count-to :end-value="endValue" :decimals="decimals" :duration="5"></count-to>

prop 的命名:

组件中使用 小驼峰 命名,传递值是使用 -

关于 props 传递静态值:

不使用 v-bind: 传递的是静态值,是一个字符串字常量,而不是变量,而使用 : 指令传递的值,是有类型的。 :duration="5" 传递是 数值 5, duration="5" 传递字符串 '5'
duration="true" 传递的是字符串 true 而不是 Boolean 值真值。

默认值:

传递是引用类型的值(对象和数组),默认值需要使用一个工厂函数返回一个引用类型的值。

inheritAttrs:

如果传递一个组件中没有声明的属性,该属性会挂载都组件元素上,可在组件中将 inheritAttrs 设置为 false 取消这一行为。上面的 title 属性会挂载到组件的 div 上。该属性不应 style 和 class 的传递。

<count-to title="会挂载到组件的根元素上" test="test" :end-value="endValue" :decimals="decimals" :duration="5"></count-to>

title 会成为 count-to 组件的根元素的属性:

<div title="这是标题" test="测试"><span id="count_up_uid14">10,000.00</span>
</div>

$attrs 接收没有声明的属性

title 和 test 属性没有在组件中声明,依然可以在组件中使用 attrs 接收到些属性:
<span>没有props接收的父组件数据:{{$attrs}}</span><br/>

最后的结果:

<div title="这是标题" test="测试"><span>没有props接收的父组件数据:{ "title": "这是标题", "test": "测试" }</span><br /><span id="count_up_uid14">10,000.00</span>
</div>

inheritAttrs: false 和 $attrs 结合使用:

有了 inheritAttrs: false 和 $attrs,你就可以手动决定这些特性会被赋予哪个元素,而不需要声明变量接收

data vs props

props 从父级组件入,传入的值由父级组件维护,不允许在子组件中直接操作, 是否必需和数据类型都是确定的,我们不能改变。

data 是组件内部维护的状态,组件可直接操作,可随时改变值、类型等。

相同点:都是组件的属性,改变两者都会响应到模板上。

打破 props 单向数据流

Vue 不允许在子组件中直接操作 props , 否则会报错,因为父组件和子组件都可直接操作 props,会使得 props 的管理变得混乱。可通过一些间接的方式操作 props:

  1. 将 props 赋值给 data ,然后操作 data;

  2. 在计算属性中返回 props;

以上两种方式,修改后的值,是不能会响应到父组件的,想要在父级组件中也看到修改,需要用到下面的方式:

  1. .sync 和 $emit 结合

传递 props 时加上 .sync 修饰符,在子组件内部使用 $emit 更新 props。

使用 .sync 需要注意:

  • 不能和表达式一起使用:v-bind:title.sync="doc.title + '!'";
  • 不能传递对象字面量:v-bind.sync="{ title: doc.title }"
  1. 传递引用类型的 props

传递数组和对象,在子组件中修改他们,会直接反应到父组件上。

事件

传统的 web 开发使用事件驱动:

  • 查询节点 → 绑定事件监听;
  • 用在页面上触发事件 → 执行监听器,修改 DOM, 反馈到页面上;
    这种模式开发效率低成本高。

Vue 的核心思想是数据驱动,视图由数据决定。MVVM 架构的页面变化流程:

View(用户操作) → 执行 DOMlistenrs (ViewModel) → Data 改变 (Model)→ View 改变。

组件和绑定原生事件和自定义事件,绑定原生事件时,需要添加 native 修饰符。

可以在组件的原生事件处理器中触发一个自定义事件,就能在父级组件中监听该事件,执行相关操作。

count-to 声明一个 changeValue 事件:

增加一个按钮:

<button @click="add">+</button>

在事件处理器 add 中触发一个自定义事件:

add() {this.$emit("changeValue", Math.random() * 100);
}

$emit 的第一个参数是事件名称,第二个参数是传递到该事件监听器的参数。

在组件上监听 changValue :

<template><div><count-to :end-value="endValue" :decimals="decimals" :duration="5" @changeValue="changeValue"></count-to></div>
</template>
<script>import CountTo from '_c/count-to'export default {name: 'count_to',components: {CountTo},data() {return {endValue: 4000,decimals: 2}},methods: {changeValue(value) {this.endValue += value}}}
</script>

自定义一个更新结束事件:

<script>import CountUp from 'countup'export default {name: 'CountTo',methods: {getCount() {// 使用 id 获取 DOMlet span = document.getElementById(this.eleId)let currentValue = Number.parseFloat(span.innerText.split(',').join(''))return currentValue.toFixed(this.decimals)},emitEnd() {this.$emit('on-end', this.getCount())// this.$emit('on-end', this.endValue) 使用 endValue 不是 库处理后的值,所有使用 DOM 元素获取更新后的值}},// 监听 props 属性的变化watch: {endValue(newValue) {// update 是库的方法this.counter.update(newValue)setTimeout(() => {this.emitEnd()}, this.duration * 1000 + 2)}}}
</script>

在组件上使用监听 on-end :

<template><div><count-to :end-value="endValue" :decimals="decimals" :duration="5" @on-end="endUp"></count-to></div>
</template>
<script>import CountTo from '_c/count-to'export default {name: 'count_to',components: {CountTo},data() {return {endValue: 4000,decimals: 2}},methods: {// 更新接收后,会触发自定义事件,然后执行该函数endUp(value) {console.log('endValue => ', value)}}}
</script>
表单修饰符
  • lazy : 在change事件同步数据;
  • trim : 删除首尾空格;
  • number :只能输入数字;
事件修饰符
  • stop:阻止冒泡;
  • prevent : 阻止默认行为;
<!-- 阻止单击事件继续传播 -->
<a v-on :click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on :submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

插槽

props 传递普通的数据类型,插槽提供了 传递 HTML 代码 的方式,父组件中给的插槽内容,会被放置到子组件的指定为位置。

父组件决定是否显示插槽和怎样显示,子组件决定插槽显示的位置。

三种插槽:

  • 匿名插槽;
  • 命名插槽;
  • 作用域插槽。

我们现在想要在 数值左边显示一个从父级组件传递到组件中的文字提示,数值右边显示人民币符号。

可使用插槽接收文字提示和人民币符号:

<template><div><!-- 匿名插槽 找不到放置的位置,就放在这里--><slot></slot><span :id="eleId"></span><slot name="right"></slot><!-- 命名插槽--></div>
</template>

在父级组件传递插槽内容:

<template><div><count-to :end-value="endValue" :decimals="decimals" :duration="5"><span>金额:</span><span slot="right"></span></count-to></div>
</template>

最后的 html 是这样的:

<div><span>金额:</span><span id="count_up_uid13">4,000.00</span><span></span>
</div>

不传递插槽内容时,可以在组件中设置一个默认的插槽内容:

<template><div><slot>奖金额度:</slot><span :id="eleId"></span><slot name="right"></slot></div>
</template>

父级组件的作用域和子组件的作用是独立的,在父级组件的插槽内容中,获取不到子组件的数据。

<template><div><count-to :end-value="endValue" :decimals="parentDecimals" :duration="5"><span>精确到几位小数:{{parentDecimals}}</span><span slot="right">{{decimals}}</span></count-to></div>
</template>

parentDecimals 是父级组件中的属性,插槽内容属于父级作用域,可获取父级的数据;
decimals 是子级组件中的属性,插槽内容属于父级作用域,获取不到值;

想要在父级插槽内容中获取子组件的数据,就需要用到作用域插槽。

现在想要把数值前面的文字从父级组件传递到子组件,并且还要传递文字的颜色:

text: {name: "本月工资",color: "#F4D03F"
},

子组件这样定义:

<template><div><!--向父级组件传递text 并起了名字--><slot v-bind="text" name="left">奖金额度:</slot><span :id="eleId" ref="number"></span><slot name="right"></slot></div>
</template>
<script>import CountUp from 'countup'export default {name: 'CountTo',props: {// 增加 proptext: {type: Object,default: () => {}}}}
</script>

这样使用组件:

<template><div><count-to :end-value="endValue" :decimals="decimals" :duration="5" :text="text"><template slot-scope="data" slot="left"><span :style="{color:data.color}">{{data.name}}:</span></template><span slot="right"></span></count-to></div>
</template>
<script>import CountTo from '_c/count-to'export default {name: 'count_to',components: {CountTo},data() {return {text: {name: '本月工资',color: '#F4D03F'},endValue: 4000,decimals: 2}}}
</script>

<slot v-bind="text">奖金额度:</slot> ,向父级组件传递数据;
slot-scope="data" 用来接收插槽传递到父组件的数据;

新指令 v-slot

在 2.6.0 中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 。

子组件:

<template><div><!-- 向父级组件传递 textFromChild --><slot :textFromChild="text" name="left">奖金额度:</slot><span :id="eleId" ref="number"></span><slot name="right"></slot></div>
</template>
<script>import CountUp from 'countup'export default {name: 'CountTo',props: {// 增加 proptext: {type: Object,default: () => {}}}}
</script>

这样使用组件:

<template><div><count-to :end-value="endValue" :decimals="decimals" :duration="5" :text="text"><template v-slot:left="{textFromChild}"><span :style="{color:textFromChild.color}">{{textFromChild.name}}:</span></template><span slot="right"></span></count-to></div>
</template>

子组件传递过来的变量被放置在一个对象中,使用解构赋值的方式提取出来。

<template v-slot:left="{textFromChild}"><span :style="{color:textFromChild.color}">{{textFromChild.name}}:</span>
</template>

v-slot 指令后跟一个 slot 的名字,插槽具有名字时,可简写为 #

<template #left="{textFromChild}"><span :style="{color:textFromChild.color}">{{textFromChild.name}}:</span>
</template>

不管有几个插槽,都把插槽内容放置在 template 中是很好的做法。

其他杂项

组件生成 id

使用 this_uid 其他字母,可成组件内唯一的 id。
count-to 组件中,我们使用计算属性,设置 span 的 id。

eleId() {// 使用 this.uid 生成全局唯一idreturn `count_up_uid${this._uid}`;
},

在组件内部,可以通过 id 或者 class 等获取到 dom,但是不推荐这么做。可通过 ref 属性,获取到 DOM ,更加简洁,并且可以直接通过 ref 获取组件或者 DOM 元素。

在下面的函数中获取 DOM:

    getCount() {// TODO: 获取 DOM// 使用 ref 属性获取 DOM 元素// console.log(this.$refs.number.innerText)// return this.$refs.number.innerText// 使用 id 获取 DOMlet span = document.getElementById(this.eleId);let currentValue = Number.parseFloat(span.innerText.split(",").join(""));return currentValue.toFixed(this.decimals);},

$nextTick 函数的使用

this.$nextTick 接收一个回调函数作为参数,参数会在 Vue 完成 DOM 更新后立即调用。如果某些操作是依赖 DOM 更新后的,可以把这些操作放在回调函数里执行。

  • 在 created 和 mounted 阶段,如果需要操作渲染后的试图,也要使用 nextTick 方法。
  • mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted。

Vue.$nexttick 全局的, this.$nexttick 是局部的。

var vm = new Vue({el: '#example',data: {message: '123'}
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false  此时DOM还没渲染
Vue.nextTick(function() {vm.$el.textContent === 'new message' // true
})

Vue DOM 的更新是异步的,数据变化后,组件不会立即渲染,而是在事件队列刷新时,在下一个事件循环 tick 中渲染。

$nexttick 返回一个 Promise,可使用 await 关键词调用。

methods: {updateMessage: async function() {this.message = '已更新'console.log(this.$el.textContent) // => '未更新'await this.$nextTick()console.log(this.$el.textContent) // => '已更新'}
}

在父级组件中调用子组件的方法

有时候需要再父级组件中调用子组件的方法。可以在使用组件时指定 ref ,然后使用 ref 调用。
比如调用组件的暂停方法,使得数据变化暂停。

在组件中定义暂停方法:

<template><div><slot :textFromChild="text" name="left">奖金额度:</slot><span :id="eleId" ref="number" :class="countClass"></span><slot name="right"></slot></div>
</template>
<script>import CountUp from 'countup'export default {name: 'CountTo',data() {return {}},methods: {// TODO: 在父级组件中使用封装组件内部的方法// 在父级组件中调用该方法,实现暂停pause() {this.counter.pauseResume()}}}
</script>

在父组件中使用调用组件暂停方法。

<template><div><count-to :end-value="endValue" :decimals="decimals" :duration="5" ref="countTo"><!-- 指定 ref --><template #left="{textFromChild}"><span :style="{color:textFromChild.color}">{{textFromChild.name}}:</span></template><span slot="right"></span></count-to><button @click="pasue">暂停</button></div>
</template>
<script>import CountTo from '_c/count-to'export default {name: 'count_to',components: {CountTo},data() {return {endValue: 4000,decimals: 2}},methods: {pasue() {// 使用 refs 访问组件,然后调用器方法this.$refs.countTo.pause()}}}
</script>

样式

组件使用样式,用三种方式:

  • 外部样式;
  • 内部样式;
  • 通过 props 传入 类名,以指定使用内部样式中的哪个类名。

外部样式两种方法引入:
script 标签中引入和在 style 标签中引入。

<template><div><slot :textFromChild="text" name="left">奖金额度:</slot><!-- 将 props 中的类绑定到 class 上 --><span :id="eleId" ref="number" :class="countClass"></span><slot name="right"></slot></div>
</template>
<script>// 引入样式方法一:// import './count-to.css'import CountUp from 'countup'export default {name: 'CountTo',inheritAttrs: true, // 不让父作用域的属性挂载到组件的根元素上props: {/*** @description  自定义样式类名*/className: {type: String,default: ''}}}
</script>
<style lang="css">/* 引入样式方法二 *//* @import './count-to.css' *//*  内部样式 */.count-to-number {color: red;font-size: 30px;}
</style>

通过 props 传递类名,实际是在父级组件中指定使用内部样式中的哪个类。

通过 style 也可以应用样式到组件上。

是否添加 scoped?

加了scoped,vue 会给每个选择器添加一个data 属性,用来提高选择器的特殊性,达到防止样式冲突的目的。

项目中的业务组件,建议添加 scoped,防止样式冲突。封装通用的组件,建议不加,方便使用者从外部制定样式。

总结

封装一个组件 props 和 data 决定了组件的核心功能,插槽用于向组件传递 html 标签,使得组件更加具有扩展性。通过事件我们可以对组件进行某些操作。改天分析一个第三方组件,好好体会一下这些概念。

参考

  • 详解 vue 组件三大核心概念
  • 简单理解 Vue 中的 nextTick
  • vue.nextTick 的原理和用途
  • nextTick
  • What the Tick is Vue.nextTick?
  • vue 文档 Prop

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

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

相关文章

11.Spring AOP

文章目录 1.什么是 Spring AOP&#xff1f;2.为什要用 AOP&#xff1f;3.Spring AOP 应该怎么学习呢&#xff1f;3.1 AOP 组成3.1.1 切⾯&#xff08;Aspect&#xff09; 切点 通知3.1.2 连接点&#xff08;Join Point&#xff09;3.1.3 切点&#xff08;Pointcut&#xff09;…

《python程序语言设计》2018版第5章第46题均值和标准方差-下部(本来想和大家说抱歉,但成功了)

接上回&#xff0c;5.46题如何的标准方差 本来想和大家说非常抱歉各位同学们。我没有找到通过一个循环完成两个结果的代码。 但我逐步往下的写&#xff0c;我终于成功了&#xff01;&#xff01; 这是我大前天在单位找到的公式里。x上面带一横是平均值。 我不能用函数的办法…

数据处理之图像压缩

简介 图像压缩是很多应用场景中非常重要的技术,主要有以下几个原因: 减小文件大小 原始的图像文件通常非常大,尤其是高分辨率或者 RAW 格式的图片。压缩图像可以显著减小文件大小,有利于存储和传输。 节省存储空间 在许多应用中,需要存储大量的图像数据,如相册、电子商务平…

腾讯医疗大模型,不止大模型

“千呼万唤始出来&#xff0c;腾讯健康终于祭出医疗大模型。但或许这只是新故事的开始。下一步通过应用场景的打磨&#xff0c;全面嵌入生态合作伙伴&#xff0c;才能让医疗行业加速全面拥抱「数智化」工具。 在今年几乎所有企业都卷入AI大模型这场豪赌时&#xff0c;腾讯健康…

苹果智能:iOS 18 AI增强功能

苹果计划在 2024 年 WWDC 上推出一项名为“Apple Intelligence”的重大 AI 举措&#xff0c;将 AI 功能深度整合到其操作系统和核心应用程序中&#xff0c;同时优先考虑用户的隐私和安全。 该计划的名称是“Apple Intelligence”&#xff0c;这个名字很有市场价值。名字很简单…

Pod之间的通信详解

在Kubernetes集群中&#xff0c;Pod之间的通信是非常核心的功能。Pod是Kubernetes中的最小部署单元&#xff0c;它们之间经常需要进行通信以完成各种任务。本文将深入探讨Pod之间的通信方式&#xff0c;并通过示例代码来进一步解释。 目录 第一章. Pod间通信的实现原理 第二章…

C++做题

我们可以将0——9看成一个一维数组&#xff1a;a[11] #include<cstdio> int a[11],n; int x,p; int main(){scanf("%d",&n);for(int i1;i<n;i){pi;while(p!0){xp%10;a[x];//让下标x每次出现时增加1(描述不清楚)p/10;}}for(int i0;i<9;i){printf(&qu…

Flink学习-时间语义

含义 事件时间&#xff1a;数据产生的时间 处理时间&#xff1a;数据的处理时刻 水位线 用来衡量事件时间进展的标记&#xff0c;就被称作『水位线』&#xff0c;水位线可以看作是一条特殊的数据记录&#xff0c;是插入到数据流中的一个标记点&#xff0c;主要内容是个时间戳…

IO多路复用详解

1. 概念 IO多路复用也称IO多路转接&#xff0c;它是一种网络通信的手段&#xff08;机制&#xff09;&#xff0c;通过这种方式可以同时监测多个文件描述符并且这个过程是阻塞的&#xff0c;一旦检测到有文件描述符就绪&#xff08; 可以读数据或者可以写数据&#xff09;程序的…

Oracle基本操作

操作 DDL(Data Definition Language 数据定义语言)用于操作对象和对象的属性,这种对象包括数据库本身,以及数据库对象,像:表、视图等等,DDL 对这些对象和属性的管理和定义具体表现在 create、drop 和 alter 上。 create 可以创建数据库和数据库的一些对象 drop …

TypeScript看这篇就够了

TypeScript 技术文档 目录 TypeScript 技术文档1. 简介2. 安装与配置3. 基本类型3.1 布尔值3.2 数字3.3 字符串3.4 数组3.5 元组3.6 枚举3.7 Any3.8 Void3.9 Null 和 Undefined3.10 Never3.11 Object 4. 接口4.1 简单示例4.2 可选属性4.3 只读属性4.4 函数类型4.5 可索引类型 5…

轻NAS玩客云使用Docker部署小雅并挂载到AList详细流程分享

文章目录 前言1. 本地部署AList2. AList挂载网盘3. 部署小雅alist3.1 Token获取3.2 部署小雅3.3 挂载小雅alist到AList中 4. Cpolar内网穿透安装5. 创建公网地址6. 配置固定公网地址 前言 本文主要介绍如何在安装了CasaOS的玩客云主机中部署小雅AList&#xff0c;并在AList中挂…

C语言基础学习之位运算

枚举类型 enum 枚举名 { 枚举常量 //名字 }; 注意: 1.c语言中 对于枚举类型 实际上是 当作整型处理的 2.提高代码可读性&#xff0c; 写成枚举&#xff0c;可以做语法检查 3.枚举常量&#xff0c;之间用逗号隔开 4.枚举常量&#xff0c;可以给初值&#xff0c;给了初值之后&…

新电脑必装的7款软件,缺一不可

如果你买了新电脑或者是重装了新系统&#xff0c;那么这7款软件你一定要安装。 1、SpaceSniffer 如果你的C盘经常爆红&#xff0c;但是不知道是什么原因&#xff0c;那么你应该需要SpaceSniffer这款软件&#xff0c;它可以把你C盘中文件的空间占用情况&#xff0c;以大小方框…

当我拿到百度文心智能体大赛top1后,我又开发了...

目录 一、写在前面 二、代码助手 三、关于智能体 四、写在后面 一、写在前面 在不久前结束的文心智能体大赛&#xff08;第一期&#xff09;中&#xff0c;我有幸凭借一款名为恋爱助手的智能体斩获了大赛的桂冠。这个成绩&#xff0c;既是对我努力的认可&#xff0c;也是对…

Qt中图表图形绘制类介绍

接上篇介绍QChart 相关的类&#xff0c;本片主要在QChart 载体上进行图表图形绘制使用各种形状的图类。 一.QXYSeries类 QXYSeries类是QLineSeries折线图&#xff0c;QSplineSeries样条曲线图&#xff0c;QScatterSeries散点图的基类&#xff1b; QXYSeries类的使用都可以参考…

人工智能_机器学习096_PCA主成分分析降维算法_PCA降维原理_介绍和使用_模式识别_EVD特征值分解_SVD奇异值分解---人工智能工作笔记0221

首先我来看PCA降维,可以看到在图像处理中经常用到PCA,经过对数据进行降维可以去除数据噪声,发现数据中的模式,也就是 发现数据的规律. 这里的模式识别就是 机器学习中的一个分支 就是在数据中找规律的意思 我们使用代码看一下 from sklearn.docomposition import PCA from skl…

ecursionError: maximum recursion depth exceeded while calling a Python object

在 Python 中&#xff0c;RecursionError: maximum recursion depth exceeded 错误通常发生在一个函数递归调用自身太多次&#xff0c;超出了 Python 默认的递归深度限制时。Python 默认的递归深度限制是比较低的&#xff0c;以避免无限递归导致的栈溢出。 在你的代码中&#…

考虑风光场景生成的电动汽车并网优化调度【遗传算法】【IEEE33】

目录 主要内容 部分代码 部分结果 下载链接 主要内容 程序主要内容是考虑风光场景生成的电动汽车并网优化调度&#xff0c;采用的方法如下所述&#xff1a; ①采用蒙特卡洛方法&#xff0c;结合copula函数以及fuzzy-kmeans&#xff0c;获取6个典型风光出力场景&…

Linux C语言:输入输出(printf scanf)

一、数据输出 1、C语言I/O操作由函数实现 #include <stdio.h> 2、字符输出函数 格式: int putchar( int c ) 参数: c为字符常量、变量或表达式 功能&#xff1a;把字符c输出到显示器上 返值&#xff1a;putchar函数的返回值是参数的ASCLL码值&#xff1b; #inclu…