Vue.jsのコロン(v-bind)とアットマーク(v-on)の使い方

プログラミング

Vue.jsのコードに時折コロン(:)やアットマーク(@)が出てきて戸惑う人がいるかもしれませんが、これは省略記法です。
それぞれ、v-bind、v-onを指しています。

Vueオブジェクトの変数や関数をHTML側から参照するために、v-bindやv-onを使用します。

以下、サンプルコードです。

【サンプルコード(v-bind)】

【実行結果(v-bind)】

以下のように、Vueオブジェクトの変数の値とHTMLを結びつけることができます。

【サンプルコード(v-on)】

【実行結果(v-on)】

以下のように、Vueオブジェクトの関数を呼び出すことができます。
これは、ボタン1とボタン2の両方で同じ動きになります。


いかがでしたでしょうか。

省略記法は公式チュートリアルにて説明されていますが、忘れた時に実務で出くわすと戸惑うと思います。
“:”は”v-bind”、”@”は”v-on”、というのは覚えておくと良いでしょう。

コメント

タイトルとURLをコピーしました