第四十三天

●<template>:每个vue文件中最多可以包含一个,语块包裹的内容内容会被提取,编译成js渲染函数,并附在导出的组件上作为其render选项。

●<script>​:每个 vue 文件最多可以包含一个 script>块(使用 <script setup> 的情况除外),这个脚本代码块将作为 ES 模块执行。默认导出是 Vue 的组件选项对象,可以是一个对象字面量或是 defineComponent 函数的返回值。

●<el-dialog>基本用法:弹出一个对话框,需要设置visible属性(弹框的显示隐藏,为true时显示dialog);里面的title属性用于定义标题,可选,默认值为空;befoer-close:仅当用户通过点击关闭图标或遮罩关闭dialog时起效;show-close:是否显示关闭按钮。

自定义内容:dialog内容任意(也可以是表格或者表单)

嵌套dialog(不建议使用),如果需要的话,要使用append-to-body属性

居中:将center设置为true(标题和底部居中),仅影响标题和底部区域。

●el-form:由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据。

典型表单:包括各种表单项(输入框、选择器、开关、单选框、多选框等)。当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在 <el-form> 标签上添加 @submit.native.prevent。

行内表单:当垂直方向空间受限且表单较简单时,可以在一行内放置表单;设置 inline 属性可以让表单域变为行内的表单域。

对齐方式:通过设置 label-position 属性可以改变表单域标签的位置,可选值为 top、left,当设为 top 时标签会置于表单域的顶部。

表单验证:防止犯错的前提下,更早的发现并纠正错误。通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

数字类型验证:需要在 v-model 处加上 .number 的修饰符(是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符)。嵌套在 el-form-item 中的 el-form-item 标签宽度默认为零,不会继承 el-form 的 label-width。如需要可单独设置 label-width 属性。

表单内组件尺寸控制:通过设置 size 属性可以使该表单内所有可调节大小的组件继承该尺寸(Form-Item 也具有该属性)

●Input 输入框

受控组件,会显示 Vue 绑定值。不支持 v-model 修饰符。

禁用状态:输入框无法输入内容,通过 disabled 属性指定是否禁用。

可清空:一个可清空的输入框,使用clearable属性使用clearable属性。

密码框:可切换显示隐藏的密码框,使用show-password属性。

带 icon 的输入框:带有图标标记输入类型,可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。

文本域:用于输入多行文本信息,通过将 type 属性的值指定为 textarea。文本域高度可以通过 rows 属性控制。

可自适应文本高度的文本域:通过设置 autosize 属性使得文本域的高度能够根据文本内容自动进行调整, autosize 还可以设定为一个对象,指定最小行数和最大行数。

复合型输入框:可前置或后置元素,一般为标签或按钮 ,通过slot来指定前置或后置内容。

通过 size 属性指定输入框的尺寸,除了默认的大小外,还有 medium、small 和 mini 三种尺寸。

带输入建议:根据输入内容提供对应的输入建议

输入长度限制: maxlength 和 minlength 用来限制输入框的字符长度,其中字符长度是用js的字符串长度统计的。对于类型为 text 或 textarea 的输入框,在使用 maxlength 属性限制最大输入长度的同时,可通过设置 show-word-limit 属性来展示字数统计。

●el-botton:常用的操作按钮

使用type、plain(朴素按钮)、round(圆角按钮)和circle(圆圈)属性来定义 button 的样式。

禁用状态:按钮不可用状态。使用disabled属性来定义按钮是否可用。

图标按钮:带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。设置icon属性。

按钮组:以按钮组的方式出现,常用于多项类似操作。使用<el-button-group>标签来嵌套你的按钮。

加载中:点击按钮后进行数据加载操作,在按钮上显示加载状态。 设置loading属性为true。

不同尺寸:button 组件提供除了默认值以外的三种尺寸,额外的尺寸(medium、small、mini)通过设置size属性。

●export:主要用于对外输出本模块变量的接口(一个文件可以理解为一个模块)。export就是导出。

●import:就是在一个模块中加载另一个含有export接口的模块。 import就是导入。

•export default和export都能导出一个模块里面的常量,函数,文件,模块等,在其它文件或模块中通过import来导入常量,函数,文件或模块。但在一个文件或模块中,export,import可以有多个,export default却只能有一个。

• 通过export方式导出,在导入的时候需要加{}大括号,export default 就不需要{}

•export default 相当于导出当前vue组件,在其它引入当前组件时可以使用当前组件中的方法和变量。

•data使用return:Vue 实例内,单组件的data必须返回一个对象。

data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象。 通过提供 data 函数,每次创建一个新实例后,能够调用 data函数,从而返回初始数据的一个全新副本数据对象。

组件复用下,不会造成数据同时指向一处

不使用return包裹的数据会在项目的全局可见,会造成变量污染;使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。

●methods​:用于声明要混入到组件实例中的方法。

声明的方法可以直接通过组件实例访问,或者在模板语法表达式中使用。所有的方法都会将它们的 this 上下文自动绑定为组件实例,即使在传递时也如此。

在声明方法时避免使用箭头函数,它们不能通过 this 访问组件实例。

●submit():submit() 方法把表单数据提交到 Web 服务器。该方法提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用。

onsubmit:在表单提交之前调用。当用户单击了表单中的 Submit 按钮而提交一个表单时,就会调用这个事件句柄函数。

注意,当调用方法Form.submit() 时,该处理器函数不会被调用。

如果 onsubmit 句柄返回 fasle,表单的元素就不会提交。如果该函数返回其他值或什么都没有返回,则表单会被提交。

相关推荐
西岸行者4 天前
学习笔记:SKILLS 能帮助更好的vibe coding
笔记·学习
悠哉悠哉愿意4 天前
【单片机学习笔记】串口、超声波、NE555的同时使用
笔记·单片机·学习
别催小唐敲代码4 天前
嵌入式学习路线
学习
毛小茛4 天前
计算机系统概论——校验码
学习
babe小鑫4 天前
大专经济信息管理专业学习数据分析的必要性
学习·数据挖掘·数据分析
winfreedoms4 天前
ROS2知识大白话
笔记·学习·ros2
在这habit之下4 天前
Linux Virtual Server(LVS)学习总结
linux·学习·lvs
我想我不够好。4 天前
2026.2.25监控学习
学习
im_AMBER4 天前
Leetcode 127 删除有序数组中的重复项 | 删除有序数组中的重复项 II
数据结构·学习·算法·leetcode
CodeJourney_J4 天前
从“Hello World“ 开始 C++
c语言·c++·学习