基礎からメモ： Vue.js CH1-p38 テキストのバインディング

Vue.js

とりあえずテキストのバインディングから

[index01.html]

<body>
  <div id="app">
    <p>{{ message}}</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script src="main01.js"></script>
</body>

データの表示をしている二重中括弧で囲む記法をMustache(マスタッシュ)記法と呼ぶ。Vueインスタンスが保持するデータ（data）名をマスタッシュの中に書くことで、データと表示が同期する。

[main01.js]

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

console.log(app.message);

これで<p>Hello Vue.js!</p>と表示され、コンソールにもHello Vue.js!と出力される。 Vueインスタンスの外部からインスタンス・データにアクセスするときは、app.data.messageではなくapp.message。

  • HTML内にMustache(マスタッシュ)記法を使うことで、Vueインスタンスが保持するデータ（data）を表示し同期できる。
  • コンソールからVueインスタンスが保持するデータにアクセスするには、app.data.nameではなくapp.name。