Vue.js 3从入门到实战（微课视频版） 思政课件 陈恒 清华 第12章 Vue UI组件库_第1页
Vue.js 3从入门到实战（微课视频版） 思政课件 陈恒 清华 第12章 Vue UI组件库_第2页
Vue.js 3从入门到实战（微课视频版） 思政课件 陈恒 清华 第12章 Vue UI组件库_第3页
Vue.js 3从入门到实战（微课视频版） 思政课件 陈恒 清华 第12章 Vue UI组件库_第4页
Vue.js 3从入门到实战（微课视频版） 思政课件 陈恒 清华 第12章 Vue UI组件库_第5页
已阅读5页，还剩49页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Vue.js3从入门到实战（微课视频版）第12章VueUI组件库学习目的与要求本章主要讲解Vue3中的setup语法糖以及常用的VueUI组件库的特点和类别。通过本章的学习，能够掌握setup语法糖、ElementPlus、ViewUIPlus、Vant等UI组件库的使用方法。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录12.1setup语法糖12.2ElementPlus12.3ViewUIPlus12.4VantUI12.5其他UI组件库《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.1setup语法糖使用setup语法糖时，组件只需引入不需注册，属性和方法不需return返回，不用再写setup函数，也不用写exportdefault默认输出。setup语法糖，是在单文件组件中使用组合式API的编译时语法糖。相比于普通的<script>语法，它具有更多优势：1．更少的template内容，更简洁的代码；2．能够使用纯Typescript

声明props

和抛出事件；3．更好的运行时性能；4．更好的IDE

类型推断性能。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.1.1属性与方法的绑定使用setup语法糖时，属性与方法不需要return

返回暴露出来，可以直接在template中使用。【例12-1】使用setup语法糖时如何进行属性与方法的绑定。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.1.2路由可以使用this.$router.push进行编程式导航，但使用setup语法糖时并没有this，如何进行编程式导航呢？具体做法如下：首先，使用import语句引入useRouter，即import{useRouter}from'vue-router'；然后，使用useRouter创建路由对象，即constrouter=useRouter()；最后，使用路由对象router进行编程式导航。《Vue.js3从入门到实战》陈恒主编，清华大学出版社【例12-2】使用setup语法糖时如何进行编程式导航。该实例在【例12-1】基础上完成。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.1.3组件传值在子组件中，defineProps用来接收父组件传来的props；defineEmits用来声明触发的事件；defineExpose用来导出数据，暴露于父组件（在父组件中通过ref='xxx’的方法来获取子组件实例）。《Vue.js3从入门到实战》陈恒主编，清华大学出版社【例12-3】defineProps、defineEmits、defineExpose等API在组件传值中的具体应用。该实例在【例12-2】基础上完成。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录12.1setup语法糖12.2ElementPlus12.3ViewUIPlus12.4VantUI12.5其他UI组件库《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.2ElementPlusElementPlus是一套为开发者、设计师和产品经理准备的基于Vue3的组件库，提供了配套设计资源，简化了常用组件的封装，大大降低了开发难度，帮助使用者的网站快速成型。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.2.1ElementPlus安装1．使用包管理器npminstallelement-plus–save2．浏览器直接引入使用unpkg供应商的安装示例，具体如下。<head><!--导入样式--><linkrel="stylesheet"href="/element-plus/dist/index.css"/><!--导入Vue3--><scriptsrc="/vue@next"></script><!--导入组件库--><scriptsrc="/element-plus"></script></head>《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.2.2ElementPlus组件介绍ElementPlus组件主要包括Basic（基础）、Form（表单）、Data（数据展示）、Navigation（导航）、Feedback（反馈）等五大类组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社1．Basic基础组件Basic

基础类组件包括Button（按钮）、Border（边框）、Color（色彩）、Container（布局容器）、Icon（图标）、Layout（布局）、Link（链接）、Scrollbar（滚动条）、Space（间距）、Typography（排版）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社2．Form表单组件Form

表单类组件包括Cascader（级联选择器）、Checkbox（多选框）、ColorPicker（颜色选择器）、DatePicker（日期选择器）、DateTimePicker（日期时间选择器）、Form（表单）、Input（输入框）、InputNumber（数字输入框）、Radio（单选框）、Rate（评分）、Select（选择器）、SelectV2（虚拟列表选择器）、Slider（滑块）、Switch（开关）、TimePicker（时间选择器）、TimeSelect（时间选择）、Transfer（穿梭框）、Upload（上传）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社3．Data数据展示组件Data

数据展示类组件包括Avatar（头像）、Badge（徽章）、Calendar（日历）、Card（卡片）、Carousel（走马灯）、Collapse（折叠面板）、Descriptions（描述列表）、Empty（空状态）、Image（图片）、InfiniteScroll（无限滚动）、Pagination（分页）、Progress（进度条）、Result（结果）、Skeleton（骨架屏）、Table（表格）、VirtualizedTable（虚拟化表格）、Tag（标签）、Timeline（时间线）、Tree（树形控件）、TreeSelect（树形选择）、TreeV2（虚拟化树形控件）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社4．Navigation导航组件Navigation

导航类组件包括Affix（固钉）、Backtop（回到顶部）、Breadcrumb（面包屑）、Dropdown（下拉菜单）、Menu（菜单）、PageHeader（页头）、Steps（步骤条）、Tabs（标签页）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社5．Feedback反馈组件Feedback

反馈类组件包括Alert（提示）、Dialog（对话框）、Drawer（抽屉）、Loading（加载）、Message（消息提示）、MessageBox（消息弹框）、Notification（通知）、Popconfirm（气泡确认框）、Popover（气泡卡片）、Tooltip（文字提示）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.2.3ElementPlus组件应用ElementPlus提供了一套常用的图标集合，但这些图标还没有默认在组件中，需要另外安装才能使用图标，安装方式与ElementPlus的安装方式相同。通过浏览器直接引入ElementPlus的icons-vue（如：<scriptsrc="///@element-plus/icons-vue"></script>），然后就可以使用全局变量ElementPlusIconsVue。使用VSCode打开使用VueCLI搭建Vue.js项目，并进入Terminal终端，依次执行“npminstallelement-plus--save”和“npminstall@element-plus/icons-vue”命令，进行ElementPlus和@element-plus/icons-vue的安装。《Vue.js3从入门到实战》陈恒主编，清华大学出版社【例12-4】参考官方示例，可以很容易地通过

CDN

的方式使用ElementPlus的Button（按钮）和Icon（图标）组件。【例12-5】在使用VueCLI搭建的Vue.js项目中，应用ElementPlus组件实现【例12-4】的功能。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.2.4按需引入ElementPlus推荐开发者使用额外的插件unplugin-vue-components

和unplugin-auto-import来自动引入要使用的组件。在【例12-5】的基础上，讲解如何自动按需引入要使用的ElementPlus组件。（1）打开项目的Terminal终端，执行“npminstall-Dunplugin-vue-componentsunplugin-auto-import”命令，安装unplugin-vue-components和unplugin-auto-import插件。（2）打开项目的配置文件vue.config.js，并配置unplugin-vue-components

和unplugin-auto-import插件。（3）修改main.js文件，去除完整引入。《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录12.1setup语法糖12.2ElementPlus12.3ViewUIPlus12.4VantUI12.5其他UI组件库《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.3ViewUIPlusViewUIPlus是ViewDesign设计体系中基于Vue.js3

的一套UI组件库，主要用于企业级中后台系统。ViewUIPlus提供了超过80

个常用底层组件（如Button、Input、DatePicker等）及业务组件（如City、Auth、Login

等），详细文档可以查阅官方网站/。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.3.1ViewUIPlus安装1．使用包管理器npminstallview-ui-plus–save2．浏览器直接引入<!--importVue.js--><scriptsrc="/vue@next"></script><!--importstylesheet--><linkrel="stylesheet"href="/view-ui-plus/dist/styles/viewuiplus.css"><!--importViewUIPlus--><scriptsrc="/view-ui-plus"></script>【例12-6】使用CDN引入的方式快速应用ViewUIPlus的对话框组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.3.2ViewUIPlus组件介绍ViewUIPlus组件主要包括基础、表单、布局、导航、视图、图表、其它等七大类组件。每类又包含很多组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社1．基础组件基础类组件包括Button（按钮）、Icon（图标）、Typography（排版）、Space（间距）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社2．表单组件表单类组件包括Form（表单）、Login（登录）、Input（输入框）、Radio（单选框）、Checkbox（多选框）、Switch（开关）、Table（表格）、TablePaste（粘贴表格数据）、Select（选择器）、TreeSelect（树选择）、City（城市选择器）、AutoComplete（自动完成）、Slider（滑块）、DatePicker（日期选择器）、TimePicker（时间选择器）、Cascader（级联选择）、Transfer（穿梭框）、InputNumber（数字输入框）、Rate（评分）、Upload（上传）、TagSelect（标签选择器）、ColorPicker（颜色选择器）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社3．布局组件布局类组件包括Row/Col（栅格）、Grid（宫格）、Layout（布局）、List（列表）、Card（卡片）、Skeleton（骨架屏）、Collapse（折叠面板）、Split（面板分割）、Divider（分割线）、Cell（单元格）、DescriptionList（描述列表）、PageHeader（页头）、GlobalFooter（全局页脚）、Ellipsis（文本自动省略号）、FooterToolbar（底部工具栏）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社4．导航组件导航类组件包括Menu（导航菜单）、Tabs（标签页）、Dropdown（下拉菜单）、Page（分页）、Breadcrumb（面包屑）、Badge（徽标数）、Anchor（锚点）、Steps（步骤条）、LoadingBar（加载进度条）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社5．视图组件视图类组件包括Alert（警告提示）、Message（全局提示）、Notice（通知提醒）、Modal（对话框）、Drawer（抽屉）、Image（图片）、Notification（通知菜单）、Calendar（日历）、Tree（树形控件）、Tooltip（文字提示）、Poptip（气泡提示）、Progress（进度条）、Result（处理结果）、Exception（异常）、Avatar（头像）、AvatarList（头像列表）、Tag（标签）、Carousel（走马灯）、Timeline（时间轴）、Time（相对时间）、Trend（趋势标记）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社图表及其它组件6．图表组件图表类组件包括Circle（进度环）组件。7．其它组件其它类组件包括Affix（图钉）、BackTop（返回顶部）、Spin（加载中）、Scroll（无限滚动）、Auth（鉴权）、CountDown（倒计时）、CountUp（数字动画）、Numeral（数字格式化）、NumberInfo（数据文本）、WordCount（字数统计）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.3.3ViewUIPlus组件应用【例12-7】在使用VueCLI搭建的Vue.js项目中，应用ViewUIPlus组件实现Tree树形控件的功能。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.3.4按需引入ViewUIPlus推荐开发者借助插件babel-plugin-import实现按需加载ViewUIPlus组件，减少打包文件体积。在【例12-7】的基础上，讲解如何使用插件babel-plugin-import按需引入要使用的ViewUIPlus组件。1．安装插件打开项目的Terminal终端，执行“npminstallbabel-plugin-import--save-dev”命令，安装babel-plugin-import插件。2．配置插件打开项目的配置文件babel.config.js，并配置babel-plugin-import插件3．修改main.js文件，按需引入《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录12.1setup语法糖12.2ElementPlus12.3ViewUIPlus12.4VantUI12.5其他UI组件库《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.4VantUIVant是一个轻量、可靠的移动端组件库，于2017

年开源。目前Vant官方提供了Vue2版本、Vue3

版本和微信小程序版本，并由社区团队维护React

版本和支付宝小程序版本。详细文档可以查阅官方网站https://vant-contrib.gitee.io/vant/。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.4.1VantUI安装1．使用包管理器npmivant2．浏览器直接引入<!--引入样式文件--><linkrel="stylesheet"href="/vant/lib/index.css"/><!--引入Vue和Vant的JS文件--><scripttype="text/javascript"src="/vue@next"></script><scripttype="text/javascript"src="/vant"></script>【例12-8】使用CDN引入的方式快速应用VantUI的自定义按钮滑块组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.4.2VantUI组件介绍VantUI组件主要包括基础、表单、反馈、展示、导航、业务等六大类组件。每类又包含很多组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社1．基础类组件基础类组件包括Button（按钮）、Cell（单元格）、ConfigProvider（全局配置）、Icon（图标）、Image（图片）、Layout（布局）、Popup（弹出层）、Style（内置样式）、Toast（轻提示）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社2．表单类组件表单类组件包括Calendar（日历）、Cascader（级联选择）、Checkbox（复选框）、DatetimePicker（时间选择）、Field（输入框）、Form（表单）、NumberKeyboard（数字键盘）、PasswordInput（密码输入框）、Picker（选择器）、Radio（单选框）、Rate（评分）、Search（搜索）、Slider（滑块）、Stepper（步进器）、Switch（开关）、Uploader（文件上传）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社3．反馈类组件反馈类组件包括ActionSheet（动作面板）、Dialog（弹出框）、DropdownMenu（下拉菜单）、Loading（加载）、Notify（消息提示）、Overlay（遮罩层）、PullRefresh（下拉刷新）、ShareSheet（分享面板）、SwipeCell（滑动单元格）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社4．展示类组件展示类组件包括Badge（徽标）、Circle（环形进度条）、Collapse（折叠面板）、CountDown（倒计时）、Divider（分割线）、Empty（空状态）、ImagePreview（图片预览）、Lazyload（懒加载）、List（列表）、NoticeBar（通知栏）、Popover（气泡弹出框）、Progress（进度条）、Skeleton（骨架屏）、Steps（步骤条）、Sticky（粘性布局）、Swipe（轮播）、Tag（标签）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社5．导航类组件导航类组件包括ActionBar（动作栏）、Grid（宫格）、IndexBar（索引栏）、NavBar（导航栏）、Pagination（分页）、Sidebar（侧边导航）、Tab（标签页）、Tabbar（标签栏）、TreeSelect（分类选择）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社6．业务类组件业务类组件包括AddressEdit（地址编辑）、AddressList（地址列表）、Area（省市区选择）、Card（卡片）、ContactCard（联系人卡片）、ContactEdit（联系人编辑）、ContactEdit（联系人编辑）、Coupon（优惠券选择器）、SubmitBar（提交订单栏）等组件。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.4.3VantUI组件应用【例12-9】在使用VueCLI搭建的Vue.js项目中，应用VantUI组件实现日期区间选择的功能。《Vue.js3从入门到实战》陈恒主编，清华大学出版社12.4.4按需引入VantUI推荐开发者借助插件unplugin-vue-components实现按需加载VantUI组件，减少打包文件体积。1．安装插件打开项目的Terminal终端，执行“npmiunplugin-vue-components-D”命令，安装unplugin-vue-components插件。2．配置插件打开项目的配置文件vue.config.js，配置unplugin-vue-components插件3．修改main.js文件，按需引入《Vue.js3从入门到实战》陈恒主编，清华大学出版社目录12.1setup语法糖12.2ElementPlus12.3ViewUIPlus12.4VantUI12.5其他UI组件库《Vue.js3从入门到实战》陈恒主编，清华大学出版社1．AntDesignVueAntDesignVue是使用Vue实现的遵循AntDesign设计规范的高质量UI

组件库，用于开发和服务于企业级中后台产品，具有如下特性。 提炼自企业级中后台产品的交互语言和视觉风格； 开箱即用的高质量Vue组件； 共享AntDesignofReact设计工具体系。详细的学习文档，请参见官方网站/。《Vue.js3从入门到实战》陈恒主编，清华大学出版社2．BootStrapVueBootstrapVue是基于Vue和最受欢迎的CSS

前端框架Bootstrapv4实现的。采用BootstrapVue可构建响应式、移动优先和ARIA（AccessibleRichInternetApplication，可访问的富媒体应用，即无障碍友好应用）项目。BootstrapVue拥有40多个可用插件和80多个自定义UI组件、指令以及300

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论