Vue.js入門テキストのデータバインディング

Stylish young businesswoman working on her laptop in modern office

Vue.js入門テキストのデータバインディングについてプログラミング入門者向けに説明致します。

一部復習となりますが、画面に、「Hello Vue.js」と表示するプログラムを、テキストのデータバインディングにより、実装してみましょう。

動画で学習する。

まず、表示するテキストのデータを定義します。

DOMの更新を自動化するデータバインディングを行うには、
テンプレートで使用するすべてのデータは、リアクティブデータとして定義する必要があります。

リアクティブというのは、日本語でいうと、”反応的”といった意味になります。
わかりやすく、ざっくりと説明するなら、「各要素をつなげて反応的に変化させること」です。

具体例としてExcelでリアクティブな動きを見ることができます。

リアクティブデータというのは、このリアクティブな動きができるデータのことです。

それでは、リアクティブなデータの定義をしてみましょう。

アプリケーションで使用するデータを宣言するには、

dataオプションを使用します。
データオプションは、テンプレート側から、参照できる値を格納したオブジェクトです。

プロパティ名：値の形式で、列挙します。

new Vue({
el: '#app',
  data: {
  	message: 'Hello Vue.js!'
  }
})

次に、
テンプレートに、pタグを設置して、その中身に、dataオプションに定義したmessageプロパティの値をブラウザに表示する記述を行います。

<div id="app">
  <p>
    {{ message }}
  </p>
</div>

とします。

プロパティ名を、2重の中括弧で囲っているところに着目します。

これは、”Mustache（マスタッシュ）” 構文を利用した、テキスト展開になります。
Mustache（マスタッシュ）というのは、日本語でいうと、口ひげのことでです。
この2重カッコが、口ひげにも見えることから、”Mustache（マスタッシュ）” 構文と呼ばれます。

vue.jsでは、アプリケーションで使うデータを、データオプションで用意して、テンプレート側がでそれを参照することを行います。このようなデータ割り当ての仕組みがデータバインディングです。

ここまでできたら、JSFiddleのRUNボタンをクリックして、プログラムを実行するします。

Hello Vue.js! と表示されました。
ちなみに、ルートのテンプレートの外側は、Vue.jsの世界では無いので、
外側に、 {{ message }} とかくと、データバインディングが行われませんので、注意しましょう。

実際の描画部分のHTMLについて、確認します。

<div id="app">Hello Vue.js!</div>

”Mustache（マスタッシュ）” 構文、つまり、2重の中括弧で記述した部分が、dataオプションのmessageプロパティの値に、置き換わっていることがわかります。

テキストコンテンツの一部として、messageプロパティを、この部分に、データバインドしているからです。

このレクチャーでは、テキストのデータバインディングについて学習しました。

この記事では、Vue.js入門テキストのデータバインディングについて学習しました。

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