Vue.jsの基本的なディレクティブまとめ

v-html

データをhtmlとして、そのまま出力できる。
クロスサイトスクリプティングに気をつける。
ユーザーから入力されたものを表示しないようにすること。

v-once

一度だけ描画する。
一度描画されたあとは、あとで内容が書き換わることがないです。

v-bind

属性を指定して、データを出力させることができる。

<a v-bind:href="url">Google</a>

<!-- このように省略して書くことも可能 -->
<a :href="url">Google</a>

<script>
new Vue({
  el: "#app"
  data: {
    url: 'https://google.com'
  }
})
</script>

属性に関しても、Vueから指定することが可能

<a :[attribute]="google">リンク</a>

<!-- オブジェクト形式で書くことも可能 -->
<a v-bind="{ href: yahoo, id: number }">リンク</a>

<!-- 上を省略したもの -->
<a v-bind="yahooObject">リンク</a>

<script>
new Vue({
  el: "#app"
  data: {
    google: 'https://google.com'
    yahoo: 'https://yahoo.co.jp'
    number: 1
    attribute: 'href'
    yahooObject: {
      href: 'https://yahoo.co.jp',
      id: 1
    }
  }
})
</script>

v-on

イベントの検知

DOMの提供してるイベントを検知できる。
v-onで使用できるイベントのリストは以下のURLを参考にしましょう。
イベントリファレンス | MDN

<p v-on:click="countUp">{{ number }}回クリック</p>

<!-- 省略するときは@をつける --->
<p @click="countUp">{{ number }}回クリック</p>

<!-- イベントタイプを動的に指定してもいけます。--->
<p @[event]="countUp">{{ number }}回クリック</p>

<script>
new Vue({
  el: "#app"
  data: {
      number: 0,
      event: 'click'
    }
  },
  methods: {
    countUp: function() {
      this.number += 1
    }
  }
})
</script>

イベント修飾子

イベントについて、よく使うものに関しては、デフォルトでVueが用意してくれています。

<!-- preventによって、タグ本来の機能を停止 -->
<a v-on:click.prevent href="https://google">このリンクは発動しません。</a>

キー修飾子

キーアクションにおいても、よく使うものに関しては、デフォルトでVueが用意してくれています。

<!-- エンターキー押下時に、myFuncが呼ばれる -->
<input type="text" v-on:keyup.enter="myFunc" />

v-model

双方向データバインディングが行なえます。
リアルタイムで、データモデルが変更された際に変更させることができます。

<div id="app">
  <input type="text" v-model="message" />
  <h1>{{ message }}</h1>
</div>

<script>
new Vue({
  el: "#app",
  data: {
    message: 'Hello World!'
  }
})
</script>