第四十三天

●<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,表单的元素就不会提交。如果该函数返回其他值或什么都没有返回,则表单会被提交。

相关推荐
@月落25 分钟前
alibaba获得店铺的所有商品 API接口
java·大数据·数据库·人工智能·学习
6230_36 分钟前
git使用“保姆级”教程1——简介及配置项设置
前端·git·学习·html·web3·学习方法·改行学it
李小星同志2 小时前
高级算法设计与分析 学习笔记6 B树
笔记·学习
霜晨月c2 小时前
MFC 使用细节
笔记·学习·mfc
小江湖19943 小时前
元数据保护者,Caesium压缩不丢重要信息
运维·学习·软件需求·改行学it
dot.Net安全矩阵3 小时前
.NET内网实战:通过命令行解密Web.config
前端·学习·安全·web安全·矩阵·.net
微刻时光4 小时前
Redis集群知识及实战
数据库·redis·笔记·学习·程序人生·缓存
潮汐退涨月冷风霜6 小时前
机器学习之非监督学习(四)K-means 聚类算法
学习·算法·机器学习
GoppViper6 小时前
golang学习笔记29——golang 中如何将 GitHub 最新提交的版本设置为 v1.0.0
笔记·git·后端·学习·golang·github·源代码管理
羊小猪~~6 小时前
深度学习基础案例5--VGG16人脸识别(体验学习的痛苦与乐趣)
人工智能·python·深度学习·学习·算法·机器学习·cnn