Vue.jsを利用する際に重要なデータバインディンディングとはなにかについて学習します。
目次
動画でVue.jsを学習する
データバインディングとは
データバインディングとは、ざっくり言ってしまうと、
「データと描画を同期する仕組み」です。
HTML側の、テープレートに記述したされた、フォームのinputの部分の文字を変更すると、
出力される文字がリアルタイムで変わります。
これは、データバインディングによって実現しています。
inputのvalueが変わると、データメッセージの値が、代わり、さらに、こちらの文字列の表示も変わる流れになっています。
jQueryでも書けるが
例えば、
inputの文字列を変えたら、この文字列も変えるというのは、
Vue.jsを使わなくても、素のJavaScriptとかjqueryを使って書くこともできます。
例えば、jQueryで書いた場合です。
初期値をセットして、input要素の、keyupイベントをトリガにして、inputのvalueを取得して、p要素のコンテンツにセットするといったコードになり、煩雑です。
これは簡単な事例なので、まだ良いのですが。
画面上の複数の要素について、イベントハンドラを書いていくという処理を書いていくと、コードが複雑で見通しが悪くなりがちです。
Vue.jsで記載すると、非常にシンプルに書けます。
Vue.jsを使うと
Vue.jsを使うことで、開発効率を上げることができます。
エンジニアとかデザイナーの仕事の目的は、お客様に満足してもらえるサービスを提供することです。
コードを書くことは手段であって、目的では無いので、
ぜひ、Vue.jsを使って効率的なWeb開発ができることを目指しましょう。
データバインディングの種類
データバインディングの種類にはつぎのものがあります。
- 双方向バインディング （TwoWay）
- 単方向バインディング(OneWay)
- ワンタイムバインディング(OneTime)
双方向バインディング （TwoWay）
- 双方向にデータが同期するデータバインディングです。
単方向バインディング(OneWay)
- 一方方向に同期するデータバインディングです。
ワンタイムバインディング(OneTime)
- 一回だけ同期を行うデータバインディング
おわりに
データバインディングを使ったプログラムの書き方については、今後のレクチャーで学習していきますので、ここでは、何となく全体像を把握していただければOKです。
この記事では、データバインディンディングとはなにかについて学習しました。
オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。
動画でプログラミング入門をしよう
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する