Vue.js の使い方（基礎編）

最近 Vue.js を使い始めまして、基礎的なことを勉強したのでまとめておきます。

＊目次

data
computed
v-model
v-if
v-for
v-on
v-bind
v-show

＊参考

＊data

Vueインスタンスのためのデータオブジェクトです。
コンポーネントを定義している場合は、初期データを返すようにする必要があります。

＊computed

算出プロパティを定義することができます。
算出プロパティとはあるデータや別の算出プロパティから計算される新たなデータのことを指します。

<template>
  <div>
    <p>{{ this.width }} の半分は {{ halfWidth }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        width: 800
      }
    },
    computed: {
      halfWidth: function() {
        return this.width / 2
      }
    }
  }
</script>

＊v-model

インスタンス上のデータとinput要素の入力値を同期することができます。（双方向データバインディングと呼びます）

<template>
  <div>
    <input v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
</script>

＊v-if

条件分岐付きで処理を実行します。
下記プログラムは、ボタンによってshowの値がtrue/falseで切り替わり、trueだった場合に「Hello Vue!!」を表示します。

<template>
  <div>
    <button v-on:click="show=!show">切り替え</button>
    <p v-if="show">Hello Vue!!</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    }
  }
</script>

＊v-for

配列だけでなく下記のようなオブジェクトでも使うことができる
value と key にそれぞれ

data: {
 vue: {
  type: 'A',
  lang: 'English',
  author: 'Jon'
 }
}

取り出し

<li v-for="(value, key) in datas">
 {{ key }}: {{ value }}
</li>

＊v-on

イベントに対して処理を紐づけることができます。@で略して書くことができます。

<template>
  <div>
    <button @click="countUp">add count</button>
    <div>{{currentCount}}</div>
  </div>
</template>

<script>
  export default {
    methods: {
      countUp() {
        this.$store.dispatch("plusCount")
      }
    }
  }
</script>

v-on:change でchangeイベントが発生した場合に、新しい値を反映することができます。
`$event`でイベントオブジェクトを使うことができます。
v-bind とv-on の処理は、v-modelで書き直すことができます。

<template>
  <div>
    <input v-on:change="message = $event.target.value">
    <div>{{ message }}</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         message: 'Hello'
      }
    }
  }
</script>

また、v-on はv-on.change.prevent など . で修飾子を付けて実行することができます。

prevent --> ページがリロードされないようにします。
stop --> クリックイベントの伝搬を止めます。
self --> 子要素のときは実行されないようにします。

＊v-bind

データをclassやstyle属性の値に紐づけることができます。
下記はv-bindでstyleとpickedプロパティを紐づけ、ラジオボタンが選択されると動的に色が変わります。

<template>
  <div>
    <input type="radio" value="red" v-model="picked">赤
    <input type="radio" value="blue" v-model="picked">青
    <p v-bind:style="{color:picked}">色が変わります</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        picked: 'blue'
      }
    }
  }
</script>

＊v-show

値がfalseだったときに要素を非表示にします。
v-if も似た機能をしていますが、v-showは要素「display: none」をしてv-if は要素を削除します。読み込む要素が多い場合は、v-ifが適しています。

<template>
  <div>
    <ul>
      <li v-for="todo in todos">
        <input type="checkbox" v-model="todo.completed">
        <span>{{ todo.text }}</span>
        <strong class="red" v-show="todo.completed">
        Done!
        </strong>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
         todos: [
           { happiness: true, text: 'Vue.js enjoy!'},
           { happiness: false, text: 'Vue.js difficult..'}
         ]
      }
    }
  }
</script>

＊所感

Vue.js について調べているとよく出てくる computed や v-bind についてあまり理解できていなかったのですが、この機会に調べたり実際にコードを書いてみたりして理解することができました。
この他にもデータを監視するwatchや、子コンポーネントにデータを渡すpropsといった機能もあるので勉強しておこうと思います。

もぐもぐプログラミング