Vuetify 框架

Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。

Vuetify 核心是为了提供各种可重复使用的，即插即用并且适合各种项目规格的组件。

Vue 的语义成分。利用 Vue 的功能组件，所有基于标记的用于援助主部件的类，比如一个 card 题目，可以使用 v-card-title 来处理
成型容易。Vuetify 被设想为从底层创建。每一个组件，指令和功能所有的工作都无缝结合，让你能够专注创建你的应用。
为移动设备而生。所有的 Vuetify 组件都是专为移动设备设计。应用程序可以轻松在不同的方向和屏幕尺寸间转换，兼容 web、平板电脑、手机。
预先制作的 Vue CLI 模板。Vuetify 自带 3 个 Vue 模板，随时可使用。

通过借助 Vue 和 Material Design 的强大功能，以及大量精心制作的组件库和特性，我们可以使用 Vuetify 构建优秀的应用。Vuetify 遵守 Google 的 Material Design 规范，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能，其组件具有易记忆的语义设计，可将记忆复杂的类和标记符号转换为简单且明确的名称。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aRDiscuP-1663686070636)(upload://6jSYfOr6DTMscRnv8dKnnBY7D2J.png)]

浏览器支持

浏览器名称	支持状态
Chromium（Chrome, Edge Insider）	支持
Edge	支持
Firefox	支持
Safari 10+	支持
IE11/Safari 9	需要poyfill
IE9/IE10	不支持

组件库安装

vue add vuetify

组件库使用

组件库地址：https://vuetifyjs.com/zh-Hans/components/alerts/

API 地址：https://vuetifyjs.com/zh-Hans/api/vuetify/

组件示例-数据表格

<template><v-data-tablev-model="selected":headers="headers":items="desserts":single-select="singleSelect"item-key="name"loading="true"class="elevation-1"><template v-slot:top><v-switchv-model="singleSelect"label="Single select"class="pa-3"></v-switch></template></v-data-table></template><script>export default {data() {return {singleSelect: false,selected: [],headers: [{text: "id",   // 列名称value: "id",  // 列绑定的数据名称（接口返回数据字段名称）align: 'center', // 位置，可选'left' | 'center' |'right'sortable: true, // 是否可排序width: string // 宽度},{text: "用例名称",value: "caseName",align: 'center',sortable: false},{text: "用例数据",value: "caseData",align: 'center',sortable: false}],desserts: [],}},created() {this.getList()},methods: {getList() {let post_data = {pageNum: 1,pageSize: 10}this.$api.cases.GetList(post_data).then(res => {this.desserts = res.data.data.data})}}}</script>

属性列表

属性名称	说明	数据类型	默认值
:single-select	将选择模式更改为单选	boolean	false
:items	要渲染的数据	array	[]
item-key	每行数据绑定的唯一属性	string	‘id’
:headers	表头信息	DataTableHeader[]	[]
loading	是否显示加载数据的进度条	boolean	false

参考链接

Vue 官网：https://cn.vuejs.org/v2/api/

Vuetify：https://vuetifyjs.com/zh-Hans/api/vuetify/

Vuetify 是 Vue 的语义化组件框架，旨在提供整洁、语义化和可重用的组件，使得构建应用程序更方便。

更多技术文章

Vuetify 框架相关推荐

软件测试|Vuetify框架的使用
介绍 Vuetify 是一个基于 Vue.js 精心打造 UI 组件库,整套 UI 设计为 Material 风格.能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面. 为什么要使 ...
技术分享 | 学做测试平台开发-Vuetify 框架
本文节选自霍格沃兹测试学院内部教材 Vuetify 是 Vue 的语义化组件框架,旨在提供整洁.语义化和可重用的组件,使得构建应用程序更方便. Vuetify 核心是为了提供各种可重复使用的,即插即用 ...
【javaWeb微服务架构项目——乐优商城day03】——（搭建后台管理前端，Vuetify框架，使用域名访问本地项目，实现商品分类查询，cors解决跨域，品牌的查询）
乐优商城day03 0.学习目标 1.搭建后台管理前端 1.1.导入已有资源 1.2.安装依赖 1.3.运行一下看看 1.4.目录结构 1.5.调用关系 2.Vuetify框架 2.1.为什么要学习U ...
Vue引入vuetify框架你需要知道的几点
1.命令行安装 npm install vuetify --save 2.在src目录中创建一个名为的文件夹plugins在里面,添加一个vuetify.js文件.代码如下 import Vue fr ...
vuetify框架中服务端分页的实现方式(指定初始显示记录数)
在v-data-table部分配置参数: :pagination.sync="pagination":total-items="totalItems"data ...
vuetify中文文档_我们为什么选择Vuetify作为前端框架
尝试了很多不同的前端框架,最终我们选择Vuetify(https://vuetifyjs.com)前端框架. 从Bootstrap开始,到iview,Buefy,elementUI,我们都是不断的尝试 ...
UI-Vuetify框架
UI-Vuetify框架 5.Vuetify框架 5.1.为什么要学习UI框架 5.2.为什么是Vuetify 5.3.怎么用? 5.Vuetify框架 5.1.为什么要学习UI框架 Vue负责的是虽 ...
VUE-Vuetify框架
2.Vuetify框架 2.1.为什么要学习UI框架 Vue虽然会帮我们进行视图的渲染,但样式还是由我们自己来完成.这显然不是我们的强项,因此后端开发人员一般都喜欢使用一些现成的UI组件,拿来即用,常 ...
Vuetify中的v-pagination如何实现分页
前言昨天在改一个系统的时候遇到了个技能点,观察解决了好久,终于解决了,趁热打铁,今天来记录一下. 这个系统是个个人博客,目前我也在使用,但是有个地方用的很不舒服.就是首页,源码的作者本意是让不断的下 ...