【Vuetify】基础（二）

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>