1. hidache

    No comment

    hidache
Changes in body
Source | HTML | Preview

概要

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

Vue.js

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

基本的には普通のコンポーネントと同じです。とてもシンプルに書けば、単一ファイルコンポーネントは以下のようになります。
「パーツを構成するために必要な HTML・CSS・JSをひとまとめ に」して独立した1つのファイルで扱うのが、この単一ファイルコンポーネントです。
.vueファイルで作られるコンポーネントは以下のようになります。

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

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

<style scoped>
  .say-hello {
    font-weight: bold;
  }
</style>
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

  • コンポーネント内で使用する関数は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('')
    }
  }
})

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

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>