【学習メモ】動かして学ぶ！Vue.js 開発入門 その1

Vue.js の初心者向けの本が新しく出ていたので読みながらコード書きながら気になった箇所、覚えたい箇所をメモしていきます

ネコ本 やったのもあり、基礎的な部分は復習になりますが、よりわかりやすく説明されている箇所もあったので良い勉強になりそうです。

ネコ本との比較

2 章までしかしていませんが、ネコ本よりもこちらの本の方が難易度は低いと思います。
図解がフルカラーなこと、コード上の文法の上で平易な文章で図解が書かれているので、理解がしやすかったです。

例えば CSS や CDN、SPA、substr などの用語やメソッドの概要に関しても Tips 枠（コラム/メモ/ワンポイント）で説明がされているので、不明な人はそこも読んで、理解している人は飛ばしても OK な内容があります。

ネコ本は最後に CLI や SPA、モジュールなど詰め込みが目立ったように感じましたが、こちらは Vue.js のほんとうに基礎（さわり）で HTML/CSS/JavaScript をなんとなく分かる人であれば最後まで理解しながら読み進めれると感じます。（いまのところ）

なので本を読んで Vue.js を学ぶ人のステップとしては、
Vue.js 開発入門（この本、イヌ本？）→ ネコ本 → Vue.js 入門
が理解がスムーズにいくような気がします。

Chapter2 データを表示するとき

01 Vue インスタンスを作る：new Vue

new Vue({
  el: ,       // どのHTML要素とつながるのか
  data: ,     // どんなデータがあるのか
  methods: ,  // どんな処理を行うのか
  computed: , // どのデータを使って別の計算をするのか
  watch:      // どのデータを監視するのか
});

02 データをそのまま表示する：{{データ}}

データバインディング

「Vue インスタンスのデータが Web ページ上の表示と結合すること」をデータバインディングといいます。

ディレクティブ

ディレクティブとは、「要素に対して Vue がどんなことを行うかを指示する命令」のことで頭に v- がついています。

03 使えるデータの種類

<div id="app">
  <!-- 数値型 -->
  <p>{{ myNumber }}</p>
  <hr />
  <!-- 文字列型 -->
  <p>{{ myText }}</p>
  <hr />
  <!-- ブーリアン型 -->
  <p>{{ myBool }}</p>
  <hr />
  <!-- 配列 -->
  <p>{{ myArray }}</p>
  <p>{{ myArray[0] }}</p>
  <hr />
  <!-- オブジェクト型 -->
  <p>{{ myObject }}</p>
  <p>{{ myObject.name }}：{{ myObject.gender }}</p>
  <hr />
  <!-- JavaScriptで用意したデータ -->
  <p>{{ jsObject }}</p>
  <p>{{ jsObject[1].name }}：{{ jsObject[1].gender }}</p>
  <hr />
  <!-- データの出力 -->
  {{ $data }}
  <li v-for="(item,key) in $data">{{ key }}:{{ item }}</li>
</div>

var jsList = [
  { name: "Hanako", gender: "female" },
  { name: "Ichiro", gender: "male" },
  { name: "Tomoko", gender: "female" }
];
new Vue({
  el: "#app",
  data: {
    myNumber: 12345,
    myText: "Hello!!!",
    myBool: true,
    myArray: ["Taro", "Hanako", "Ichiro", "Tomoko"],
    myObject: {
      name: "Taro",
      gender: "male"
    },
    jsObject: jsList
  }
});

結果