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