[ 2024 IT 鐵人賽 DAY24 ] Nuxt3 魔法教室：Vue 語法速成班

嗨大家好！今天我們要來學習 Nuxt3 中一些超實用的 Vue 語法。就算你是 Vue 新手，看完這篇文章也能快速上手喔！讓我們一起來認識這些前端魔法吧！

房東不給養鸚鵡 - 那就用 Nuxt + Express + MongoDB 30 天寫一個全端鸚鵡專案。

挑戰人生第一次鐵人賽，就來個佛心分享 side project，從專案發想、規劃、設計、資料庫、開發到部署，技術使用 Nuxt 3、Tailwind CSS、Pinia、Axios、Express、MongoDB，製作一個前後端分離的鸚鵡專案，功能主要介紹食物計算機和聯絡我們，希望可以讓更多人瞭解專案的完整流程 ✨

IT 全文章連結

條件渲染：v-if 和 v-show

這兩個指令都用於控制元素的顯示，但有微妙的區別：

v-if：決定元素是否要被渲染

<script setup>
const isVisible = ref(true)
</script>

<template>
  <div v-if="isVisible">我只有在 isVisible 為 true 時才會出現！</div>
</template>

當 isVisible 為 false 時，這個 div 元素完全不會被渲染到 DOM 中。

v-show：決定元素是否要被顯示（但一定會被渲染）

1
2
3

<template>
  <div v-show="isVisible">我一定會被渲染，但只有在 isVisible 為 true 時才會顯示！</div>
</template>

使用 v-show 時，元素始終會被渲染並保留在 DOM 中，只是通過 CSS 的 display 屬性來控制其顯示與否。

小提醒：v-if 適合不常變動的情況，因為它涉及 DOM 的重新渲染；v-show 適合頻繁切換的情況，因為它只是切換 CSS 屬性。

列表渲染：v-for

v-for 用來重複渲染元素或組件，非常適合用於展示列表數據：

<script setup>
const items = ref(['蘋果', '香蕉', '橘子'])
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item }}
    </li>
  </ul>
</template>

這裡，v-for 會遍歷 items 數組，為每個元素創建一個

。
index 是當前元素的索引。
:key 是非常重要的，它幫助 Vue 跟蹤每個節點的身份，從而重用和重新排序現有元素。

事件處理：v-on (@)

v-on 指令用來監聽 DOM 事件，並在事件觸發時執行一些 JavaScript 代碼：

<script setup>
function sayHello() {
  alert('哈囉，歡迎來到 Nuxt3 魔法世界！')
}
</script>

<template>
  <button @click="sayHello">點我說哈囉</button>
</template>

這裡 @click 是 v-on:click 的縮寫。當按鈕被點擊時，sayHello 函數就會被調用。

雙向綁定：v-model

v-model 指令在表單輸入和組件上創建雙向數據綁定：

<script setup>
const message = ref('')
</script>

<template>
  <input v-model="message" placeholder="輸入些什麼吧">
  <p>你輸入的是：{{ message }}</p>
</template>

當用戶在輸入框中輸入內容時，message 的值會自動更新。同時，如果 message 的值在別處被改變，輸入框的內容也會相應更新。

生命週期鉤子

在 Nuxt3 中，我們主要使用 Composition API 的生命週期鉤子。這些鉤子讓我們能在組件生命週期的特定階段執行代碼：

<script setup>
onMounted(() => {
  console.log('組件已經掛載到 DOM 上了！')
  // 這裡可以進行一些初始化操作，比如獲取數據
})

onUnmounted(() => {
  console.log('組件即將被銷毀了！')
  // 這裡可以進行一些清理操作，比如取消訂閱、清除定時器等
})
</script>

onMounted 會在組件掛載到 DOM 後立即調用，而 onUnmounted 會在組件即將被銷毀時調用。

計算屬性：computed

computed 用於處理任何複雜邏輯，它會根據其依賴的響應式數據自動更新：

<script setup>
const message = ref('Hello, Nuxt3!')
const reversedMessage = computed(() => {
  return message.value.split('').reverse().join('')
})
</script>

<template>
  <p>反轉後的訊息：{{ reversedMessage }}</p>
</template>

這裡，reversedMessage 是一個計算屬性，它依賴於 message。當 message 變化時，reversedMessage 會自動重新計算。

監聽器：watch

watch 用於觀察和響應數據的變化：

<script setup>
const count = ref(0)
const message = ref('')

// 增加計數的函數
function increment() {
  count.value++
}

// 減少計數的函數
function decrement() {
  count.value--
}

// 使用 watch 來觀察 count 的變化
watch(count, (newValue, oldValue) => {
  message.value = `計數從 ${oldValue} 變成 ${newValue} 了！`
  
  if (newValue > oldValue) {
    message.value += ' 數字在增加！'
  } else {
    message.value += ' 數字在減少！'
  }
})
</script>

<template>
  <div>
    <p>目前計數：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">減少</button>
    <p>{{ message }}</p>
  </div>
</template>

在這個範例中：

我們定義了一個 count ref 來儲存計數值，和一個 message ref 來顯示訊息。
increment 和 decrement 函數分別用來增加和減少計數。這些函數與模板中的按鈕通過 @click 事件綁定。
watch 函數用來觀察 count 的變化。每當 count 變化時，它就會更新 message：
- 它會告訴我們計數從什麼值變成什麼值。
- 它會告訴我們數字是在增加還是減少。
在模板中，我們顯示當前的計數，兩個可以改變計數的按鈕，以及一個顯示 message 的段落。

動態綁定：v-bind (:)

v-bind 指令用於動態綁定一個或多個屬性，或者一個組件 prop 到表達式：

<script setup>
const imageSrc = ref('/path/to/image.jpg')
const imageAlt = ref('一張可愛的貓咪圖片')
</script>

<template>
  <img :src="imageSrc" :alt="imageAlt">
</template>

這裡，:src 是 v-bind:src 的縮寫。當 imageSrc 或 imageAlt 的值發生變化時，img 標籤的 src 和 alt 屬性會自動更新。
這些 Vue 語法是在 Nuxt3 中經常使用的基礎”魔法”。掌握了這些，你就能在 Nuxt3 的世界中自由翱翔啦！記住，學習編程就像學習魔法一樣，需要不斷練習。不要怕犯錯，多嘗試、多實驗，你很快就會成為 Nuxt3 的魔法師！
大家有沒有想要更詳細補充的部分呢？歡迎在下方留言分享喔！讓我們一起在 Nuxt3 的世界中探險吧！加油！

希望這篇文章有幫助到你，謝謝你的觀看，若有想看的系列也歡迎告訴我 😉