概要

この記事では、Vue.jsで開発を始めるにあたって、押さえておくべきことを記述します。
Reactで開発してきた人に向けて、「これはReactでいう〇〇」という情報も共有します。

Vue.js

単一ファイルコンポーネント

基本的には普通のコンポーネントと同じ
パーツを構成するために必要な HTML・CSS・JSをひとまとめにして独立した1つのファイルで扱うのが、この単一ファイルコンポーネント
template、script、styleで構成される
nameオプションは、コンポーネント名を表現します

とてもシンプルに書けば、単一ファイルコンポーネントは以下のようになります。

example.vue

<template>
  <div class="say-hello">Hello!!<div>
</template>

<script>
  export default {
    name: 'Hello'
  }
</script>

<style scoped>
  .say-hello {
    font-weight: bold;
  }
</style>

import

他のコンポーネントをimportして使用したい場合には次のように記述

importして使用するコンポーネントをcomponentsオプションに登録する必要がある

'./Btn.vue'は既にあるものとします。

example.vue

<template>
  <Btn />
</template>
<script>
  import Btn from './Btn.vue'
  export default {
    name: 'Navigation',
    components: {
      Btn
    }
  }
</script>

data

Reactでいうstate
このコンポーネントが保持する状態を定義する

{
  el: '#app',
  data: {
    message: 'Hello world'
  }
}

上記のように実装すると、idが"app"のDOMの中で{{message}}というように展開する
ただし、elオプションで指定したDOMの中でだけでしか展開できないので注意

example.vue

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

methods

Reactでいうハンドラ
コンポーネント内で使用する関数はmethodsで定義 (後から、算出プロパティのcomputedについて記述するので、違いについて注意してください)

example.vue

<div id="example">
  <button v-on:click="greet">Greet</button>
</div>

<script>
  export default {
    name: 'Btn',
    methods: {
      greet: function () {
        console.log('こんにちは！')
      }
    }
  }
</script>

インラインメソッドハンドラ

メソッド名を直接指定する代わりに、インラインJavaScript式でメソッドを指定することもできる

example.vue

<div id="say">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

example.vue

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

elオプションには、id、もしくはひとつしかないclassを指定しないといけない
v-on:clickクリックされたときのイベント

computed

算出プロパティである

example.vue

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

上記のように、たくさんのロジックをテンプレートに詰め込んでしまうとコードが肥大化し、メンテナンスが難しくなる。
そういった場合に、複雑なロジックにはcomputedを利用します。

example.vue

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

example.vue

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

これで、コードが簡潔でわかりやすくなりましたね。

computed と methods の違いについて

実は、前述しているcomputed (reversedMessage) の代わりに、同じような関数をmethodsとして定義することも可能です。
じゃあ何の違いで使い分けるの？と思うかもしれませんが、それは、算出プロパティは依存関係にもとづきキャッシュされるという違いがあります。
算出プロパティは、依存するものが更新されたときにだけ再評価されます。これはつまり、message が変わらない限りは、reversedMessage に何度アクセスしても、関数を再び実行することなく、以前計算された結果を即時に返すということです。

v-if (条件付きレンダリング)

条件分岐は、v-ifを使う
下記の例は、画像URLが空じゃなければimg要素を表示する例

example.vue

<template>
  <img :src="item.image" v-if="item.image.length > 0" />
</template>

v-for

配列からリスト作りたいときはv-forを使う
mapを回す感覚
keyにはユニークな値をセットする
ただし、:keyというように独特な記述方法なので注意

example.vue

<template>
  <div class="greeting" v-for="item in greetings" :key="item.id">{{ item.text }}</div>
</template>
<script>
  export default {
    name: 'Hello',
    data: function () {
      return {
        greetings: [
          {
            id: 1,
            text: 'おはよう！'
          },
          {
            id: 2,
            text: 'こんにちは！'
          },
        ]
      }
    }
  }
</script>

Vue.jsをはじめるにあたって押さえておくべきこと

概要

Vue.js

単一ファイルコンポーネント

import

data

methods

インラインメソッドハンドラ

computed

computed と methods の違いについて

v-if (条件付きレンダリング)

v-for