在上一篇部落格/文章中，我們學習如何建立、匯入和使用元件。這次，我們將探討元件中的資料綁定。

在組件內使用數據

在元件中定義資料
資料在 data() 函數中定義並作為物件傳回。
這是一個例子：

data() {
  return {
    message: 'Hello World!'
  };
}

與指令綁定

v-bind：將 HTML 屬性綁定到資料。

v-model：v-model 指令用於表單輸入上的雙向資料綁定。它將輸入值與 Vue 實例資料保持同步。本質上，v-model 結合了@input（監聽變化）和:value（設定輸入值）。例如：

這相當於：

以下是如何分別使用 :value 和 @input:

v-if 指令根據布林值有條件地呈現元素。如果條件為真，則將渲染該元素；如果為假，則不會。例如：

This is visible!

v-for 指令用於循環遍歷數組或物件來渲染元素。每個元素都可以被賦予一個唯一的密鑰以獲得更好的性能。例如：

• {{ item.name }}

v-on
v-on 指令用於監聽元素上的事件。為了方便起見，您可以使用簡寫@。例如：

Click me!

這可以縮短為：

Click me!