省略できる、できるぞ！
素人目線で色々読み漁っていて困惑したのがディレクティブの省略です。
公式ガイドを最初から呼んでおけば良かったんですが、、。
これは大事だなと思ったのでまとめておきます！
v-bind
v-bindはhtmlの属性をリアクティブに更新できるディレクティブで、
例えば、以下のように
<a v-bind:href="url">click me</a>vueインスタンスがurlというデータを持っていた場合
<a href="https://xxx.com">click me</a>というようにデータがバインディングされたhtmlが出力されます。
そして本題のv-bind省略ですが以下のように記述することができます。
<a :href="url">click me</a>ご覧のとおりv-bindは:(コロン)だけで表現することが可能です。
属性にセミコロンがついていたらバインディングとおぼえましょう。
v-on
v-onはイベントを受け取ることができるディレクティブです。
例えば以下のようにすれば、クリックイベントを受けてフラグを切り替えるようなものができます。
<button v-on:click="flag = !flag">Change flag</button>
<div>{{ flag }}</div>そしてそのv-onの省略は以下のように記述することができます。
<button @click="flag = !flag">Change flag</button>
<div>{{ flag }}</div>上記のように、v-onは@をイベントの直前に付けることで表現できます。
英語的にat the eventで覚えると覚えやすいですね！
それでも、あれ、なんだったけってなる
理解しても忘れちゃいますよね。
こればっかりは悩まないようになるまで手を動かして身につけるしかないですね。
頻出だから省略できるようになっているはずでしょうし。
書いて慣れていこー、オー！
コメント