【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>
オブジェクトと配列はよく使うから、忘れないようにしないと。