Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does the colon represent inside a VueJS/Vuetify/HTML component tag

Tags:

html

vue.js

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>

Take the :key for example, what does the colon (:) before the word key mean? And where can I find what values I can use ?

like image 734
thatOneGuy Avatar asked Jul 26 '18 14:07

thatOneGuy


People also ask

What does colon mean in Vue?

Using a colon, or v-bind, you tell Vue that the contents of the attribute, or prop, is dynamic. This means it can be a variable, a javascript expression or function.

What are the 3 parts of a component in Vue?

Components in Vue are composed of three parts; a template (which is like HTML), styles and JavaScript. These can be split into multiple files or the same .

What is component tag in VUE JS?

<component> is a special vue element that is used in combination with the is attribute. What it does is to conditionally (and dynamically) render other elements, depending on what is placed inside the is attribute. <component :is="'card'"></component>

What is V HTML in VUE JS?

The v-html directive is a Vue. js directive used to update a element's inner HTML with our data. This is what separates it from v-text which means while v-text accepts string and treats it as a string it will accept string and render it into HTML.


1 Answers

: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

like image 71
dziraf Avatar answered Sep 20 '22 17:09

dziraf