【Nuxt.js】Nuxt実践編：ユーザーアイコン表示の切り替えをしよう

2217 ワード
Vue.js コンポーネント JavaScript nuxt.js JavaScript テキストリンク

🎈 この記事はWP専用です
https://wp.me/pc9NHC-ye

前置き

今回は簡単な実践編です😉💕
作るものはこちら！

マイページのあるサイトで
⬆️ユーザーアイコンの初期状態と
⬇️画像を設定した時の
表示の切り替えをやってみましょう💃🎶

コンポーネント間のやりとりや
演算子の復習になるのでぜひチャレンジしてください🔥💪

今回のような簡単な実践編も
今後増やしていこうと思ってます💕

Let's try!

ディレクトリ

file
components/
--| atom/
----| icons/
------| IconUser.vue
--| molecule/
----| items/
------| ItemUserIconName.vue

pages/
--| user.vue

アトミックデザインに基づき作成します🌟
atomはアイコン部分。
他のmoleculeにも使い回す前提です。
moleculeはアイコンとユーザーの名前を追加したものです。

アドミックデザイン

要素の大きさごとにファイルを分けます🙋‍♀️
コンポーネントがどこにあるのか
分かりやすくなります💕
大きさの分類はここが参考になります！
Atomic Designとは

atom

構成

IconUser.vueを作成しましょう🙋‍♀️
初期アイコンと、
アイコンが設定された場合の
表示を切り替えます。
アイコン画像は親で設定します。

背景は縦横64px
アイコンは縦横24px

アイコンはiconmonstrのsvgを使用しています🌟
https://iconmonstr.com/user-5-svg/

それではやってみましょう！！！

ticktack…

まずは切り替えをするので
v-ifとv-elseが使えますね…
親で画像を設定するのでpropsをstringで渡します。
stringを真偽値にしてv-ifとv-elseにしたい…

それではコードを見てみましょう✨👀

解説

🎈 続きはWPでご覧ください👀
https://wp.me/pc9NHC-ye