プログラミング入門ナビ編集部

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開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.2 (3614 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

この記事では、Vueインスタンスの作成について学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」を、世界最大級のオンライン学習プラットフォームUdemy（ユーデミー）で公開中です。

動画で学習する

Vueインスタンスの作成

早速、Vueインスタンスを作成します。

var app = new Vue({
})

new Vueの戻り値は、ルートVue インスタンスとなります。

この変数名(app)は、任意で付けてOKなのですが、
慣例として、appや vmが利用されます。
appは、アプリケーションの略で、vmはViewModelの略です。

ViewModelと聞くと、.netなどで使われているMVVMパターンを連想する方もいらっしゃると思います。
Vue.js は、MVVM パターンと厳密には関連がありませんが、部分的には影響を受けているため、vmといった変数名が使われこともあります。

ルート Vue インスタンスを変数化しておくことで、
consoleからアクセスすることができますが、利用しない場合は、変数化を省略してもOKです。

new Vue({
})

consoleからVueインスタンスにアクセスする方法については、あとのレクチャーで説明いたします。
このコースでは、原則変数名としてappを利用します。

var app = new Vue({
  // options
})

これで、空のVueインスタンスの作成が行えました。

ここに、各種オプションを記述していきます。

おわりに

このレクチャでは、Vueインスタンスの作成について学習しました。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。

はじめてのVue.js 3 入門！jQuery を使わないウェブ開発 - 導入からアプリケーション開発まで体系的に学ぶ中村 祐太 Yuta Nakamura, Proglus （プログラス）Angular.js、React.jsに比べて学習コストが低い注目度抜群のJavaScriptフレームワーク Vue.js！高度化するWeb開発のフロントエンド開発の課題を解決。 4.2 (3614 ratings)122 lectures, 5 hours

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する