杭州房产免费网站建设,网站的建立,昆明网站建设猫咪,做网站维护需要懂什么前言#xff1a;在前端项目中#xff0c;实际上#xff0c;会用到组件库里的很多组件#xff0c;本博客主要介绍Element、vxe-table这两个组件如何使用。 目录
Element
引入element
使用组件的步骤
使用对话框的示例代码
效果展示
vxe-table
引入vxe-table
成果展… 前言在前端项目中实际上会用到组件库里的很多组件本博客主要介绍Element、vxe-table这两个组件如何使用。 目录
Element
引入element
使用组件的步骤
使用对话框的示例代码
效果展示
vxe-table
引入vxe-table
成果展示
总结 Element
官网地址
Button 按钮 | Element Plus (element-plus.org)
引入element
在main.ts文件中引入element组件库
import ElementPlus from element-plus
import element-plus/dist/index.css
import zhCn from element-plus/es/locale/lang/zh-cn
createApp(App).use(ElementPlus,{locale:zhCn}).mount(#app)
使用组件的步骤
选用组件查看代码查看API使用代码替换值
使用对话框的示例代码
templateel-button text clickisShow true 测试按钮 /el-buttonel-dialog v-modelisShow title对话框 width30% :before-closeisShowspanMrjj测试/spantemplate #footerspan classdialog-footerel-button clickisShow false取消/el-buttonel-button typeprimary clickisShow false 确定 /el-button/span/template/el-dialog
/templatescript setup
import { ref } from vue
let isShow ref(false)
/scriptstyle langscss scoped
/style
效果展示 vxe-table
官网地址
vxe-table v4 (vxetable.cn)
引入vxe-table
与Element组件库一样首先需要在main.ts文件中引入vxe-table组件库
import VXETable from vxe-table;
import vxe-table/lib/style.css
createApp(App).use(VXETable).mount(#app);
与上面使用Element组件库里的组件一样找到想用的组件拿到代码模板后在模板里修改填值此处不再赘述。
成果展示 总结 前端基础学到这个阶段已经可以尝试自己去做一些小的需求了组件库的使用非常方便在使用组件库方面要多加练习写一个form表单练习添加、修改、删除等功能还可以进行多方面的扩展感兴趣的可以深入学习多加练习
