【超详细！Vue3组件与模板语法入门指南】

大家好～今天带大家轻松玩转Vue3的组件与模板语法！无论是新手还是从Vue2转战的小伙伴，这篇都能让你快速上手！文末还有实战TodoList代码哦～👇

---

一、✨ Vue3组件结构：像搭积木一样简单！

Vue3的组件采用单文件组件（SFC），一个.vue文件搞定所有！结构清晰到流泪😭：

<template>  <!-- HTML模板 --> </template><script setup>  <!-- 逻辑代码（超简洁！） --> </script><style scoped>  <!-- 样式（仅限本组件） --> </style>

📌 三大块作用：

• <template>：写HTML+Vue指令（比如v-if、v-for）

• <script setup>：用Composition API声明变量和方法（告别Options API的臃肿！）

• <style scoped>：加scoped后样式只影响当前组件，妈妈再也不用担心样式冲突啦！

---

二、🚀 模板语法：数据绑定与指令大全

1️⃣ 数据绑定：让页面动起来！

• 文本插值：{{ message }}（还能写表达式！比如{{ message.toUpperCase() }}）

• 属性绑定：用:简写，比如:src="url"，动态属性超方便～

2️⃣ 常用指令表（赶紧收藏⭐️）

指令	用途	示例
v-if	条件渲染	<div v-if="isShow">出现！</div>
v-for	循环列表	<li v-for="item in list" :key="item.id">
@click	点击事件	<button @click="submit">提交</button>
v-model	双向绑定	<input v-model="username">（输入框神器！）

⚠️ 避坑指南：

• v-if会移除DOM，v-show只是display:none，按需选择！

• v-for必须加:key，否则Vue会生气哦😠！

---

三、🎯 实战：手把手写TodoList

流程图👇：

核心代码（完整代码在文末）：

<template>  <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></template>
<script setup>// 用ref声明响应式变量！const todos = ref([{ id:1, text:'学Vue3', done:false }])const addTodo = () => { /* 添加逻辑 */ }</script>

💡 代码亮点：

• v-model实现输入框双向绑定

• :class动态切换完成样式

• @keyup.enter监听回车事件

---

四、🔥 最佳实践 & 常见错误

✅ 组件设计原则

• 一个组件只做一件事！（比如按钮组件只管点击）

• 超过200行？拆它！

• 用TypeScript校验Props，避免传参翻车🚗

❌ 典型错误

<!-- 错误！直接修改props会报警告！ --><button @click="props.count++"></button>
<!-- 正确！用emit通知父组件 --><button @click="$emit('update')"></button>

---

五、📚 总结 & 学习资源

本文带你掌握了：

1. 单文件组件结构

2. 模板语法与指令

3. TodoList实战开发

🎁 彩蛋：完整TodoList代码获取方式👉 关注公众号，回复**“Vue3Todo”**即可！

---

💬 互动时间
你在学习Vue3时遇到过哪些问题？