Much of this is taken from https://www.vuemastery.com/courses/intro-to-vue-3/
| Term | Shorthand | Use | Example |
| v-bind | : | Dynamically binds an html attribute to an expression | v-bind:src=“image” where image is a data item or {{}} |
| v-if | N/A | Adds or removes an element from the DOM (slower) | v-if=“inStock” would show if the data item “instock” was a boolean true. Can also be used for logic e.g. v-if=“inventory > 10” |
| v-else | N/A | v-else is used if next to the v-if element for the not matched options. Not always needed. | v-else (doesn't need anything else) |
| v-else-if | N/A | v-else-f is used for the next logical condition, e.g. if-1 : > 100, if-2 <100 and > 10 etc. Not always needed. | v-else-if=“a < 100 && a > 10” |
| v-show | N/A | Changes the visibility in the DOM, element remains | v-show=“inStock” acts as v-if above. On false it adds a display:none to the style |
| v-for | N/A | Loops through lists, objects etc | v-for=“element in elementlist” and then in then list, element.property etc.Often used with key attribute to give list a unique ID |
| v-on:<event> | @ | Allow you to attach an event listener to an element | v-on:click=“js expression”. This can be a VueJS method e.g. v-on:click=“addToCart” |