Nuxt.js調査_8/28

someone

28 8月, 2020

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

①v-icon

Material Designに準拠
'v-icon' コンポーネントは、アプリケーションのさまざまな場面で使えるグリフの大規模なセット

■

②mdi-account-box

<i class="mdi mdi-account-box"></i>

[画像]

■

③v-dialog

v-dialogコンポーネントは、特定のタスクについてユーザに通知し、重要な情報を含んだり意思決定を必要とするような複数のタスクを伴う可能性があります。
割り込み的な要素ですので、ダイアログは控えめに使用してください。

[code]

v-dialog(

v-model = 'dialog'

transition = "dialog-bottom-transition"

hide-overray

fullscreen

scrollable

)

■

④v-model

フォーム入力バインディング
自動的に入力要素のタイプに基づいて要素を更新するための正しい方法
内部的にはv-bindとv-onを一行で表現したもの

■

⑤dialog-transition

Vueのトランジションシステムと関数型コンポーネントにより、アプリケーションで簡単に動きを制御することができます。
ほとんどのコンポーネントはtransitionpropによって、トランジションを変更することができます。
リンク先のサンプル見ればほぼおｋ

todo vueの出来に感動した...

link

■

⑥v-card

v-card コンポーネントは、パネルから画像まであらゆる用途に使用できる汎用的なコンポーネントです。
card コンポーネントには、可能な限りマークアップを簡単にするためのたくさんのヘルパーコンポーネントが存在します。

■

⑧@click.native

<my-component @click.native="handler"></my-component>


<my-component @click="handler"></my-component>

■

⑨@submit.native.prevent
@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もなんだ？

■

13)rules.password
→data.rules以下に定義されているので、ここで値を保持してるのかな？

■

14)rules.password
→data.rules以下に定義されているので、ここで値を保持してるのかな？

■

15)vuex

状態を管理しているから、
mapMutationインポートしてるけどつかってないやね？
formのパスワードってどこで持ってるんですかね？
data()のmodel()?わからん

■

■admin/menus/list

this.$('string指定')みたいなきほうなんやろ？
---->テキスト指定呼び出しかい！しょぼいやつやん。

DOMなのか、でぃれくとりしていなのかよくわからん
dense は、listで幅狭い奴

■
mapGetters:
状態を呼び出す、
computedに書く、

使うメリット->記法がシンプルになること
this.$store.getters.getter1 //通常
this.getter1 //mapGetters使用

■
・ファイル間の依存関係とか、
・スクリプト部分の読み方とか、
・Form.vueが多い。とか。
どうしてました？
どうしてました？よーわからん。