【Vuetify】基础（二）

最新推荐文章于 2024-10-21 10:34:53 发布

木笔の园子

最新推荐文章于 2024-10-21 10:34:53 发布

阅读量3.5k

点赞数

分类专栏： Vue # Vuetify 文章标签： vue vue.js

本文链接：https://blog.csdn.net/u011133007/article/details/108721139

版权

Vue 同时被 2 个专栏收录

3 篇文章

订阅专栏

Vuetify

3 篇文章

订阅专栏

本文介绍了Vuetify的基础，包括v-app、v-app-bar和v-main组件的用法。v-app作为所有Vuetify组件的父级，v-app-bar用于创建导航栏，v-main则承载主要内容。以APP.vue文件为例，展示了Vuetify中如何组织HTML结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vurtify基础

Vuetify is UI component framework.

v-app
v-app组件是所有Vuetify组件的最外层，可存在于body元素的任何地方，但必须有一个作为所有Vuetify组件的父级元素。

v-app-bar

v-app-bar组件是站点导航栏，主要搭配v-navigation-drawer组件一起使用。

v-main
v-mian组件相当于正文内容，可引入其他组件。

APP.vue文件

以APP.vue文件为模板介绍，如下：

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<script>
import HelloWorld from './components/HelloWorld';

export default {
  name: 'App',

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

Vue支持将HTML代码、Javascript脚本和CSS样式分开实现，分别使用标签<template></template> <script></script> <style></style>表示。

Vuetify支持的Html结构如下：

<template>
  <v-app>
  
    <v-app-bar>
    </v-app-bar>

    <v-main>
    </v-main>
    
  </v-app>
</template>