Devtools进行调试、Vue实例与生命周期钩子、数据绑定单向与双向、计算属性与侦听器、条件渲染和列表渲染、事件处理、组件之间的传值props和$emit、动态组件和异步组件、组件间的通信provide/injectevent

bus以及探索并尝试安装一个基于Vue.js的UI框架——Element

UI的基础组件以打造美观实用的Vue应用。

无论你是Vue新手小白还是有一定基础的开发者掌握Element

一、Element

UI提供了丰富的组件包括按钮、输入框、表格、弹窗、分页等。

这些组件可以帮助我们快速搭建界面提高开发效率。

接下来我们将学习一些常用的Element

二、按钮组件ElButton

UI中非常基础且重要的组件之一它用于触发各种操作或事件。

按钮组件支持多种类型包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮等每种类型的按钮都有其特定的样式和用途。

按钮类型

按钮的类型决定了按钮的外观和默认行为。

以下是一些常用的按钮类型

主要按钮Primary默认样式通常用于主要操作。

成功按钮Success表示成功的操作如“保存”或“提交”。

信息按钮Info表示提供信息或状态如“详情”或“帮助”。

警告按钮Warning表示可能会有副作用的操作如“删除”或“取消”。

危险按钮Danger表示危险或破坏性操作如“删除”或“重置”。

templatedivel-button

typeprimary主要按钮/el-buttonel-button

typesuccess成功按钮/el-buttonel-button

typeinfo信息按钮/el-buttonel-button

typewarning警告按钮/el-buttonel-button

/template在这个例子中我们使用了不同类型的按钮包括主要按钮、成功按钮、信息按钮、警告按钮和危险按钮。

禁用状态

:disabledtrue禁用按钮/el-button/div

/template在这个例子中我们通过:disabledtrue属性禁用了一个按钮。

圆角按钮

/template在这个例子中我们通过round属性创建了一个圆角按钮。

加载状态

:loadingloading加载按钮/el-button在这个例子中按钮的加载状态通过:loadingloading绑定了一个布尔值。

按钮尺寸

sizedefault默认按钮/el-button在这个例子中按钮有三种不同的尺寸通过size属性进行设置。

图标按钮

iconel-icon-search搜索按钮/el-button在这个例子中按钮包含了一个搜索图标。

按钮组

typeprimary上一页/el-buttonel-button

/el-button-group在这个例子中两个按钮被放置在一个按钮组中通常用于实现导航或切换功能。

三、输入组件ElInput

UI中用于创建输入框的组件它常用于收集用户数据如文本、密码、数字等。

ElInput组件支持多种类型包括普通文本输入、密码输入、数字输入等并且可以通过v-model指令实现双向数据绑定。

基础用法

ElInput的基础用法非常简单只需要在模板中添加el-input标签并使用v-model指令绑定数据即可。

templatedivel-input

/script在这个例子中我们创建了一个简单的文本输入框用户可以在其中输入内容输入框的内容会实时更新到inputValue数据属性中。

ElInput支持多种类型包括

text普通文本输入。

password密码输入显示为点。

number数字输入支持数字键盘。

email电子邮件输入会自动校验邮箱格式。

urlURL输入会自动校验URL格式。

templatedivel-input

:disabledtrue/el-input在这个例子中输入框被设置为禁用状态通过:disabledtrue绑定了一个布尔值。

自动完成

autocompleteoff/el-input在这个例子中通过autocompleteoff属性禁用了浏览器的自动完成功能。

自动聚焦

autofocus/el-input在这个例子中通过autofocus属性使输入框在页面加载时自动聚焦。

文本area

typetextarea/el-input在这个例子中我们创建了一个多行文本输入框。

四、表格组件ElTable

UI中用于显示和操作表格数据的组件它提供了丰富的功能如排序、筛选、分页等非常适合展示复杂的数据列表。

基础用法

width180/el-table-columnel-table-column

propname

width180/el-table-columnel-table-column

propaddress

label地址/el-table-column/el-table/div

/templatescript

/script在这个例子中我们使用el-table和el-table-column组件创建了一个简单的表格并使用:datatableData属性绑定了表格数据。

表格操作

selection-changehandleSelectionChangeel-table-column

typeselection

width55/el-table-columnel-table-column

propdate

width180/el-table-columnel-table-column

propname

width180/el-table-columnel-table-column

propaddress

label地址/el-table-column/el-table/div

/templatescript

/script在这个例子中我们添加了一个多选列并定义了一个handleSelectionChange方法用于处理表格行的选中状态变化。

表格属性

:datatableData绑定表格的数据源。

stylewidth:

100%设置表格的宽度。

max-height200px设置表格的最大高度。

border是否显示表格边框。

列属性

prop列对应的数据字段。

label列的标题。

width列的宽度。

sortable是否启用列的排序功能。

filters列的筛选条件。

show-overflow-tooltip是否显示溢出内容的工具提示。

要启用表格的排序功能只需要在el-table-column中设置sortable属性为true。

el-table-column

sortable/el-table-column在这个例子中日期列被设置为可排序的。

表格的筛选功能通过filters属性实现它是一个对象数组每个对象定义了一个筛选条件。

el-table-column

/el-table-column在这个例子中我们创建了一个简单的筛选模板用于显示日期列的值。

要实现表格的分页功能可以使用el-pagination组件并通过:current-pagecurrentPage和:page-sizepageSize属性绑定当前页和每页条数。

templatedivel-table

--/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pagecurrentPage:page-sizes[10,

20,

jumper:total100/el-pagination/div

/templatescript

条);},handleCurrentChange(newPage)

{this.currentPage

/script在这个例子中我们结合了表格和分页组件以实现数据的分页显示。

五、弹窗组件ElDialog

UI中用于创建模态对话框的组件它允许我们在应用的顶层覆盖一个新页面显示特定的信息或表单直到用户与之交互。

弹窗组件在处理用户输入、显示详细信息或确认操作时非常有用。

基础用法

ElDialog的基础用法包括创建对话框和定义其内容。

首先你需要使用el-dialog标签包裹对话框并使用title属性设置对话框的标题。

templatedivel-button

/script在这个例子中我们使用el-dialog组件创建了一个简单的模态对话框并通过:visible.syncdialogVisible属性控制对话框的显示和隐藏。

:visible.syncdialogVisible控制对话框的显示和隐藏通常与Vue数据属性绑定。

title欢迎对话框设置对话框的标题。

width30%设置对话框的宽度。

before-close设置对话框关闭前的钩子函数。

close-on-click-modal点击模态背景是否关闭对话框。

show-close是否显示关闭按钮。

ElDialog支持插槽允许你在对话框内部自定义内容。

除了默认的插槽外还可以使用以下插槽

title自定义对话框的标题区域。

footer自定义对话框的底部操作区域。

el-dialog

title自定义对话框span自定义内容/spantemplate

v-slot:titleh2自定义标题/h2/templatetemplate

clickdialogVisible

/el-dialog在这个例子中我们自定义了对话框的标题和底部操作按钮。

六、总结

UI的基础组件包括按钮、输入框、表格、弹窗和分页等。

这些组件是构建美观实用Vue应用的关键它们不仅提供了丰富的功能还支持样式定制使得我们可以轻松打造符合需求的界面。

掌握Element

UI的基础组件对于提高Vue.js应用的开发效率非常重要。

它们不仅可以帮助我们节省时间还能确保我们的应用拥有高质量的UI。

希望这篇博客能帮助你深入理解Element

往期教学请前往作者VUE专栏下查看