こんにちは！
LIFULLエンジニアの吉永です。
本日も最近あまり関わらなくなったのであまりキャッチアップできていなかったフロントエンド開発技術についてインプットした内容を備忘録として記載していきます。
本記事の概要
前回の記事をご参照ください。
本記事は前記事の続きになります。
双方向データバインディング v-model
See the Pen 双方向データバインディング v-model by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
Text1及びText2に入力されたテキストをもう片方にも反映しており、Resetを押すとテキストをクリア、Reverseを押すと入力されたテキストの内容を反転させる例。
双方向データバインディングとは、モデルの状態とビューの状態を同期させる仕組み。
前記事のv-bindはモデルの状態をビューに反映し、ビュー上での変更に対してモデルは追従しない、片方向のデータバインディング。
用途に応じて使い分けることで、柔軟に対応できそうですね。
ここまで来るとjQueryはイベントハンドラだらけになり、かつ、同期させるべき項目が増えれば増えただけコードが肥大化して煩雑になっていきそうな予兆を既に示しています。
※いや、もっとスマートに書けるだろっていうご意見もありそうな気はしますが・・・
※あと、「jQueryいけてないよね」って貶めるような意図は一切ございません！
コンポーネント
See the Pen コンポーネント by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
続いてコンポーネントです。
予めHTML上で使いまわすタグ構造などをコンポーネントとしてモデルに定義しておき、HTML側ではそのコンポーネントタグを記述することで展開することが可能になります。
このようにしておくことでビュー側のコードがすっきりすることと、ビューのパーツをコンポーネント化しておくことで再利用しやすく、かつ保守性も高くすることが可能になります。
CSS Class切り替え
See the Pen CSS Class切り替え by Yuta Yoshinaga (@yuta-yoshinaga) on CodePen.
続いてエレメントのClass属性を変更する際の例です。
ラジオボタンの選択状態に応じて表示しているテキストのカラーが切り替わるようになっており、ラジオボタンのバリューにCSSで定義したクラス名を設定してあり、ラジオボタンの選択が変更されるたびに、置き換えるようになっています。
v-modelでラジオボタンの選択値を共有して、Class属性にはv-bindで片方向だけのデータバインディングを行ってクラスを切り替えています。
最後に
いかがでしたでしょうか？
Vue.jsの基本的な部分に関しては前回の記事と今回の記事で、概ね網羅できたのではないかと思います。
次のステップとしてはこれらを組み合わせ応用していくことで、より複雑なフロントエンド開発ができるようにちょっとした家計簿アプリケーションのようなものを作成してみようと思います。
次回も引き続きVue.jsとjQueryのコード比較を行いながら実装していく予定です！
それではまた次の記事でお会いしましょう！