VueJS - 綁定：初學者指南

你好，未來的 Vue.js 超級巨星！我很興奮能成為你進入 Vue.js 綁定世界的引路人。作為一個教了多年編程的人，我可以告訴你，綁定就是 Vue.js 如此美味的秘方。那麼，我們挽起袖子，開始吧！

VueJS - Binding

Vue.js 中的綁定是什麼？

在我們深入細節之前，讓我們先了解綁定是什麼。在 Vue.js 中，綁定是我們將數據連接到 DOM（文件對象模型）的方式。這就像是在你的 JavaScript 代碼和屏幕上出現的內容之間創建一個神奇的鏈接。酷炫吧？

綁定 HTML 類

想像你正在為派對打扮。你可能會根據場合選擇不同的衣服，對吧？在 Vue.js 中綁定 HTML 類似於這樣。我們可以根據我們的數據動態地改變我們元素的外觀。

基本類別綁定

讓我們從一個簡單的例子開始：

<div id="app">
<p :class="{ active: isActive }">我��著嗎？</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>

在這個例子中，我們根據 isActive 數據屬性將 'active' 類別綁定到我們的段落。如果 isActive 為 true，則段落會有 'active' 類別。如果它是 false，則不會。

多個類別

但如果我们想同時處理多個類別呢？沒問題！Vue.js 為我們提供了支持：

<div id="app">
<p :class="{ active: isActive, 'text-danger': hasError }">
多類別綁定
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>

在這裡，我們正在綁定兩個類別：'active' 和 'text-danger'。段落會有 'active' 類別，但除非我們將 hasError 改為 true，否則不會有 'text-danger' 類別。

数组语法

我們也可以使用數組來綁定類別。這就像是有了一個類別的衣櫃可供我們選擇：

<div id="app">
<p :class="[activeClass, errorClass]">數組語法很酷！</p>
</div>

<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>

在這種情況下，'active' 和 'text-danger' 類別都會應用到段落上。

綁定內聯樣式

現在，讓我們來談談內聯樣式。這就像是給你的元素進行現場改頭換面！

对象语法

我們可以使用對象來綁定內聯樣式：

<div id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
設計我吧！
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
textColor: 'red',
fontSize: 20
}
})
</script>

這將把顏色設置為紅色，字體大小設置為 20px。注意我們可以使用駝峰式（fontSize）或連字符式（'font-size'）來為樣式屬性命名。

数组语法

我們也可以使用樣式對象的數組：

<div id="app">
<p :style="[baseStyles, overridingStyles]">樣式的數組</p>
</div>

<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'blue',
fontSize: '20px'
},
overridingStyles: {
fontWeight: 'bold'
}
}
})
</script>

這允許我們應用多個樣式對象，如果存在衝突，數組中較後的對象會覆蓋較早的對象。

表單輸入綁定

表單輸入綁定是 Vue.js 非常出色的地方。這就像是在你的表單輸入和數據之間有一條直接的電話線！

文本輸入

讓我們從一個簡單的文本輸入開始：

<div id="app">
<input v-model="message" placeholder="編輯我">
<p>消息是：{{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

v-model 指令在輸入和 message 數據屬性之間建立了雙向綁定。輸入中的任何變化都會立即更新 message，反之亦然。

勾選框

勾選框就像小型的開關。這是我們如何綁定它們的方法：

<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>

<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>

當勾選框被勾選時，checked 屬性將為 true，當它未被勾選時，則為 false。

雙選按鈕

單選按鈕就像多選題。一次只能選擇一個：

<div id="app">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">一</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">二</label>
<br>
<span>選擇的：{{ picked }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>

picked 屬性將被設定為選中的單選按鈕的值。

下拉選單

最後，我們來看看下拉選單：

<div id="app">
<select v-model="selected">
<option disabled value="">請選擇一個</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>選中的：{{ selected }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>

selected 屬性將被設定為選中選項的值。

綁定方法總結

這裡是我們所涵蓋的綁定方法的快速參考表：

綁定類型	語法	描述
類（對象）	`:class="{ className: condition }"`	根據條件應用類別
類（數組）	`:class="[class1, class2]"`	應用多個類別
樣式（對象）	`:style="{ property: value }"`	應用內聯樣式
樣式（數組）	`:style="[styleObject1, styleObject2]"`	應用多個樣式對象
表單輸入	`v-model="dataProperty"`	表單輸入的雙向綁定

這就是全部了！你剛剛踏出了進入 Vue.js 綁定世界的第一步。記住，熟能生巧，所以不要害怕嘗試這些概念。在你還未意識到之前，你就會像專家一樣進行數據綁定了！快樂編程！

Credits: Image by storyset