![技術語り-Tech Blog[JP]](https://blogger.googleusercontent.com/img/a/AVvXsEiYsL2e14T1O3H3pP9BUj4BxNQQDgWUK-pNhtt6X8syLNp1zvyRWOG_UEv_Gcanv4Nix1_-8MCZL02odSwi69Cbmp6WJeoNDX8f7GQSPH25NUW3dtNTkcGdKhA0sRemc7CD46aj4pMhd8WzzKViOuxBpGmZ5DaFru2sTTv9Jie9aXa98EppzJj1P3lUvyY=s175)
Nuxt.js調査_8/28
- v-icon
- mdi-account-box
- v-dialog
- v-model
- dialog-transition
- v-card
- v-toolbar
- @click.native
- @submit.native.prevent
- v-alert
- v-text-field
- rules.currentPasswordRules
- rules.passwordPolicyRules
- rules.passwordConfirmation
- vuex
- dense
- mapGetters
■
■components/accounts/form
- <i class="mdi mdi-account-box"></i>
- v-dialogコンポーネントは、特定のタスクについてユーザに通知し、重要な情報を含んだり意思決定を必要とするような複数のタスクを伴う可能性があります。
- 割り込み的な要素ですので、ダイアログは控えめに使用してください。
[code]
v-dialog(
v-model = 'dialog'
transition = "dialog-bottom-transition"
hide-overray
fullscreen
scrollable
)
- フォーム入力バインディング
- 自動的に入力要素のタイプに基づいて要素を更新するための正しい方法
- 内部的にはv-bindとv-onを一行で表現したもの
- Vueのトランジションシステムと関数型コンポーネントにより、アプリケーションで簡単に動きを制御することができます。
- ほとんどのコンポーネントはtransitionpropによって、トランジションを変更することができます。
- リンク先のサンプル見ればほぼおｋ
todo vueの出来に感動した...
■
■
⑥v-card
- v-card コンポーネントは、パネルから画像まであらゆる用途に使用できる汎用的なコンポーネントです。
- card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在します。
■
■
⑧@click.native
<!-- コンポーネントをクリックするとhandlerが呼び出される -->
<my-component @click.native="handler"></my-component>
<!-- コンポーネントをクリックしてもhandlerが呼び出されない -->
<my-component @click="handler"></my-component>
<!-- コンポーネントをクリックするとhandlerが呼び出される -->
<my-component @click.native="handler"></my-component>
<!-- コンポーネントをクリックしてもhandlerが呼び出されない -->
<my-component @click="handler"></my-component>
■
■
⑨@submit.native.prevent
@submit.prevent を利用すると、Formの送信前にバリデーション処理を入れるなどの活用ができます。
@submit.prevent を利用すると、Formの送信前にバリデーション処理を入れるなどの活用ができます。
■
■
⑩v-alert
- v-alert コンポーネントはコンテキストタイプのアイコンと色を使い重要な情報をユーザーに伝える際に使用します。
- success、info、warning そして error の4つのバリエーションを備えています。
■
■
11)v-text-field
テキスト フィールド コンポーネントは、ユーザーが入力した情報を収集するために使用されます。
テキスト フィールド コンポーネントは、ユーザーが入力した情報を収集するために使用されます。
■
■
12)rules.password
→data.rules以下に定義されているので、ここで値を保持してるのかな？
currentPasswordRules : (v) => !!v || this.$t('account.errors.requiredCurrentPassword') ???なんだこれ
$tもなんだ？
→data.rules以下に定義されているので、ここで値を保持してるのかな？
currentPasswordRules : (v) => !!v || this.$t('account.errors.requiredCurrentPassword') ???なんだこれ
$tもなんだ？
■
■
13)rules.password
→data.rules以下に定義されているので、ここで値を保持してるのかな？
→data.rules以下に定義されているので、ここで値を保持してるのかな？
■
■
14)rules.password
→data.rules以下に定義されているので、ここで値を保持してるのかな？
→data.rules以下に定義されているので、ここで値を保持してるのかな？
■
■
15)vuex
- 状態を管理しているから、
- mapMutationインポートしてるけどつかってないやね？
- formのパスワードってどこで持ってるんですかね？
- data()のmodel()?わからん
■
■admin/menus/list
this.$('string指定')みたいなきほうなんやろ？
---->テキスト指定呼び出しかい！しょぼいやつやん。
DOMなのか、でぃれくとりしていなのかよくわからん
dense は、listで幅狭い奴
---->テキスト指定呼び出しかい！しょぼいやつやん。
DOMなのか、でぃれくとりしていなのかよくわからん
dense は、listで幅狭い奴
■
mapGetters:
状態を呼び出す、
computedに書く、
使うメリット->記法がシンプルになること
this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用
■
・ファイル間の依存関係とか、
・スクリプト部分の読み方とか、
・Form.vueが多い。とか。
どうしてました？
どうしてました？よーわからん。
mapGetters:
状態を呼び出す、
computedに書く、
使うメリット->記法がシンプルになること
this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用
■
・ファイル間の依存関係とか、
・スクリプト部分の読み方とか、
・Form.vueが多い。とか。
どうしてました？
どうしてました？よーわからん。
