【学習メモ】基礎から学ぶ Vue.js その1

基礎から学ぶ Vue.js という本を読みながら Vue.js を触り始めたのでメモしておきます。
すべては長そうなのでポイントだけにしようと思いますが、とりあえず 2 章までで使いそうなものは改変して書こうと思います。

• 第 1 章 Vue.js とフレームワークの基礎知識
• 第 2 章 データの登録と更新

読み込み

CDN の場合は公式から最新バージョン

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

Hello world

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

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello world"
  }
});

コンソール

console.log(app.message); // Hello world

オブジェクトから

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

var app = new Vue({
  el: "#app",
  data: {
    item: {
      message: "Hello world"
    }
  }
});

下記にすると文字数を出力

<div id="app"><p>{{ item.message.length }}</p></div>

ループ（リスト）

<div id="app">
  <ol>
    <li v-for="item in list">{{ item }}</li>
  </ol>
</div>

var app = new Vue({
  el: "#app",
  data: {
    list: ["りんご", "ばなな", "いちご"]
  }
});

下記にするとりんごを出力

<div id="app"><p>{{ list[0] }}</p></div>

配列への追加

app.list.push("おれんじ");

ループ（オブジェクトから）

<div id="app">
  <ul>
    <li v-for="item in list">
      <p>ID:{{ item.id }}</p>
      <p>NAME:{{ item.name }}</p>
      <p>PRICE:{{ item.price }}</p>
    </li>
  </ul>
</div>

var app = new Vue({
  el: "#app",
  data: {
    list: [
      { id: 1, name: "りんご", price: 100 },
      { id: 2, name: "ばなな", price: 200 },
      { id: 3, name: "いちご", price: 300 }
    ]
  }
});

下記にすると1〜15まで連番で出力

<div id="app">
  <p><span v-for="item in 15">{{ item }}</span></p>
</div>

下記にすると1,5,10,15が出力

<div id="app">
  <p><span v-for="item in [1,5,10,15]">{{ item }}</span></p>
</div>

属性のバインディング

<div id="app">
  <p><input type="text" v-bind:value="message" /></p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello world"
  }
});

クラスのバインディング

クラス名にハイフン、アンダースコアがある場合は'で囲う

<div id="app">
  <p v-bind:class="{isActive:isActive,'js-active':jsActive}">りんご</p>
</div>

var app = new Vue({
  el: "#app",
  data: {
    isActive: true,
    jsActive: true
  }
});

オブジェクトでも可能

<div id="app"><p v-bind:class="classObject">りんご</p></div>

var app = new Vue({
  el: "#app",
  data: {
    classObject: {
      isActive: true,
      "js-active": true
    }
  }
});

条件分岐（v-if,v-show）

<div id="app">
  <div v-if="ok">`ok: true`の場合出力される</div>
  <div v-show="ok">ok: true`の場合出力される</div>
</div>

var app = new Vue({
  el: "#app",
  data: {
    ok: true
  }
});

v-if vs v-show

一般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。 そのため、とても頻繁に何かを切り替える必要があれば v-show を選び、条件が実行時に変更することがほとんどない場合は、v-if を選びます。

条件分岐（<template>）

<div id="app">
  <template v-if="ok">
    <div>
      <h1>Vue.js</h1>
      <p>Hello world</p>
    </div>
  </template>
</div>

var app = new Vue({
  el: "#app",
  data: {
    ok: true
  }
});

条件分岐（v-if,v-else-if,v-else,）

<div id="app">
  <div v-if="type === 'A'"><p>`type: 'A'`の場合出力される</p></div>
  <div v-else-if="type === 'B'"><p>`type: 'B'`の場合出力される</p></div>
  <div v-else><p>すべての条件を満たさなかった場合出力される</p></div>
</div>

var app = new Vue({
  el: "#app",
  data: {
    type: "A"
  }
});