Vueの省略記法 " : "


会社で Vue.js が浸透しつつあります。
そしてまだ Vue.js に慣れないなか、先輩が書いた Vue のテンプレートのHTMLタグ中に「:class="〇〇"」や「:href="〇〇"」という書き方が頻繁に出てきました。属性の前に「 : 」がなぜかついてるんです。そこで、「: vue.js」や「vue :とは」で調べて見たところ、中々欲しい情報が出てこない...。なので先輩に聞いてみました。今回はその覚書を簡単に残しておきます。

:属性="〇〇〇" とは

「:属性="〇〇〇"」とは「v-bind:〇〇」の省略記法でした。公式サイトに詳細に書いてありました。

v-bind とは

HTMLタグの属性に対してデータバインディングする時に使う記法です。

データバインディング とは

データバインディング(Data Binding)とは、直訳すると「データ結合」です。例えば下記コードだと v-bind を使うことで data:{} 内の値と結びつけることができ、「好きな食べ物はアボカドです」というリンク付きテキストを表示することができます。

<div id="js-favorite-app">
  <p><a v-bind:href="url">好きな食べ物は、{{food}}です。</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script>
  new Vue({
    el: '#js-favorite-app',
    data: {
      url: 'https://rachicom.net/frontend/avocado-css.html',
      food: 'アボカド',
    },
  });
</script>
表示結果

他にも省略記法としては @click を省略した @ もありました(公式サイト参照)。今回は簡単な記事になってしまったので、色々調べてみて理解しやすかったサイトをピックアップしておきます。

読んでいてわかりやすかったサイト


タグ