The most basic form of data binding :

<span>{{ message }}</span>

Raw HTML

Có thể sử dụng với v-html (⚠ có thể bị tấn công XSS)
Ví dụ:
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

Attribute Bindings:

<div v-bind:id="dynamicId"></div>

Shorthand:

<div :id="dynamicId"></div>

Same-name shorthand:

<!-- same as :id="id" -->
<div :id></div>
<!-- this also works -->
<div v-bind:id></div>

Dynamically Multiple Attribute

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

<div v-bind="objectOfAttrs"></div>

Dynamic Argument

const attributeName = 'abc' | 'href' | 'alt'

<a v-bind:[attributeName]="value"> ... </a>

<!-- shorthand -->
<a :[attributeName]="value"> ... </a>

const eventName = 'click' | 'change' | 'close'

<a v-on:[eventName]="doSomething"> ... </a>

<!-- shorthand -->
<a @[eventName]="doSomething"> ... </a>

Những điều cần biết về Vue3

Khánh Phan