Vue.jsについて

Vue.js とは

Angular, Reactと並ぶ近年人気の webフロントエンド用フレームワークのことです。
MVVMで開発でき、コンポーネントという単位でアプリケーションを分割できます。
仮想DOMを使用している。

公式

最小限の書き方の例

<div id="app">
  {{ message }} <!-- {{ message }} が Vueデータに置換される -->
</div>
new Vue({
  el: '#app', /* #app 要素に対して Vue を適用する */
  data: {
    message: 'Hello Vue.js!' /* message という名前のデータを定義する */
  }
})

以下のサイトから環境構築無しで試すことができます。
codesandbox
使い方はcreatesandboxからvueを選ぶとテンプレートが作成されます。

Data Options

data

データを保持する。

<script>
new Vue({
  data: {
    message: 'Hello Vue.js!'
  }
})
</script>

props

コンポーネントにパラメータを引き渡す。

watch

データの変動を監視します。データ変動時にコールバック関数が呼ばれ、引数には変更前の値と、変更後の値が渡されます。

var vm = new Vue({
  data: {
    hoge: '',
  },
  watch: {
    hoge: function(newVal, oldVal) {
      //処理
    }
  }
})

methods

v-on のイベントハンドラとして呼び出されるメソッドを定義します。

<button @click="buttonClick('hoge')">hoge</button>

new Vue({
  methods: {
    buttonClick: function (message) {
      alert(message)
    }
  }
})

LifecycleHooks Options

Vueのインスタンスが生成されたり、更新されたりする際に呼ばれる関数。

<script>
new Vue({
  created: function() {
    console.log(this)
  }
})
</script>

Directives

v-* の形式のHTML属性で記述する。

テキストレンダリング v-text

テキストをレンダリングする。
中括弧2つで囲むことでも記述できます。(Mustache構文)

<span v-text="msg"></span>
<!-- 同じ -->
<span>{{msg}}</span>

HTMLレンダリング v-html

HTMLをレンダリングする。
v-textの場合はエスケープされるためhtmlタグを使用できないが、v-htmlの場合は使用できる。

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

条件付きレンダリング。
指定した条件に当てはまる場合のみ描画される。
条件に当てはまらない場合はhtmlの要素から消えます。

条件付きレンダリング v-show

条件付きレンダリング。
trueの場合のみ描画される。
v-ifと違いhtml上からは消えずにcssのdisplay:noneになります。

リストレンダリング v-for

オブジェクトを配列の個数分表示したりなどのループに使用します。

<ul>
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

属性のデータバインディング v-bind

属性のデータバインディングを行う。
v-bind:属性名で記述します。
:属性名で省略可能です。

<div :style="style">

フォーム入力バインディング v-model

フォーム入力とモデルの紐付けを行う。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

イベント v-on

イベント。
v-on:イベント名で記述する。
@イベント名で省略可能です。

<button @click="buttonClick">hoge</button>

Mustacheバインディングを隠す v-cloak

Vueインスタンスが用意されるまでの間表示しない。
{{ message }}のように表示されるのを防ぐことができる。

<div v-cloak>
  {{ message }}
</div>

一度だけ描画 v-once

一度だけ描画が行われ、Modelが変更されても表示内容は更新されない。

<div v-once>
  {{ message }}
</div>

TypeScript対応

<script lang="ts">にする。
vue-property-decoratorを使う。

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class ComponentName extends Vue {
}
</script>