前一章提到的數據綁定 {{}} Mustache語法不能直接作用在 HTML屬性或方法上，因此當我們想要動態綁定 HTML屬性或方法時，就需要 Directives指令 的幫忙。

Vue 的指令會以v-作為前綴，並且有各自不同的功能，例如v-bind、v-on和v-for等。從這章開始，我們會逐一的介紹每一個指令的用法與適合的場景。

v-bind主要用於 HTML 元素上的屬性（attribute）綁定，舉凡 class 屬性、 style 屬性、 value 屬性、href 屬性等等。

HTML 標簽、元素、屬性和屬性值

HTML元素

HTML 元素是構築網頁的一種基本單位，是由 HTML 標籤和 HTML 屬性組合而成的。

HTML標籤

HTML的全名叫做超文本標記語言(HyperText Markup Language)，顧名思義它的功用是透過標示來強調及組織一般性的文字，進而讓瀏覽器知道如何顯示文件的內容。

HTML標籤的語法如果，有兩種形式(成對與不成對)：

<tag>內容</tag>
<tag>

標籤要用角括號封閉起來
一定要有開標籤，不一定有閉標籤
開閉標籤成對出現時，在開標籤和閉標籤之間可以有內容
標籤是大小寫無關的，html標準推薦使用小寫
屬性

html元素的開標籤可以擁有屬性(attribute)，以提供關於該元素的更多信息。屬性由屬性名(attribute name)和屬性值(attribute value) 組成

例如：

<h1 class="text-center">Hello, World!</h1>

屬性的語法如下

<tag attr1="value1" attr2="value2" ... attrN="valueN">內容</tag>

屬性的值一般要在引號中
標籤可以擁有一個或多個屬性，也可以沒有屬性
屬性一般由屬性名和屬性值成對出現

v-bind語法

v-bind:屬性名="變數名稱"

簡寫

:屬性名="變數名稱"

綁定的變數類型

v-bind的語法綁定支援的資料類型包括：變數、陣列以及物件。

變數語法：
v-bind：屬性名 = "變數名稱"

陣列語法：
v-bind：屬性名= "[變數1，變數2]"
陣列形式，javascript裡的陣列，每一個元素就是一個物件，因此我們可以用陣列的資料結構一次性的綁多個變數上去。

物件語法：
v-bind:class = {classname1：value1，classname2：value2}
物件形式，這也是我們最常使用一次性綁定多個屬性的方式，相較於陣列，物件的寫法比較容易閱讀，因此也是我們綁定多個物件時比較普遍的用法。

許多範例

綁定一個屬性

<!-- 綁定一個屬性 --> 
<img v-bind:src="imageSrc"> 

v-bind縮寫

<!-- 縮寫 --> 
<img :src="imageSrc"> 

使用表達式

<!-- 拼接字串 --> 
<img :src="'/path/to/images/' + fileName"> 

class綁定

<!-- class 綁定 --> 
<div :class="{ red: isRed }"></div> 
<div :class="[classA, classB]"></div> 
<div :class="[classA, { classB: isB, classC: isC }]"> 

style綁定

<!-- style 綁定 --> 
<div :style="{ fontSize: size + 'px' }"></div> 
<div :style="[styleObjectA, styleObjectB]"></div> 

綁定多個屬性到html元素

以下是如何用物件同時綁定多個屬性到div元素的範例。

<!-- 綁定一個有屬性的對象 --> 
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<script>
setup(props,context){
    const someProp=props.someProps;
    const otherProp=props.otherProp;
    return {
        someProp,
        someProps,
        };

}
</script>

小結

在本章中你學到了

Directives指令
html標籤、元素、屬性和屬性值
如何用v-bind屬性綁定

Directives指令初探： v-bind 屬性綁定