【Vue.js】v-bindを基礎から学ぶ

Vue.jsを学んでいる中で、ディレクティブでも重要なv-bindについて言語化するために、シンプルかつ分かりやすさを心掛けて記事化しました。

v-bindとは？

まず、頭に「v-」が付くと、これはVue.jsが用意しているディレクティブ・特別な属性であることを示しています。v-text,v-modelなどディレクティブには色々と種類がありますが、ここではv-bindについて学びます。v-bindにより要素の属性をバインディング、つまり縛ることができます。

いつ・どのように使うのか？

ではこのv-bindをいつ使うのか、例を挙げますと以下のようにHTMLの内部で{{ }}(マスタッシュ構文)を使用した場合、

誤

<div id="app">
 <a href="{{ url }}">Google></a>
</div>

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

このように書くとGoogleを押下しても{{ url }}というリンク先に飛ばされてしまい、意図していない結果になってしまいます。

ここではマスタッシュ構文ではなく、Vueが用意しているv-bindを使うことにより正しくリンク先を表示させることができます。

正

<div id="app">
 <a v-bind：href="url">Google></a>
</div>

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

以下のような省略形でも表記可能です。私は慣れていないのでv-bind表記を使用します。

省略形

<a :href="url">Google></a>

v-bind時には{{ }}(マスタッシュ構文)ではなく、単に""内にurlを入れるということに気をつけてください。

まとめ

このように、v-bindというディレクティブを利用することで、JSにより動的に変化させることができる、というものでした。
ディレクティブには、v-on,v-model,v-if,v-forなど様々ありますので、随時まとめていきます。