![見出し画像](https://assets.st-note.com/production/uploads/images/82822352/rectangle_large_type_2_b68ab283c6332820a6fb92c82e2b2792.png?width=1200)
Vueを学ぶ6日目~8日目
7月10日~7月16日週は3日間勉強できました。
6日目Vueコンポーネントを学ぶ
vueコンポーネント。
— タツノリ (@KPlus33) July 10, 2022
htmlのテンプレートを定義しておくと、画面を作る時にパーツの使い回しができる😊
【データの受け渡し】
propsで定義されている属性を指定する!
渡す側はhtmlから固定値を指定しても良いしv-bindでも良い。
7日目自作Vueコンポーネント
ラベル+テキストボックスのVueコンポーネントを自作しました。
Vueでラベルとテキストボックスのコンポーネントを作ってみました。
— タツノリ (@KPlus33) July 13, 2022
とりあえず、作れたということで。
いくつか並べれば登録フォームっぽくなるかな。 pic.twitter.com/l1aE9IImLn
8日目自作Vueコンポーネントにv-modelを実装する
わかってしまえば簡単なんですが結構時間がかかりました。
こないだ作ったテキストボックスのコンポーネントにv-modelでバインドするだけで40分くらいかかりました。
— タツノリ (@KPlus33) July 15, 2022
これでコンポーネントの外と値を受け渡しできるようになりました。
ちょっとずつ進む
1枚目:HTML側
2枚目:Vueコンポーネント側
3枚目:Vueインスタンス側
4枚目:画面 pic.twitter.com/NWN7LI15F2
番外編 visibilityとdisplay
visiblity:hidden
— タツノリ (@KPlus33) July 15, 2022
表示は消えるけど、そこにはあるので、スタイルは変わらなく
display:none
要素自体がそこから無くなるから他のコンテンツの表示位置も合わせてずれる
⇒神の不在証明と4次元マンション pic.twitter.com/V3d5YJ7Ulr
この記事が気に入ったらサポートをしてみませんか?