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>

Blog

Bỏ qua số năm kinh nghiệm và mác Junior, Middle, Senior, bạn cảm thấy mình liệu có phải là một lập trình viên tốt không?

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