【Vue.js】v-bindディレクティブについて解説します。

なやむくん

Vue.jsでv-bindの使い方について初心者でもわかりやすく知りたい…。

などの疑問や悩みを解決してまいります。

この記事ではVue.jsで使用できるv-bindについて解説していきます。

初心者向けの記事となっていますので予めご了承ください。

Table of Contents

v-bindディレクティブとは

Vue.jsでは、何らかデータとDOMの要素を結びつけるためにv-bindディレクティブが使用されます。

v-bindディレクティブは、HTMLの属性に対して動的な値をバインディング（結びつけるの意味）する際に利用されます。

つまり要素の属性にJavaScriptで指定した定数や変数、何らかの式を埋め込み、それによって動的な変更を実現することができます。

実際にv-bindディレクティブを使ってみよう

それでは実際に使ってみましょう。

今回2つのVueファイルを用意しました。ページに表示するApp.vueとコンポーネントファイルのLearnVue.vueです。

<script setup>
  import LearnVue from './components/LearnVue.vue';
</script>

<template>
  <LearnVue /> 
</template>

<style scoped></style>

<script setup>
  const author = 'みつた'
  const blogName ='30歳で異業種からIT企業に転職しました。'
</script>

<template>
  <p>著者：{{ author }}</p>
  <p>ブログ名：{{ blogName }}</p>
  <p>URL：<a href="https://mitsutano-oshiro.com/" target="_blank">https://mitsutano-oshiro.com/</a></p>
</template>

<style scoped>
p + p {
  margin-top: 10px;
}
</style>

現在ページに表示される内容は以下の通りになります。

マスタッシュ構文

LearnVue.vueのscriptタグの中にauthor定数とblogName定数の2つの定数を用意しています。

それぞれ著者名「みつた」の値とブログ名「30歳で異業種からIT企業に転職しました。」の値を持っています。

その定数をtemplateタグ内の{{ }}の中に入れてページのその値を表示しています。

この{{ }}をマスタッシュ構文といいます。

Vue.jsではこのマスタッシュ構文の中に定数や変数、何らかの式を記述することでその値を表示させることができます。

v-bindディレクティブの使用

マスタッシュ構文の中に定数や変数、何らかの式を入れることでその値を表示させることを前述で解説しました。

それでは現在表示されているURLも定数に入れて、その定数名をhref属性内にマスタッシュ構文で入れたら動的に値を入れることができるのではないかと思います。

以下のような形ですね。

<script setup>
  const author = 'みつた'
  const blogName ='30歳で異業種からIT企業に転職しました。'
  const url = 'https://mitsutano-oshiro.com/'
</script>

<template>
  <p>著者：{{ author }}</p>
  <p>ブログ名：{{ blogName }}</p>
  <p>URL：<a href="{{ url }}" target="_blank">https://mitsutano-oshiro.com/</a></p>
</template>

ハイライト入れている箇所が今回追記した箇所になります。

なやむさん

あれ、この通り書きましたけどページ遷移されませんよ…。

みつた

実はこの書き方は間違いなんです。

属性に対して動的な値を入れる場合は、v-bindディレクティブを使用します。

以下のようにハイライト部分のコードを修正してください。

<script setup>
  const author = 'みつた'
  const blogName ='30歳で異業種からIT企業に転職しました。'
  const url = 'https://mitsutano-oshiro.com/'
</script>

<template>
  <p>著者：{{ author }}</p>
  <p>ブログ名：{{ blogName }}</p>
  <p>URL：<a v-bind:href="url" target="_blank">https://mitsutano-oshiro.com/</a></p>
</template>

v-bindディレクティブはこのように属性名の前にv-bind:と記述し、属性値は'か"で囲んでください。

これで動作するはずです。

よろこびくん

ちゃんとリンクできました！

このようにHTMLの属性に対して動的な値をバインディングするにはv-bindディレクティブが使用できます。

またv-bindディレクティブは以下のように省略して記述することもできます。

<script setup>
  const author = 'みつた'
  const blogName ='30歳で異業種からIT企業に転職しました。'
  const url = 'https://mitsutano-oshiro.com/'
</script>

<template>
  <p>著者：{{ author }}</p>
  <p>ブログ名：{{ blogName }}</p>
  <p>URL：<a :href="url" target="_blank">https://mitsutano-oshiro.com/</a></p>
</template>

属性名の前に:を記述するだけでもバインディングすることができます。

こちらの記述でも正常に動作すると思いますので試してみてください!