属性のデータバインディング v-bind – Vue.js入門

この、属性のデータバインディング v-bind について学習します。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポート記事です。

v-bind 例題

テキスト入力の入力欄に、HelloVue.jsと表示
dataオプションに指定した、データをデータバインディングする

v-bind 回答

それでは、実際にコードを書いていきましょう。
空のルートテンプレートをマウントとした
状態からはじめます。

それでは、まず、
inputを配置します。

HTML

<div id="app"><input type="text" /></div>

dataオプションに messageプロパティを用意して、値はhello Vue.jsとします。

JS

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

input に文字列を設定したするには、value属性に値を設定するします。
HTMLに直書きして値を設定してする場合には、こんな感じで書きます。

<input type="text" value="Hello" />

出力に、Helloと表示されました。

消しておきます。

つぎに、データバインディングで、inputのvalueに値を設定します
HTML

<div id="app"><input type="text" value="{{ message }}" /></div>

inputのvalueへのデータバインディングですが、いままでの学習を踏まえると、２重の中括弧のMustache（マスタッシュ）構文で、書きたくなってしまいます。

しかしながら、属性にマスタッシュ構文は使用することはできません。

展開されないで表示されてしまうとともに、consoleにエラーが表示されます。

Mustache（マスタッシュ）構文は、テキストコンテンツのための記法のため、属性に使用できないからです

属性へのデータバインディングには、v-bindディレクティブを使います。

<input type="text" v-bind:value="message" />

属性valueの前に、v-bind:をつけます。
属性の値には、dataoptionに設定していた、プロパティー名messageを記述します。

今度は、inputのvalue属性にmessageプロパティをバインドできて、
inputの入力欄に、Hello Vue.js!と表示されました。

実際にレンダリングされる、HTMLも確認してみましょう。
Hello Vue.js!のところで、右クリック、検証をクリックします。

<input type="text" value="Hello Vue.js!" />

動画で学習する

ソースコード

まとめ

属性へのデータバインディングには、マスタッシュ構文ではなくて、v-bindディレクティブを使用してください。
属性のデータバインディング v-bind について学習しました。

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

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

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

今すぐ詳細を確認する