第四十三天

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