プログラミング入門ナビ by Proglus（プログラス）

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

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

動画で学習する。

リアクティブとは

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

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

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

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

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

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

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

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

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

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

messageプロパティの値をブラウザに表示

次に、
テンプレートに、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について

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

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

マスタッシュ構文

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

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

完成品のコースコード

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

おわりに

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

オンライン講座「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.3 (3612 ratings)122 lectures, 5 hours

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

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

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

今すぐ詳細を確認する