Vue學習筆記: v-model

vue學習筆記

yenchenjulia 2024-02-08 04:45:14 ‧ 1422 瀏覽

分享至

前言
我們終於完成打怪任務了，說長不長說短不短，這個月挺刺激的，就像坐上雲霄飛車般，心情跟著產出所遇到的種種狀況起落，沒方向時懷疑自己，有進度時暗自竊喜，卡關時則滿臉屎樣，還好最終有了一個好的結果，感謝所有幫忙過我的人，也感謝隊友們的付出，很幸運能身在自動自發的團隊中，大家不為個人而是團體優先，讓我們得以在時間內完成，開心到想開個香檳乾一杯，剛好搭上中國過年，喝一杯實在不爲過，在兔年有這麼好的結尾，自己心滿意足，也讓我對即將到來的龍年有了更多的期待。打怪結束，學習繼續，讓我們回到最初吧！複習一下v-model，看能不能找到自己的盲點，加深印象，將它納入私房菜單。
v-model
- 就我所知道的描述：v-bind提供單向連動，而v-model則是雙向連動，可以為js內的變數，也可以在html中取得新值，拿去js寫邏輯，常用到的情形就是input或各種form，取得使用者填入的特定值在js寫入邏輯，達到想要的目的
- 官方文件的描述：
- 範例說明：試著使用v-model重構以下程式碼已取得相同結果
  - ㄧ開始的程式碼
```
<script setup>
import { ref } from 'vue'

const text = ref('')

function onInput(e) {
  text.value = e.target.value
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>
```
  - 重構後
```
<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>
```
後話
- 重新複習了官方文件，才想到自己忘了提很重要的事，v-model就是以v-on跟v-bind的結合來實現
- 在範例說明時，我竟然只記得在template中換上v-model，忘了在script中給ref值，真的還是不太熟悉啊，無法想像連簡單的v-model都漏洞百出的我是怎麼活過這個月的（汗）
- 用簡單的v-model當個小暖身，希望自己年假過完後能快速回到該有的學習步調，我的想法是先把這次打怪用上但其實不是很明白的地方回頭做個筆記，瞎子摸象般的使用讓人很沒有安全感，所以先預告接下來的主題應該依序會是生命週期跟導航守衛吧！最後祝大家新年快樂囉！
參考資料
- https://vuejs.org/tutorial/#step-5