Vue Basic Syntax

Vue's template syntax is based on standard HTML. This means all Vue templates are valid HTML and can be parsed by all standard browsers. Internally, Vue compiles templates into efficient, virtual DOM render functions. Combined with the reactivity system, when application state changes, Vue can intelligently calculate the minimum set of components that need re-rendering and apply the minimal number of DOM operations.

Text Interpolation

The most basic form of data binding is text interpolation, which uses "Mustache" syntax (double curly braces):

<script setup>
import { ref } from 'vue'

const msg = ref('Hello Vue!')
</script>

<template>
  <span>Message: {{ msg }}</span>
</template>

The content inside the double curly braces will be replaced with the value of the msg variable. When msg's value changes, this content will also update automatically.

You can also use any valid single JavaScript expression inside the double curly braces:

<script setup>
const number = ref(10)
</script>

<template>
  <p>Calculation result: {{ number + 1 }}</p>
  <p>Ternary expression: {{ number > 5 ? 'Yes' : 'No' }}</p>
</template>

Raw HTML

Double curly braces interpret data as plain text, not HTML. To output real HTML, you need to use the v-html directive:

<script setup>
import { ref } from 'vue'

const rawHtml = ref('<span style="color: red">This should be red.</span>')
</script>

<template>
  <p>Using text interpolation: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</template>

Security Warning: Dynamically rendering arbitrary HTML on your website is very dangerous because it can easily lead to XSS (Cross-Site Scripting) attacks. Please use v-html only when you completely trust the content. Never use v-html to render user-submitted content.

Attribute Binding

Double curly brace syntax cannot be used in HTML attributes. To bind dynamic values to attributes, we need to use the v-bind directive:

<script setup>
import { ref } from 'vue'

const elementId = ref('my-element')
const isDisabled = ref(true)
</script>

<template>
  <div v-bind:id="elementId">This is a div with a dynamic ID.</div>
  <button v-bind:disabled="isDisabled">A disabled button</button>
</template>

Because v-bind is very commonly used, it has a dedicated shorthand syntax, a colon (:):

<template>
  <div :id="elementId">...</div>
  <button :disabled="isDisabled">...</button>
</template>

Using JavaScript Expressions

For all data binding, Vue supports full JavaScript expression capabilities. This means you can perform calculations, call methods, etc. in templates.

<script setup>
const person = {
  name: 'John Doe',
  age: 30
}

function toUpperCase(str) {
  return str.toUpperCase()
}
</script>

<template>
  <p>{{ person.name.split('').reverse().join('') }}</p>
  <p>{{ toUpperCase('hello') }}</p>
</template>

Limitation: Each binding can only contain a single expression. Statements like let a = 1 are invalid. Additionally, the expression's access scope is limited to the current component instance's properties and methods, and cannot access global variables.