ちょっと前からVue.jsに興味があり、ネット上のサンプルを元に動かしたりしてみました。

Vue.jsとAxiosとBacklogAPIを使って、Backlogプロジェクトからデータを取ってくる | テストウフ

ところが、サンプルをいじろうと思うとやっぱり分からないことが多くて、一度本をさらっと読んで入門しようと思い、『Learning Vue.js 2』という本を進めることにしました。


Learning Vue.js 2
Amazonで見る

本記事から学習ログを残していこうと思います。

Let’s go shopping!

買い物に行こう！という見出しだけれども、実際は「買うものリスト」をjQueryを使って実装した場合とVue.jsを使って実装した場合とを見比べて、Vueは短くて簡単だね！すごいね！を示していく。

Implementing a shopping list using Vue.js

app.js

var data = {
  items: ['Bananas', 'Apples'],
  title: 'My Shopping List'
};

new Vue({
  el: '#app',
  data: data
});

index.html

<div id="app" class="container">
  <h2>{{ title }}</h2>
  <ul>
    <li>{{ items[0] }}</li>
    <li>{{ items[1] }}</li>
  </ul>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="app.js"></script>

本で書いてあるのとは若干変えて、別途app.jsに書いてそれを読み込ませる形で動かしました。

これらのapp.jsとindex.htmlを同じディレクトリに置いて、あとはindex.htmlをブラウザで開くだけ。とても簡単です。

Vue.jsに触れてみて良いなと思ったのがこの簡単さです。npm使ったインストールをひたすらやらされて、でも依存関係が云々でうまくいかず、一番「あんなこといいな、できたらいいな」を持ってワクワクしている時間を失敗続きの環境構築で浪費するの辛いですよね。

ポイント

  • CDNからvueを使えるので、ちょっと試してみる上では楽。
  • html内、{{}}で囲った箇所はvueのdataで定義した内容を参照している。

Analyzing data binding using developer tools

ブラウザの開発者ツールでスクリプトの開始時点にブレークポイントを置く。

dataオブジェクトは、リアクティブデータバインディングとして用意される。

メモ：データバインディング(data binding)とは

データ バインディングとは、アプリケーションの UI とビジネス ロジックを関連付けるプロセスです。 バインディングが適切に設定されており、データが適切な通知を提供する場合、データの値が変更されると、データにバインドされている要素にその変更が自動的に反映されます。 –データ バインドの概要 | MSDNより

Vue.js自体が「データバインディングライブラリ」？

お手軽データバインディングライブラリ「Vue.js」を使いこなそう（基礎編） (1/4)：CodeZine（コードジン）

本書では

Data binding: changing properties affects the View immediately

と書いてある。なるほど。