深入浅出 Vue3：组件与模板基础全解析

<template>  <!-- 组件的HTML模板 --></template> <script setup>  // 组件的JavaScript逻辑（推荐使用Composition API）</script> <style scoped>  /* 组件的CSS样式（scoped表示样式隔离） */</style>

<script setup>import { ref } from 'vue' // 响应式数据声明const count = ref(0)// 方法定义const increment = () => count.value++</script>

<p>Message: {{ message }}</p>

<img :src="dynamicSrc" :alt="imgAlt"><a :href="url">Link</a>

<!-- 对象语法 --><div :class="{ active: isActive, 'text-danger': hasError }"></div> <!-- 数组语法 --><div :class="[activeClass, errorClass]"></div> <!-- 内联样式 --><div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<template>  <div class="todo-container">    <h2>{{ title }}</h2>    <input v-model="newTodo" @keyup.enter="addTodo">    <ul>      <li v-for="(todo, index) in todos" :key="todo.id">        <span :class="{ completed: todo.done }">{{ todo.text }}</span>        <button @click="toggleTodo(index)">✓</button>      </li>    </ul>  </div></template> <script setup>import { ref } from 'vue' const title = ref('Vue3 Todo List')const newTodo = ref('')const todos = ref([  { id: 1, text: 'Learn Vue3', done: false },  { id: 2, text: 'Build Project', done: true }]) const addTodo = () => {  if (newTodo.value.trim()) {    todos.value.push({      id: Date.now(),      text: newTodo.value,      done: false    })    newTodo.value = ''  }} const toggleTodo = (index) => {  todos.value[index].done = !todos.value[index].done}</script> <style scoped>.todo-container {  max-width: 400px;  margin: 20px auto;}.completed {  text-decoration: line-through;  color: #666;}</style>

<!-- 错误示例：直接修改props --><button @click="props.count++">Increase</button> <!-- 正确做法：通过emit事件 --><button @click="$emit('update-count')">Increase</button>