【Vue.js】ディレクティブ省略記法メモ

Vue.jsではよく利用する構文は省略して記述することができる。

久しぶりにVue.jsに触ると忘れてしまうのでメモ。

v-bind: → :

v-bindディレクティブは、Vue.js内で使われているデータを
画面に埋め込む時によく利用するディレクティブ。

<!-- index.html -->
<div id="example">
  <!-- どちらも同じ意味 -->
  <a v-bind:href="url">ダミーリンク</a>
  <a :href="url">ダミーリンク</a>
</div>
<script src="main.js"></script>

const app = new Vue({
  el: '#example',
  data: {
    url: 'https://example.com/',
  },
});

ちなみに普通に画面上に表示するだけなら{{ url }}という記法を使えば良い。

v-on: → @

v-onディレクティブは要素のイベントを処理するためのディレクティブ。

引数で指定したイベントが発生すると属性値の式が実行される。

よく利用するのは、v-on:click="hogeMethod"というふうにクリックイベントを登録するやつ。

以下は「テキストエリアの文字を書き換えると、画面にすぐに反映される」という例である。

基本的な構文は「v-bind:属性名=JavaScriptの式」という感じである。

<!-- index.html -->
<div id="example">
  <input v-bind:value="name" v-on:input="name = $event.target.value">
 <p>{{ name }}</p>
</div>
<script src="main.js"></script>


<!-- 上と同じ意味 -->
<div id="example">
  <input v-bind:value="name" @input="name = $event.target.value">
 <p>{{ name }}</p>
</div>
<script src="main.js"></script>

const app = new Vue({
  el: '#example',
  data: {
    name: 'あああ',
  },
});

まとめ

• v-bind:href="url"→:href="url"
• v-on:click="methodName"→@click="methodName"