Vueを学ぶ６日目～８日目

７月１０日～７月１６日週は３日間勉強できました。

６日目Vueコンポーネントを学ぶ

vueコンポーネント。
htmlのテンプレートを定義しておくと、画面を作る時にパーツの使い回しができる😊
【データの受け渡し】
propsで定義されている属性を指定する！
渡す側はhtmlから固定値を指定しても良いしv-bindでも良い。

— タツノリ (@KPlus33) July 10, 2022

７日目自作Vueコンポーネント

ラベル＋テキストボックスのVueコンポーネントを自作しました。

Vueでラベルとテキストボックスのコンポーネントを作ってみました。
とりあえず、作れたということで。
いくつか並べれば登録フォームっぽくなるかな。 pic.twitter.com/l1aE9IImLn

— タツノリ (@KPlus33) July 13, 2022

８日目自作Vueコンポーネントにv-modelを実装する

わかってしまえば簡単なんですが結構時間がかかりました。

こないだ作ったテキストボックスのコンポーネントにv-modelでバインドするだけで40分くらいかかりました。
これでコンポーネントの外と値を受け渡しできるようになりました。
ちょっとずつ進む

1枚目：HTML側
2枚目：Vueコンポーネント側
3枚目：Vueインスタンス側
4枚目：画面 pic.twitter.com/NWN7LI15F2

— タツノリ (@KPlus33) July 15, 2022

番外編 visibilityとdisplay

visiblity:hidden
　表示は消えるけど、そこにはあるので、スタイルは変わらなく
display:none
　要素自体がそこから無くなるから他のコンテンツの表示位置も合わせてずれる

⇒神の不在証明と4次元マンション pic.twitter.com/V3d5YJ7Ulr

— タツノリ (@KPlus33) July 15, 2022