Vue.js　テキストのバインディング

Vue.jsの学習メモ。

jsstudy.hatenablog.com

テキストのバインディング

(p.36)

Vue.jsを使って、最も基本的な処理である、画面に文字を表示させるという処理を実現してみます。

（サンプルコード）

https://cr-vue.mio3io.com/guide/chapter1.html#テキストのバインディング

HTML（index.html）

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.js App</title>
  <link href="main.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <!-- この#appの内側にテンプレートを書き込んでいく -->
    <p>{{ message }}</p>
  </div>
  <script src="../js/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>

JavaScript（main.js）

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

これで「{{ message }}」のところに「Hello Vue.js!」という文字列が埋め込まれて、表示されました！

めでたし、めでたし…。

Vue.jsの表示場所（Vueルートインスタンス）を追加実験

Vue.jsって、どんな動作をするんだろ？という素朴な疑問で、以下の実験をしてみました。

1個目の<div id="app">～</div>の他に、2個目の<div id="app2">～</div>を追加。
表示させる元ネタのデータとして、var app2 = new Vue({～})も追加。

HTML（index.html）

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.js App</title>
  <link href="main.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <hr>
  <div id="app2">
    <p>{{ message2 }}</p>
  </div>
  <script src="../js/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>

JavaScript（main.js）

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

var app2 = new Vue({
  el: '#app2',
  data: {
    message2: 'Another World!'
  }
})