vue.js - What does the colon represent inside a VueJS/Vuetify/HTML component tag

Question

I am using Vuetify, so this could be either a VueJS, Vuetify or even HTML question, but my component looks like this :

<v-list-tile 
  v-for="item in menuItem.items" 
  :key="item.type" 
  :style="`background: ${item.colour}`" 
  :html="item.type">
</v-list-tile>

question from:https://stackoverflow.com/questions/65842319/html-vue-js-what-does-mean-before-an-attribute

Answer 1

:key is a shorthand for v-bind:key:

The v- prefix serves as a visual cue for identifying Vue-specific attributes in your templates. This is useful when you are using Vue.js to apply dynamic behavior to some existing markup, but can feel verbose for some frequently used directives. At the same time, the need for the v- prefix becomes less important when you are building a SPA where Vue.js manages every template. Therefore, Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on

https://v1.vuejs.org/guide/syntax.html#v-bind-Shorthand