로그인보기

Vuetify의 공식 사이트에서 소개 된 비디오의 내용을 시도했습니다.
htps : // ゔ에치 fyjs. 코 m/그럼/

App.vue

<template>
  <v-app>
    <v-card width="500" class="mx-auto mt-5">
      <v-card-title>
        <h1 class="display-1">ログイン</h1>
      </v-card-title>
      <v-card-text>
        <v-form>
          <v-text-field label="ユーザID" prepend-icon="mdi-account-circle" />
          <v-text-field
            label="パスワード"
            :type="showPassword ? 'text' : 'password'"
            prepend-icon="mdi-lock"
            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
            @click:append="showPassword = !showPassword"
          />
        </v-form>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-btn color="success">登録</v-btn>
        <v-spacer></v-spacer>
        <v-btn color="info">ログイン</v-btn>
      </v-card-actions>
    </v-card>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

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

구성 요소 설명 Pt.1

비디오:
htps //w w.ゔ 에마 s ry. 코 m / 코 rs s / 베 아우치 fy - 우 th - ゔ 에치 fy / 코 m 포넨 ts - 파 rt-1 /

문서
htps : // / 에치 fyjs. 코 m / 자 / 코 m 포넨 ts / 아 p rs

App.vue

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <v-toolbar-title>サイト名</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn text rounded>ホーム</v-btn>
      <v-btn text rounded>ログイン</v-btn>
    </v-app-bar>
    <v-content>
      <v-card width="500" class="mx-auto mt-5">
        <v-card-title>
          <h1 class="display-1">ログイン</h1>
        </v-card-title>
        <v-card-text>
          <v-form>
            <v-text-field label="ユーザID" prepend-icon="mdi-account-circle" />
            <v-text-field
              label="パスワード"
              :type="showPassword ? 'text' : 'password'"
              prepend-icon="mdi-lock"
              :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
              @click:append="showPassword = !showPassword"
            />
          </v-form>
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-btn color="success">登録</v-btn>
          <v-spacer></v-spacer>
          <v-btn color="info">ログイン</v-btn>
        </v-card-actions>
      </v-card>
    </v-content>
    <v-footer color="primary lighten-1" padless>
      <v-row justify="center" no-gutters>
        <v-btn v-for="link in links" :key="link" color="white" text rounded class="my-2">{{ link }}</v-btn>
        <v-col class="primary lighten-2 py-4 text-center white--text" cols="12">
          {{ new Date().getFullYear() }} —
          <strong>terapyon</strong>
        </v-col>
      </v-row>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: "App",

  components: {},

  data: () => ({
    showPassword: false,
    links: ["ホーム", "ログイン"]
  })
};
</script>

# 요약

동영상을 보면서 사경하고 완성에 가까워진다는 공부법을 처음으로 갔습니다만, 좋았습니다.
이후 동영상 콘텐츠는 유료인 것 같습니다. 유료 버전으로 지속적으로 보고 싶습니다. 다만, 이와 같이 공개 Blog에 아웃풋 할 수 없는 것이 유감입니다.