When to use colons in Vue

Colons (:) are used before attributes in Vue to bind a variable to a component.

For example:

vue
<template>
    <blogpost title = 'Hello' :content = 'text'></blogpost>
</template>

<script>
import blogpost from './blogpost'

export default {
    name: 'app',
    components: { blogpost },
    data(){
        return {
            text: 'This is a short blogpost'
        }
    }
}
</script>

---

Title

This is a short blogpost

---

If you didn't use colons, instead of displaying 'This is a short blogpost', you would display the word 'text'.

Using colons, allows you to add JavaScript as well.

For example:

vue
<template>
    <blogpost title = 'Hello' :content = "text.length > 10 ? 'Long text' : 'Short text'" ></blogpost>
</template>

---

Title

Long text

---

Note

With attributes such as v-for or v-if it doesn't makes sense to write semicolons, because you'll use always JavaScript expressions (you won't bind anything).