Vue.jsのMaterial Design実装Vuetifyのビデオ内容をやってみた
ログインのView
Vuetifyの公式サイトで紹介されているビデオの内容をやってみた
https://vuetifyjs.com/ja/
<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
ビデオ:
https://www.vuemastery.com/courses/beautify-with-vuetify/components-part-1/
ドキュメント
https://vuetifyjs.com/ja/components/app-bars
<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にアウトプットできないのが残念です。
Author And Source
この問題について(Vue.jsのMaterial Design実装Vuetifyのビデオ内容をやってみた), 我々は、より多くの情報をここで見つけました https://qiita.com/terapyon/items/7c32e55db7c907696ce8著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .