## Vue 組件樣板語法基本結構 Vue 組件通常使用單一檔案組件（Single-File Component，`.vue`），基本結構如下： ```vue <template> <!-- HTML 樣板 --> </template> <script setup> // JavaScript 邏輯 </script> <style scoped> /* CSS 樣式 */ </style> ``` 其中： - `<template>`：定義畫面結構，內容必須有一個根元素（Vue 3 可使用多個根元素）。 - `<script setup>`：撰寫資料、方法與組件邏輯。 - `<style scoped>`：撰寫只套用於此組件的樣式。 ## 操作標籤內文 ### 1. 使用雙大括號插值 ```vue <p>{{ message }}</p> ``` 會將 `message` 的值顯示在標籤內文中。 ### 2. 使用 `v-text` ```vue <p v-text="message"></p> ``` 效果與 `{{ message }}` 類似，但會直接取代元素的文字內容。 ### 3. 使用 `v-html` ```vue <div v-html="htmlContent"></div> ``` 可將字串當作 HTML 插入，但若內容來自使用者輸入，可能造成 XSS 安全問題，應避免直接使用。 ## 操作標籤屬性 使用 `v-bind:` 綁定屬性，也可簡寫成 `:`。 ```vue <img v-bind:src="imageUrl" v-bind:alt="imageAlt"> ``` 簡寫方式： ```vue <img :src="imageUrl" :alt="imageAlt"> ``` 也可以綁定布林屬性，例如： ```vue <button :disabled="isDisabled">送出</button> ``` 當 `isDisabled` 為 `true` 時，按鈕會被停用。 ## 簡單範例 ```vue <template> <div class="card"> <h1>{{ title }}</h1> <p v-text="description"></p> <img :src="imageUrl" :alt="title"> <button :disabled="isDisabled"> {{ buttonText }} </button> </div> </template> <script setup> const title = 'Vue 組件' const description = '這是一個簡單的 Vue 樣板範例。' const imageUrl = 'https://vuejs.org/images/logo.png' const buttonText = '開始使用' const isDisabled = false </script> <style scoped> .card { padding: 20px; border: 1px solid #ddd; } </style> ``` 在此範例中： - `{{ title }}`：將資料插入 `<h1>` 的內文。 - `v-text="description"`：設定 `<p>` 的文字內容。 - `:src="imageUrl"`：動態設定圖片的 `src` 屬性。 - `:alt="title"`：動態設定圖片的替代文字。 - `:disabled="isDisabled"`：根據資料決定按鈕是否停用。