How to easily remember Vue shortcuts

If you’ve come across the @ and : symbol in Vue and you have forgotten what they mean, then there is an easy way to remember them.

Imagine @ looking similar to an ‘o’ (aka the letter). This letter is contained in v-on. Therefore v-on can be replaced with @. We can also get rid of the colon as well. eg

v-on:click => @click

v-bind is used to set the value of an attribute. Here, The ‘i’ in the word bind looks like the top part of ‘i’. eg

v-bind:href => :href
v-bind:input => :input
v-bind:value => :value

So whenever you see an ‘i’, think of a colon and just use that. Whenever you see an ‘o’, think of @.