Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

Vue.js

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

  • 基本的には普通のコンポーネントと同じ
  • パーツを構成するために必要な HTML・CSS・JSをひとまとめにして独立した1つのファイルで扱うのが、この単一ファイルコンポーネント
  • templatescriptstyleで構成される
  • 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>
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away