写点什么

软件测试 / 测试开发 | 学做测试平台开发 -Vuetify 框架

作者:测试人
  • 2023-03-03
    北京
  • 本文字数:1330 字

    阅读完需:约 4 分钟

获取更多相关知识

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 规范,每一个组件都经过精心设计,具有模块化、响应式和优秀的性能,其组件具有易记忆的语义设计,可将记忆复杂的类和标记符号转换为简单且明确的名称。



浏览器支持

组件库安装

vue add vuetify
复制代码

组件库使用

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

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

组件示例-数据表格

<template>  <v-data-table    v-model="selected"    :headers="headers"    :items="desserts"    :single-select="singleSelect"    item-key="name"    loading="true"    class="elevation-1"  >    <template v-slot:top>      <v-switch        v-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>
复制代码

属性列表

参考链接

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

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

Vuetify 是 Vue 的语义化组件框架,旨在提供整洁、语义化和可重用的组件,使得构建应用程序更方便。Vuetify 框架就先说到这里啦,大家可以多多练习一下哦~

发布于: 刚刚阅读数: 4
用户头像

测试人

关注

专注于软件测试开发 2022-08-29 加入

霍格沃兹测试开发学社,测试人社区:https://ceshiren.com/t/topic/22284

评论

发布
暂无评论
软件测试/测试开发 | 学做测试平台开发-Vuetify 框架_软件测试_测试人_InfoQ写作社区