終於來到第五個範例表格綁定摟！
表格的所有應用都可以綁定～
這次範例可以看到很多表單元件摟！
<script setup>
import { ref } from 'vue'
const text = ref('Edit me')
const checked = ref(true)
const checkedNames = ref(['Jack'])
const picked = ref('One')
const selected = ref('A')
const multiSelected = ref(['A'])
</script>
<template>
<p>Example 5:</p>
<h2>Text Input</h2>
<input v-model="text">
<p>{{ text }}</p>
<h2>Checkbox</h2>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">Checked: {{ checked }}</label>
<!--
multiple checkboxes can bind to the same
array v-model value
-->
<h2>Multi Checkbox</h2>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<p>Checked names: {{ checkedNames }}</p>
<h2>Radio</h2>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<p>Picked: {{ picked }}</p>
<h2>Select</h2>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{ selected }}</p>
<h2>Multi Select</h2>
<select v-model="multiSelected" multiple style="width:100px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{ multiSelected }}</p>
</template>
<script setup>
script setup是 Vue 3 的組件語法糖，可以更簡潔地撰寫組件的邏輯。- 從
vue導入ref函數，ref用於創建響應式的變數。
使用 ref 創建響應式變數：
<script setup>
import { ref } from 'vue'
const text = ref('Edit me')
const checked = ref(true)
const checkedNames = ref(['Jack'])
const picked = ref('One')
const selected = ref('A')
const multiSelected = ref(['A'])
</script>
text初始化為'Edit me'。checked初始化為true。checkedNames初始化為包含'Jack'的陣列。picked初始化為'One'。selected初始化為'A'。multiSelected初始化為包含'A'的陣列。
<template>
template區塊內是組件的 HTML 結構。
Text Input
<h2>Text Input</h2>
<input v-model="text">
<p>{{ text }}</p>
- 使用
<h2>標籤顯示 "Text Input" 標題。 - 使用
<input>標籤與v-model雙向綁定text變數，使其成為可編輯的輸入框。 - 使用
<p>標籤顯示text變數的當前值。
Checkbox
<h2>Checkbox</h2>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">Checked: {{ checked }}</label>
- 使用
<h2>標籤顯示 "Checkbox" 標題。 - 使用
<input>標籤創建一個 checkbox，v-model雙向綁定checked變數。 - 使用
<label>標籤顯示checked變數的當前值。
Multi Checkbox
<h2>Multi Checkbox</h2>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<p>Checked names: {{ checkedNames }}</p>
- 使用
<h2>標籤顯示 "Multi Checkbox" 標題。 - 使用多個
<input>標籤創建多個 checkbox，每個 checkbox 的value屬性設定不同的名字，並且v-model雙向綁定checkedNames陣列。這允許多個 checkbox 共享同一個數組。 - 使用多個
<label>標籤顯示對應 checkbox 的名稱。 - 使用
<p>標籤顯示checkedNames陣列的當前值。
Radio
<h2>Radio</h2>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<p>Picked: {{ picked }}</p>
- 使用
<h2>標籤 - 顯示 "Radio" 標題。
- 使用多個
<input>標籤創建多個 radio 按鈕，每個 radio 按鈕的value屬性設定不同的值，並且v-model雙向綁定picked變數。這允許在多個 radio 按鈕中選擇一個。 - 使用多個
<label>標籤顯示對應 radio 按鈕的選項。 - 使用
<br>標籤換行。 - 使用
<p>標籤顯示picked變數的當前值。
Select
<h2>Select</h2>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{ selected }}</p>
- 使用
<h2>標籤顯示 "Select" 標題。 - 使用
<select>標籤創建一個下拉選單，v-model雙向綁定selected變數。 - 使用多個
<option>標籤定義選項，包括一個禁用的提示選項和三個有效選項A、B、C。 - 使用
<p>標籤顯示selected變數的當前值。
Multi Select
<h2>Multi Select</h2>
<select v-model="multiSelected" multiple style="width:100px">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Selected: {{ multiSelected }}</p>
- 使用
<h2>標籤顯示 "Multi Select" 標題。 - 使用
<select>標籤創建一個多選下拉選單，v-model雙向綁定multiSelected陣列，multiple屬性允許多選，並設置樣式使其寬度為 100px。 - 使用多個
<option>標籤定義選項A、B、C。 - 使用
<p>標籤顯示multiSelected陣列的當前值。
看過表單的綁定之後，更有感覺了！
好像真的不難～只是一開始的不習慣而已www
至少v-model好像比較懂了www
[補充] v-model還有什麼用處？修飾符
除了基本的雙向綁定功能，v-model 還有一些特別的特性和用法：
.lazy：只在change事件後同步數據，而不是在每次input事件後立即同步。.number：將輸入值自動轉換為數字。.trim：自動過濾輸入值兩端的空格。
<input v-model.lazy="text">
<input v-model.number="age">
<input v-model.trim="name">
[補充] 自定義組件上的 v-model
在 Vue 3 中，v-model 不僅可以用在原生表單元素上，還可以用在自定義組件上。當你使用 v-model 綁定一個自定義組件時，實際上是綁定了組件的一個特殊的 modelValue 屬性，並且該組件需要觸發一個 update:modelValue 事件來通知父組件值的變化。
父組件的使用方式
在父組件中，我們可以這樣使用v-model 綁定自定義組件：<MyComponent v-model="myData"></MyComponent>
這樣 v-model 會綁定 MyComponent 組件的 modelValue 屬性，並且父組件中的 myData 變數將與子組件中的值進行雙向綁定。
子組件的實現方式
在子組件中，我們需要做以下幾件事：
- 聲明
modelValue屬性：這是用來接收父組件傳遞過來的值。 - 監聽輸入變化並觸發
update:modelValue事件：當輸入值改變時，觸發該事件來通知父組件更新值。
這是子組件的具體實現：
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
<script>
export default {
props: {
modelValue: {
type: String,
required: true
}
}
}
</script>
父組件：
<MyComponent v-model="myData"></MyComponent>
子組件：
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
<script>
export default {
props: {
modelValue: String
}
}
</script>
完整示例
父組件
<template>
<div>
<h1>父組件</h1>
<p>父組件中的值: {{ parentData }}</p>
<MyComponent v-model="parentData"></MyComponent>
</div>
</template>
<script>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
export default {
components: {
MyComponent
},
setup() {
const parentData = ref('')
return {
parentData
}
}
}
</script>
子組件 (MyComponent.vue)
<template>
<div>
<h2>子組件</h2>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
<p>子組件中的值: {{ modelValue }}</p>
</div>
</template>
<script>
export default {
props: {
modelValue: {
type: String,
required: true
}
}
}
</script>
- 父組件：
parentData是一個響應式變數，用於存儲父組件中的數據。- 使用
v-model將parentData綁定到MyComponent組件。
- 子組件：
- 定義了一個
modelValue屬性，這是v-model自動綁定的屬性。 - 在
<input>標籤中，使用:value="modelValue"將modelValue的值綁定到輸入框。 - 當輸入框的值變化時，觸發
@input="$emit('update:modelValue', $event.target.value)"，這將input事件的值發送給父組件，更新parentData的值。
- 定義了一個
這樣，父組件中的 parentData 和子組件中的 modelValue 就實現了雙向綁定。當子組件的輸入框中的值發生變化時，父組件中的 parentData 會自動更新，反之亦然。
啥咪父子？霧煞煞
在 Vue 中使用 v-model 時，是父組件控制和使用子組件的資料。具體來說，父組件將資料傳遞給子組件，子組件通過 v-model 的雙向綁定機制，將資料變動反饋給父組件。這樣就實現了父子組件之間的數據同步。
父組件使用子組件的資料
父組件傳遞初始資料給子組件，然後監聽子組件的變動，這是一個自上而下的資料流。
總結：
- 父組件 負責傳遞資料給 子組件。
- 子組件 通過
v-model將資料的變動反饋給 父組件。
由於物件導向觀念是會先有父類別才會有子類別，
而這邊的父子跟那邊是不一樣的唷www
父組件和子組件之間的關係更像是一種組合（Composition），而不是繼承（Inheritance）。
