Vue.jsが面白そうだから学ぶ①ではレンダリング、条件分、ループ分を書きました。
②ではその他のディレクティブやコンポーネントについて記載できればと思います。

属性やクラスへのバインド

属性やクラスへの値のバインドしたい場合、v-bindを使用します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue</title>
  <style>
    .font-weight{font-weight: bold;}
  </style>
</head>
<body>
  <div id="app">
    // タイトル属性に「Hello JavaScript」がバインドされる
    <button v-bind:title="title">JavaScript</button>
    // h2タグのクラスに「font-weight」がバインドされる
    <h2 v-bind:class="className">ここは太字</h2>
  <div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js

new Vue({
  el: '#app',
  data: {
    title: 'Hello Javascript',
    className: 'font-weight'
  }
});

これでtitle属性に「Hello JavaScript」がバインドされるかと思います。
クラスには「font-weight」がバインドされスタイルが適用されます。

さて、今まで書いてきたディレクティブには実は省略した書き方があります。
v-bindであれば、

<!-- 完全な構文 -->
<a v-bind:title="〇〇〇"> ... </a>

<!-- 省略記法 -->
<a :title="〇〇〇"> ... </a>

v-onであれば、

<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

という感じです。覚えておくといいですね。

算出プロパティ

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

たとえば上記のようなことをしたい時、やりたいことが複雑になるとコードも複雑になり
かつ肥大化していくと思います。そのような場合は算出プロパティを使うと便利です。

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 算出 getter 関数
    reversedMessage: function () {
      // `this` は vm インスタンスを指します
      return this.message.split('').reverse().join('')
    }
  }
})

算出プロパティはcomputedプロパティの後に記載できます。
メソッドと異なる点が気になるかと思いますが、それは、算出プロパティは依存関係にもとづきキャッシュされるという違いです。
依存関係が更新された場合のみ再評価されるのでこの例でいうと、messageが変わった
タイミングで再度reversedMessageは呼び出されます。
それ以外はキャッシュが適用されます。

コンポーネントを作ってみる

次はカスタムコンポーネントを作ってみます。
Todoリストを作成するとしてTodo一覧を表示する際のリストをコンポーネント化してみます。

<ul>
  <li>todo1</li>
  <li>todo2</li>
  <li>todo3</li>
</ul>

/* ↑が以下のように書けるようにする */
<task-list></task-list>

まず、カスタムコンポーネントの作成方法ですが、Vueインスタンスのcomponent関数に色々指定します。
第一引数にコンポーネントの名前を指定しましょう。それ以降はテンプレートや渡すデータを指定します。

Vue.component('task', {
  template: '<li><slot></slot><li>'
});

new Vue({
  el: '#app'
})

ここまででリスト表示するならHTMLで以下のように記載できます。

<div id="app">
  <task>todo1<task>
  <task>todo2<task>
  <task>todo3<task>
</div>

リストの数が動的でも対応したいのでv-forを使って繰り返し表示にします。

// 先ほど作成した<task>の部品を使ってさらに部品を作ります。

Vue.component('task-list', {
  template: '<div><task v-for="task in tasks">{{ task.title }}<task></div>',

  data: {
    tasks: [
      {title: todo1, complete: true},
      {title: todo2, complete: false},
      {title: todo3, complete: false},
    ]
  }
});


Vue.component('task', {
  template: '<li><slot></slot><li>'
});

new Vue({
  el: '#app'
})

<task>コンポーネントを利用してtask-listコンポーネントを作成しました。
これで以下のように書けるようになっているはずです。

<div id="app">
  <task-list></task-list>
</div>

カスタムコンポーネント、便利ですね。部品をスマートに書けるようになるので
たくさん実装して練習してみたいと思います。

ということで続きは③で記事にしたいと思います。

Vue.jsが面白そうだから学ぶ②

属性やクラスへのバインド

算出プロパティ

コンポーネントを作ってみる