Vuetify 基礎一

1 Vuetify 簡介
2 樣式
- 2.1 顔色
- 2.2 間距

Vuetify 簡介¶

Vuetify為目前常與 Vue.js 一起搭配的框架，可建構豐富的使用端共呢，快速的建立應用程式。

先修課程¶

修習本課程之前，比需先完成下列4種課程：

Vuetify 的安裝¶

本教材採用 CDN 方式安裝，基本的範例檔案如下：

<!DOCTYPE html>
<html>
<head>
  <!-- 調整手機瀏覽器的螢幕解析度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

  <!-- 安裝字體及圖標 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

  <!-- 安裝 Vuetify 樣式檔 -->
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

  <!-- 安裝 Vue、vue-router 及 Vuetify -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>

<body>
<div id="app">
  <v-app>
    <v-content>
      <v-container>
        <!-- 用戶界面放在這裏 -->
      </v-container>
    </v-content>
  </v-app>
</div>

<script>
  // 啓動 Vue 及 Vuetify
  var vm = new Vue({
    el: '#app',
    vuetify: new Vuetify(),
  })
</script>
</body>
</html>

$\color{red}{後續程式範例，請利用下列程式模板，將程式碼填入到`<body></body>`區塊内，並以瀏覽器執行：}$

<!DOCTYPE html>
<html>
<head>
  <!-- 調整手機瀏覽器的螢幕解析度 -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

  <!-- 安裝字體及圖標 -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

  <!-- 安裝 Vuetify 樣式檔 -->
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

  <!-- 安裝 Vue、vue-router 及 Vuetify -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>

<body>
    <!-- 本教材範例程式碼放在這裏 -->
</body>
</html>

Vuetify 與 Vue¶

使用 Vuetify 之前，必須先瞭解 Vue 的運作方式，以下為一簡單的範例：

<div id="app-1">
  <v-app>
    <v-content>
      <v-container>
        {{ helloMessage }}
      </v-container>
    </v-content>
  </v-app>
</div>

<script>
new Vue({
  el: '#app-1',
  vuetify: new Vuetify(),
  data: {
    helloMessage: "Hello Vuetify"
  }
})
</script>

Hello Vuetify

樣式¶

顔色¶

紅底白字

黑底白字

primary 色系按鈕

<div id="color-1" style="max-height:60px">
  <v-app id="inspire">
    <div class="red white--text">
      紅底白字
    </div>
    <div class="black white--text">
      黑底白字
    </div>
    <v-btn class="primary">
      primary 色系按鈕
    </v-btn>
  </v-app>
</div>

<script>
  var vm = new Vue({
    el: '#color-1',
    vuetify: new Vuetify(),
  });
</script>

間距¶

間距類別再設定元素的padding和margin，指令格式為{屬性}{方向}-{大小}。

屬性
- m：對應邊距 margin
- p：對應内距 padding
方向
- t：對應 top
- b：對應 bottom
- l：對應 left
- r：對應 right
- x：對應 left和right(水平左右間距)
- y：對應 top和bottom (垂直上下間距)
- a：所有方向的間距
大小
- 0：無間距
- 1~12：間隔4px的倍數
- n1~n12：間隔負4px的倍數
- auto：設置間距為 auto

上下内距 padding:8px

上下邊界 margin:8px

自動邊界、内距 8px

<div id="pm-1" style="max-height:150px">
  <v-app id="inspire">
    <div>
      <div class="py-2 black white--text text-center">
        上下内距 padding:8px
      </div>

      <div class="my-2 black white--text text-center">
        上下邊界 margin:8px
      </div>

      <div class="ma-auto pa-2 black white--text text-center" style="width:20%">
        自動邊界、内距 8px
      </div>
    </div>
  </v-app>
</div>

<script>
  var vm = new Vue({
    el: '#pm-1',
    vuetify: new Vuetify(),
  });
</script>