【Vue.jp】テンプレートとオプション

テンプレートとは

テンプレートはHTMLベースのテンプレート構文を使用した、描画部分の記述。

ルートのテンプレート

テンプレートの中で最上位に位置するもの。
HTMLのbodyタグ内であればどこでも作れる。

<div id="vm"> // これがルートのテンプレート

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

オプション

Vue.jsにマウントする要素。
elはアプリケーションを紐付ける要素セレクタを意味する。ellementの省略。
dataはアプリケーションで使用するデータを宣言する。

var vm = new Vue({
  // オプション名: 値
  el: '#app',  // カンマを忘れない
  data: {
    // プロパティ名: '値'
    comment: 'Hello Vue.js!'
  }
})

データバインディングの送り先

マスタッシュ構文を使って宣言したデータを展開する。
{{ データオプションのプロパティ名 }}を使って書く。

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

dataオプションでオブジェクトや配列要素を使う

それぞれの書き方はこうなる。

var vm = new Vue({
  el: '#vm',
  data: {
    member: { //オブジェクト
      nickname: 'Yasagori',
      age: '31'
    },
    pets: ['koko', 'maru', 'sasuke'] //配列要素
  }
})

オブジェクトで「Yasagori」、配列要素の「maru」を出力する場合はこう書く。

<div id="vm">
  <p>
    {{ member.nickname }} //オブジェクトはカンマで繋げる
  </p>
  <p>
    {{ pets[1] }} //配列要素は[]で指定
  </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

オブジェクトと配列はよく使うから、忘れないようにしないと。