current position:Home>Technology sharing | learning to do test platform development vuetify framework

Technology sharing | learning to do test platform development vuetify framework

2022-04-29 13:35:04Hua Weiyun

This article is excerpted from the internal textbook of Hogwarts testing college

Vuetify yes Vue Semantic component framework , Designed to provide cleanliness 、 Semantic and reusable components , Make it easier to build applications .

Vuetify The core is to provide a variety of reusable , Plug and play components suitable for various project specifications .

  • Vue Semantic components of . utilize Vue Functional components of , All tag based classes used to aid the main assembly , For example, a card subject , have access to v-card-title To deal with it
  • Easy forming .Vuetify It is envisaged to create... From the bottom . Every component , Instructions and functions all work seamlessly , Allows you to focus on creating your application .
  • Born for mobile devices . be-all Vuetify Components are designed for mobile devices . Applications can easily switch between different directions and screen sizes , compatible web、 The tablet 、 mobile phone .
  • Pre made Vue CLI Templates .Vuetify Bring their own 3 individual Vue Templates , Ready to use .

By means of Vue and Material Design The power of , And a large number of carefully crafted component libraries and features , We can use Vuetify Build excellent applications .Vuetify comply with Google Of Material Design standard , Each component is carefully designed , With modularity 、 Responsive and excellent performance , Its components have easy to remember semantic design , You can convert memorized complex classes and markup symbols into simple and explicit names .



Browser support

Browser name Support status
Chromium(Chrome, Edge Insider) Support
Edge Support
Firefox Support
Safari 10+ Support
IE11/Safari 9 need poyfill
IE9/IE10 I won't support it

Component library installation

vue add vuetify

Component library use

Component library address :Alert Prompt box — Vuetify 1

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

Component example - Data table

<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",   //  Column name           value: "id",  //  Data name of column binding ( Interface returns the name of the data field )          align: 'center', //  Location , Optional 'left' | 'center' |'right'          sortable: true, //  Can it be sorted           width: string //  Width         },        {          text: " Use case name ",          value: "caseName",          align: 'center',          sortable: false        },        {          text: " Use case data ",          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>

Property list

The attribute name explain data type The default value is
:single-select Change the selection mode to radio booleanfalse
:items Data to render array
item-key Unique attribute of each row data binding string‘id’
:headers Header information DataTableHeader
loading Whether to display the progress bar of loading data booleanfalse

Reference link

Vue Official website :API — Vue.js

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

Vuetify yes Vue Semantic component framework , Designed to provide cleanliness 、 Semantic and reusable components , Make it easier to build applications .Vuetify That's all for the framework , You can practice more ~

More technical articles : https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=hwyun&timestamp=1651197110

copyright notice
author[Hua Weiyun],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291033427633.html

Random recommended