软件测试|Vuetify框架的使用
介绍
Vuetify 是一个基于 Vue.js 精心打造 UI 组件库,整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。
为什么要使用Vuetify框架
- 所有组件遵从 Material Design 设计规范,UI 体验非常优秀,能够媲美苹果但又完全不同的设计
- 采用移动优先的设计,无论在手机、平板或 PC 电脑上都有完美的适配
- 极其丰富的上手文档,活跃的社区,全职团队维护,长期支持
- 在 Github 上有高达 36.2k 的Star,并且得到了Vue.js 作者尤雨溪大神的推荐
- 作为一个开源项目,大牌赞助商的坚挺
官方文档:https://vuetifyjs.com/zh-Hans/introduction/why-vuetify/
Vuetify 页面布局
页面布局是对页面文字,图形或表格进行格式设置
基本布局
- v-app:应用程序的根节点
- 替换了之前html的入口
- v-main:正文内容区域
布局示例:
代码示例:
<template><!-- App.vue --><v-app><v-navigation-drawer app clipped><!-- 导航栏 --></v-navigation-drawer><v-app-bar app clipped-left><!-- 顶部栏 --></v-app-bar><!-- 根据应用组件来调整你的内容 --><v-main><!-- 给应用提供合适的间距 --><v-container fluid><!-- 如果使用 vue-router --><router-view></router-view></v-container></v-main><v-footer app><!-- 底部栏 --></v-footer></v-app>
</template>
Vuetify 组件的使用
按钮
<v-row align="center" justify="space-around"><v-btn>正常操作</v-btn><v-btn color="primary"> 关键操作 </v-btn><v-btn color="error"> 错误操作 </v-btn><v-btn disabled> 不可操作 </v-btn>
</v-row>
效果展示:
数据表格
<template> <!-- 根据应用组件来调整你的内容 --><v-main><!-- 给应用提供合适的间距 --><v-container fluid><!-- 将headers数组绑定给headers属性 ,items属性指定表格数据items-per-page属性控制每页展示的数据行数,如果是-1的话,将展示所有--><v-data-table:headers="headers":items="desserts":items-per-page="5"class="elevation-1"></v-data-table><!-- 如果使用 vue-router --><router-view></router-view></v-container></v-main>
</template><script>export default {// 数据data () {return {// 表头headers: [{//表头内容text: '姓名',// 对齐的方式align: 'start',// 控制字段是否可以排序sortable: false,// 对应表头每行数据的keyvalue: 'name',},{ text: 'Calories', value: 'calories' },{ text: 'Fat (g)', value: 'fat' },{ text: 'Carbs (g)', value: 'carbs' },{ text: 'Protein (g)', value: 'protein' },{ text: 'Iron (%)', value: 'iron' },],// 数据desserts: [{name: 'Frozen Yogurt',calories: 159,fat: 6.0,carbs: 24,protein: 4.0,iron: '1%',},{name: 'Ice cream sandwich',calories: 237,fat: 9.0,carbs: 37,protein: 4.3,iron: '1%',},],}},}
</script>
抽屉导航
<template><!-- 卡片样式 --><v-cardheight="400"width="256"class="mx-auto"><!-- 导航栏 permanent属性是规定导航栏无论窗口大小如何都能自适应的--><v-navigation-drawer app clipped permanent><!-- 列表组件 --><v-list-item><v-list-item-content><!-- 主标题 --><v-list-item-title class="text-h6"> 测试平台 </v-list-item-title><!-- 副标题 --><v-list-item-subtitle> hogwarts </v-list-item-subtitle></v-list-item-content></v-list-item><!-- 分割线 --><v-divider></v-divider><!-- dense减少高度,nav减少宽度,紧密 --><v-list dense nav><!-- 遍历items ,绑定itme数据的title,link属性可以为组件指定链接--><v-list-item v-for="item in items" :key="item.title" link><v-list-item-icon><v-icon>{{ item.icon }}</v-icon></v-list-item-icon><!-- 展示 --><v-list-item-content><v-list-item-title>{{ item.title }}</v-list-item-title></v-list-item-content></v-list-item></v-list></v-navigation-drawer></v-card>
</template><script>
export default {data() {return {items: [{ title: '主页', icon: 'mdi-view-dashboard' },{ title: '照片', icon: 'mdi-image' },{ title: '帮助', icon: 'mdi-help-box' },],right: null,};},
};
</script>
更多技术文章
软件测试|Vuetify框架的使用相关推荐
- 技术分享 | 学做测试平台开发-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 ...
- 软件测试——自动化测试框架有哪些?
目录 前言 一.Robot Framework 二.Pytest 三.UnitTest/PyUnit 四.Behave 五.Lettuce 结语 前言 自动化测试常用的Python框架有哪些?常用的框 ...
- Vuetify 框架
Vuetify 是 Vue 的语义化组件框架,旨在提供整洁.语义化和可重用的组件,使得构建应用程序更方便. Vuetify 核心是为了提供各种可重复使用的,即插即用并且适合各种项目规格的组件. Vue ...
- Vue引入vuetify框架你需要知道的几点
1.命令行安装 npm install vuetify --save 2.在src目录中创建一个名为的文件夹plugins在里面,添加一个vuetify.js文件.代码如下 import Vue fr ...
- 【博学谷学习记录】超强总结,用心分享 | 软件测试 UnitTest框架
UnitTest框架 1. 介绍 2. TestCase(测试用例) 1. 问题1:代码文件的命名不规范 问题 2:代码运行没有结果 问题 3 没有找到用例 3. TestSuite & Te ...
- vuetify框架中服务端分页的实现方式(指定初始显示记录数)
在v-data-table部分配置参数: :pagination.sync="pagination":total-items="totalItems"data ...
- vuetify中文文档_我们为什么选择Vuetify作为前端框架
尝试了很多不同的前端框架,最终我们选择Vuetify(https://vuetifyjs.com)前端框架. 从Bootstrap开始,到iview,Buefy,elementUI,我们都是不断的尝试 ...
- 《精通自动化测试框架设计》目录—导读
作者简介 精通自动化测试框架设计 陈冬严,浙江大学硕士,具有10年软件测试和团队管理的工作经验,先后服务于ITSM.PLM软件研发企业,现就职于某金融行业核心机构IT规划部门.业余时间喜欢园艺. 邵杰 ...
最新文章
- 怀念mj--20090902
- java版数据结构解迷宫问题_C语言数据结构之迷宫问题
- 致歉!抖音Semi Design承认参考阿里Ant Design
- 【华为云技术分享】如何整合hive和hbase
- MTK 驱动开发(39)--低功耗分析工具
- .NET 4.5 HttpClient 中使用Cookie
- python语句分隔用什么符号_python语句用什么符号隔开
- C# 将系统时间转换成农历时间
- 如何快速复制文件或文件夹路径?
- vue中如何清除echarts上次保留的数据(亲测有效)
- 『Less』学习笔记
- pycharm远程连接服务器完整教程
- 助你深刻理解——最长公共子串、最长公共子序列(应该是全网数一数二的比较全面的总结了)
- 35岁以后不建议裸辞
- css盒子模型有几种?以及盒模型设置?
- ubuntu下使用mosquitto与分析
- 学生档案填写html,高中学籍档案填写样本有什么用 如何填写学籍档案
- Unity 向目标移动,并朝向目标
- DriodDeveloper 技术干货大汇总
- 人工智能原理与算法2021年期末考试试题
热门文章
- Android :高德地图demo
- WPF工控组态软件之管道和冷却风扇开发
- Android 抱歉,xxx已停止运行 源码分析
- 网络营销和传统营销有那些优劣势?
- networkx的安装及简单用法
- 关于重定向和服务器转发的知识
- js实现图片上一张下一张点击
- RxJava2.x是一个非常棒的流式编程,采用的观察者模式思想,事件的产生者产生事间之后发送给绑定的接受者,接受顺序与发送顺序一致.但是 是独立于RxJava1.x存在,本文讲解RxJava2.x的简
- 场景解析和语义分割区别_语义分割概念及应用介绍
- 动态加载、插件化、热部署、热修复(更新)知识汇总