第四十三天

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

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

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

相关文章

【JVM】JVM执行流程 JVM类加载 垃圾回收机制等

目录 &#x1f337;1、JVM是什么&#xff1f; &#x1f337;2、JVM的执行流程&#xff08;能够描述数据区5部分&#xff09; &#x1f337;3、JVM类加载过程 &#x1f337;4、双亲委派机制&#xff1a;描述类加载的过程 问题1&#xff1a;类加载器 问题2&#xff1a;什么…

Ubuntu Linux中hostname`命令

当然&#xff0c;让我们将关于在Ubuntu Linux中理解hostname的知识转化为列表形式&#xff1a; 参考&#xff1a; https://www.howtouseubuntu.com/network/change-hostname-in-ubuntu-linux/ 定义&#xff1a;hostname是Ubuntu&#xff08;以及其他Linux发行版&#xff09;中…

最优贸易(记忆化搜索)

题目链接&#xff1a;[NOIP2009 提高组] 最优贸易 - 洛谷 思路&#xff1a;这道题的标签是SPFA&#xff0c;但是我觉得这道题可以用记忆化搜索&#xff0c;用两组dfs&#xff0c;将从1到 i点道路上的最小值都存进min数组&#xff0c;将i 到n点的最大值存进max组&#xff0c;最后…

支付宝原生小程序组件与父级传递数据(微信小程序基本一样)

1. 声明组件 在对应的目录下,右击点击 新建小程序,之后会生成对应的文件 2. 子组件 Component({data: {colorList: [#165FF6, #3D16F6,

一元多项式的表示及相加

实现思路&#xff1a; 通过链表实现&#xff0c;会更为简单直观。用链表中的每个结点表示多项式中的每一项&#xff0c;多项式每一项都是由数据域&#xff08;包含系数和指数&#xff09;和指针域构成的&#xff0c;所以在定义表示结点的结构体时&#xff0c;可如下所示进行定义…

FFMPEG android mac 编译 支持DASH/OPENSSL问题汇总

一 下载源码 FFMPEG https://github.com/FFmpeg/FFmpeg/tree/release/4.3 二 编写脚本 支持https 就必须添加open SSL 的编译 具体可以查看我的另一个关于open SSL 的 然后我们配置的一些路径 涉及 ndk 的一定要查看你用的ndk 版本 是否存在这些路径这是第一步 然后如果支…

python爬虫入门

基础回顾 使用函数, 先导入, 直接点方法名使用 import math m math.log10(100) print(m)python 交互模式 input输入示例 age int(input("请输入年龄")) age 1 print(age)if else 的使用 和java一样, 只是不加括号, else if 阉割成了 elif 与或非 java : &am…

网络中的一些概念对比

HTTP与HTTPS 从安全性和效率性进行阐述&#xff1a; 对于HTTP HTTP默认端口是80 HTTP是明文传输&#xff0c;数据以纯文本、明文形式在网络上传输&#xff0c;容易受到黑客的攻击和数据窃取。 对于HTTPS HTTPS默认端口是443 HTTPS用的是SSL或者TLS协议对数据进行加密&am…

No3: 学习过程中故障成长积累

文章目录 故障积累1、编码错误导致 故障积累1、编码错误导致

5.2 Bootstrap 过渡效果(Transition)插件

文章目录 Bootstrap 过渡效果&#xff08;Transition&#xff09;插件使用案例 Bootstrap 过渡效果&#xff08;Transition&#xff09;插件 过渡效果&#xff08;Transition&#xff09;插件提供了简单的过渡效果。 注意&#xff1a;如果您想要单独引用该插件的功能&#xff0…

Typescript:类的装饰器

装饰器 装饰器为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式 装饰器是一种特殊类型的声明&#xff0c;它能够被附加到类声明&#xff0c;方法&#xff0c; 访问符&#xff0c;属性或参数上。 装饰器使用 expression这种形式&#xff0c;expression求值后必…

【ACM】—蓝桥杯大一暑期集训Day5

&#x1f680;欢迎来到本文&#x1f680; &#x1f349;个人简介&#xff1a;陈童学哦&#xff0c;目前正在学习C/C、Java、算法等方向&#xff0c;一个正在慢慢前行的普通人。 &#x1f3c0;系列专栏&#xff1a;陈童学的日记 &#x1f4a1;其他专栏&#xff1a;CSTL&#xff…

Qt6 Qt Quick UI原型学习QML第五篇

文章目录 效果QML语法父文件 MyQML.qmlQML语法子文件 TLineEditV1.qmlQML语法子文件 TTextEdit.qml 效果 QML语法父文件 MyQML.qml import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12Window {id: windowvisible: truewidth: 600height: 600title:…

Linux系统进程概念详解

这里写目录标题 冯诺依曼体系结构操作系统(Operator System)1.概念2.目的3.管理4.系统调用和库函数概念 进程1.概念2.描述进程-PCB3.查看进程4.通过系统调用获取进程标示符5.通过系统调用创建进程-fork 进程状态1.Linux内核源代码2.进程状态查看 进程优先级1.基本概念2.查看系统…

投个 3D 冰壶,上班玩一玩

本篇文章将介绍如何使用物理引擎和图扑 3D 可视化技术来呈现冰壶运动的模拟。 Oimo.js 物理引擎 Oimo.js 是一个轻量级的物理引擎&#xff0c;它使用 JavaScript 语言编写&#xff0c;并且基于 OimoPhysics 引擎进行了改进和优化。Oimo.js 核心库只有 150K &#xff0c;专门用…

交易流水指标统计——pandas

1、根据交易流水&#xff0c;计算每个交易交易对象的如下指标&#xff0c; 总收入笔数、总收入月数、最大月收入笔数、最大月收入笔数所在日期&#xff08;年月日格式&#xff09; import pandas as pd path r"C:\Users\xxx\Desktop\科技数据.xlsx"df pd.read_exc…

5G的发展过程

目录 1.什么是5G 2.5G与4G的区别 3.5G的应用领域 4.5G给人类带来的福利 5.5G未来的发展趋势 1.什么是5G 5G技术是第五代移动通信技术&#xff0c;它是对之前的2G、3G和4G技术的升级和革新。5G技术具有更高的数据传输速度、更低的延迟和更大的网络容量&#xff0c;为人们提供…

Java-API简析_java.net.InetSocketAddress类(基于 Latest JDK)(浅析源码)

【版权声明】未经博主同意&#xff0c;谢绝转载&#xff01;&#xff08;请尊重原创&#xff0c;博主保留追究权&#xff09; https://blog.csdn.net/m0_69908381/article/details/131870760 出自【进步*于辰的博客】 因为我发现目前&#xff0c;我对Java-API的学习意识比较薄弱…

GAMES104复习总结,课堂提炼(一)

主要是给自己看的&#xff0c;Games104课程很全面&#xff0c;王希老师学识广播&#xff0c;课程组也很认真努力。但是在文字版里面有大量的示例&#xff0c;比如可能会为了引入话题讲个故事等等。。。对于上课来说引人入胜&#xff0c;对于要找工作的我来说&#xff0c;每次看…

办公软件ppt的制作

毕业找工作太难了&#xff0c;赶紧多学点什么东西吧&#xff0c;今天开始办公软件ppt的制作学习。 本文以WPS作为默认办公软件&#xff0c;问为什么不是PowerPoint&#xff0c;问就是没钱买不起&#xff0c;绝对不是不会破解的原因。 一.认识软件 在快捷工具栏中顾名思义就是一…