【Vue.js】Vue.jsメモ （基本用語、テキストバインディング、繰り返し）

そろそろフロントエンドも触っておくか、と思い「基礎から学ぶVue.js」を購入。（表紙の猫かわいい）

基礎から学ぶ Vue.js

復習を兼ねて、勉強したことをツラツラと書き出していこうと思います。
まだchapter2までしか進んでいませんが、使いやすそうだなという感想。

Vue.jsとは

Vue.js - Wikipedia

• 2014年に登場した、Javascriptのフレームワーク
• 仮想DOMを採用しており、パフォーマンスに優れている
• 双方向バインディングに対応
• コンポーネント指向

基本用語

• テンプレート
  • DOMを構築するための機能
  • HTMLベースである
  • <button v-on:click="clickHandler">クリック</button>
• ディレクティブ
  • v-bind, v-on など、v-からはじまる属性のこと
  • テンプレートとロジック（プログラム）を紐付けるためのもの

基本構文

テキストバインディング

<div id="app">
    <p>{{ message }}</P>
</div>

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

• {{ }} の中にプロパティ名を書くと、値がレンダリングされる。
• 上記のコードは実際に <p>Hello World!</p> とレンダリングされる。
• マスタッシュ記法 と呼ばれている。
  • マスタッシュ・・・「口ひげ」という意味らしい。なるほど、確かに。
• なお、{{ }} に書けるのは「式」であり「文」は書けない。

繰り返し

<div id="app">
    <ul>
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
</div>

var app = new Vue({
    el: "#app",
    data: {
        items: ['Vue', 'React', 'Anguler']
    }
})

• 繰り返しレンダリングを行いたいタグに v-for ディレクティブを記載する。
• v-for に続けて、[一時変数] in [配列] の形式で記載する。（for..in の形式）
  • v-for="item in items" とも書け、要素に更新が発生しない（単にレンダリングされるだけの）場合はこの書き方でOK。
• :key は v-bind:key の略。
  • v-bind については割愛。（属性と紐付けるためのディレクティブ）
  • 要素に更新が発生する場合、一意な値をキーに割り当てることで効率的にレンダリングが行われる。
  • 上記のコードでは index(添字)をキーとしているが、添字はデータに対して不変ではない（配列の添字としては一意だが）ため望ましくない。
  • 例えばユーザデータの配列であれば、ユーザIDなどをキーに指定するのがよい。

上記のコードは以下のようにレンダリングされる。

<ul>
  <li>Vue</li>
  <li>React</li>
  <li>Anguler</li>
</ul>

とりあえずここまで。