软件测试/测试开发丨Vuetify框架的使用

介绍

Vuetify 是一个基于 Vue.js 精心打造 UI 组件库,整套 UI 设计为 Material 风格。能够让没有任何设计技能的开发者创造出时尚的 Material 风格界面。

为什么要使用Vuetify框架

  • 所有组件遵从 Material Design 设计规范,UI 体验非常优秀,能够媲美苹果但又完全不同的设计
  • 采用移动优先的设计,无论在手机、平板或 PC 电脑上都有完美的适配
  • 极其丰富的上手文档,活跃的社区,全职团队维护,长期支持
  • 在 Github 上有高达 36.2k 的Star,并且得到了Vue.js 作者尤雨溪大神的推荐
  • 作为一个开源项目,大牌赞助商的坚挺

官方文档:vuetifyjs.com/zh-Hans/int…

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>

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/602260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zookeeper经典应用场景之分布式锁

1. 什么是分布式锁 在单体的应用开发场景中涉及并发同步的时候&#xff0c;大家往往采用Synchronized&#xff08;同步&#xff09;或者其他同一个JVM内Lock机制来解决多线程间的同步问题。在分布式集群工作的开发场景中&#xff0c;就需要一种更加高级的锁机制来处理跨机器的进…

MiniTab的宏基础知识

什么是宏&#xff1f; 宏是包含一系列 Minitab 会话命令的文本文件。可以使用宏自动执行重复性任务&#xff08;例如&#xff0c;生成月度报表&#xff09;或扩展 Minitab 的功能&#xff08;例如&#xff0c;计算特殊检验统计量&#xff09;。 Minitab 提供以下类型的宏&…

MongoDB索引详解

概述 索引是一种用来快速查询数据的数据结构。BTree 就是一种常用的数据库索引数据结构&#xff0c;MongoDB 采用 BTree 做索引&#xff0c;索引创建 colletions 上。MongoDB 不使用索引的查询&#xff0c;先扫描所有的文档&#xff0c;再匹配符合条件的文档。使用索引的查询&…

Spring IOC的四种手动注入方法

手动注入 1.Set方法注入-五种类型的注入1.1 业务对象JavaBean第一步&#xff1a;创建dao包下的UserDao类第二步&#xff1a;属性字段提供set⽅法第三步&#xff1a;配置⽂件的bean标签设置property标签第四步&#xff1a;测试 1.2 常用对象String&#xff08;日期类型&#xff…

每日一题——LeetCode1089.复写0

方法一 splice&#xff1a; 通过数组的slice方法&#xff0c;碰到 0就在后面加一个0&#xff0c;最后截取原数组的长度&#xff0c;舍弃后面部分。 但这样做是违反了题目的要求&#xff0c;不要在超过该数组长度的位置写入元素。 var duplicateZeros function(arr) {var le…

软件测试|全面解析Docker Start/Stop/Restart命令:管理容器生命周期的必备工具

简介 Docker是一种流行的容器化平台&#xff0c;用于构建、分发和运行应用程序。在使用Docker时&#xff0c;经常需要管理容器的生命周期&#xff0c;包括启动、停止和重启容器。本文将详细介绍Docker中的docker start、docker stop和docker restart命令&#xff0c;帮助您全面…

计算机组成原理-进位计数制(进制表示 进制转换 真值和机器树)

文章目录 现代计算机的结构总览最古老的计数方法十进制计数法推广&#xff1a;r进制计数法任意进制->十进制二进制<--->八进制&#xff0c;十六进制 各种进制常见的书写方式十进制->任意进制整数部分小数部分 十进制->二进制&#xff08;拼凑法&#xff09;真值…

Oracle OCP怎么样线上考试呢

大家好&#xff01;今天咱们就来聊聊Oracle OCP这个让人又爱又恨的认证。为啥说又爱又恨呢&#xff1f;因为它既是IT界的“金字招牌”&#xff0c;又是一块硬骨头&#xff0c;不是那么容易啃下来的。好了&#xff0c;废话不多说&#xff0c;我们直奔主题&#xff0c;来看看关于…

解决vue3中watch 监听不到旧值的问题,亲测有效!

问题描述 这个问题是我在公司vue3项目的时候发现的一个问题&#xff0c;watch 在监听对象/数组变量的变化时&#xff0c;发现对象的数据变化时 旧数据 获取到的和新数据是一样的 类似于下面这样 const objref({a:我是原来的值,b:6, })obj.a改变值watch(obj,(nel,old)>{ c…

studio3T mongodb 根据查询条件更新字段 或 删除数据

1. mongodb 等于、不等于$ne、不包含 $nin 以及批量更新数据的使用。 业务场景&#xff1a; 在集合中&#xff0c;根据查询条件&#xff0c;更新数据状态。 实现代码&#xff1a; 1. 部门名称为XXX、状态不等于“完好”的、并且不包含这些编码的数据先查询出来2. 再把状态更…

rust sqlx包(数据库相关)使用方法+问题解决

可以操作pgsql、mysql、mssql、sqlite 异步的&#xff0c;性能应该不错&#xff0c;具体使用有几个坑 除了sqlx库&#xff0c;还有对于具体数据库的库&#xff0c;比如postgres库 演示以pgsql为例&#xff0c;更新时间2024.1.6 官方github: sqlx github rust官方文档&#xff1…

【Python学习】Python学习4-运算符

目录 【Python学习】Python学习4-运算符 前言算术运算符比较&#xff08;关系&#xff09;运算符赋值运算符逻辑运算符位运算符成员运算符身份运算符运算符优先级参考 文章所属专区 Python学习 前言 本章节主要说明Python的运算符。主要有 算术运算符 比较&#xff08;关系&…

强化学习3——马尔可夫性质、马尔科夫决策、状态转移矩阵和回报与策略(上)

与多臂老虎机问题不同&#xff0c;马尔可夫决策过程包含状态信息以及状态之间的转移机制。如果要用强化学习去解决一个实际问题&#xff0c;第一步要做的事情就是把这个实际问题抽象为一个马尔可夫决策过程。 马尔可夫决策过程描述 马尔可夫决策过程以智能体在与环境交互的过…

【linux笔记1】

目录 【linux笔记1】文件内容的理解用户管理用户管理命令添加用户切换用户修改用户信息删除用户 用户组 【linux笔记1】 文件内容的理解 etc文件夹&#xff1a;etc是拉丁语"et cetera"的缩写&#xff0c;意思是“和其他的”或“等等”。在linux系统中&#xff0c;“…

[嵌入式C][入门篇] 快速掌握基础2 (数据类型、常量、变量)

开发环境&#xff1a; 网页版&#xff1a;跳转本地开发(Vscode)&#xff1a;跳转 文章目录 一、基本变量大小和范围&#xff08;1&#xff09;在8位/32位单⽚机中&#xff1a;测试代码结果&#xff1a;64位机器结果&#xff1a;32位机器&#xff08;单片机&#xff09;无对齐限…

Geoserver扩展发布MySQL视图功能

Geoserver中并不自带mysql数据发布功能&#xff0c;需要扩展外部插件。 1、示例以geoserver-2.20.5版本进行演示&#xff0c;所以MySQL插件需要到该版本对应的“Extensions”标题下查找&#xff0c;下载地址&#xff1a;GeoServer&#xff0c;详见下图 2、选择MySQL进入下载页…

Linux第11步_解决“挂载后的U盘出现中文乱码”

学习完“通过终端挂载和卸载U盘”&#xff0c;我们发现U盘下的中文文件名会出现乱码&#xff0c;现在讲解怎么解决这个问题。其实就是复习一下“通过终端挂载和卸载U盘”&#xff0c;单独讲解&#xff0c;是为了解决问题&#xff0c;一次性搞好&#xff0c;我们会不长记性。 在…

数据在内存中的存储之大小端

今天也是努力学编程&#xff0c;敲代码的一天&#xff01; 1.什么是大小端 其实超过一个字节的数据在内存中存储的时候&#xff0c;就有存储顺序的问题&#xff0c;按照不同的存储顺序&#xff0c;我们分为大端字节序 存储和小端字节序存储&#xff0c;下面是具体的概念: &…

HIL(硬件在环)技术汇总梳理

HIL&#xff08;Hardware-in-the-Loop&#xff09;测试领域的知名公司有dSPACE、NI、Vector和speedgoat等&#xff0c;以下是针对这几家HIL技术的对比分析&#xff1a; 文章目录 dSPACE NI Vector speedgoat 总结 dSPACE dSPACE成立于1988年&#xff0c;起源自德国的帕德…

vue3项目中axios的常见用法和封装拦截(详细解释)

1、axios的简单介绍 Axios是一个基于Promise的HTTP客户端库&#xff0c;用于浏览器和Node.js环境中发送HTTP请求。它提供了一种简单、易用且功能丰富的方式来与后端服务器进行通信。能够发送常见的HTTP请求&#xff0c;并获得服务端返回的数据。 此外&#xff0c;Axios还提供…