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

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

    Posted on 2025-02-18 23:22 Code_Cracke 阅读(17) 评论(0) 编辑 收藏 举报

 深入探讨 Vue3 的组件结构与模板语法，从单文件组件到动态模板表达式，手把手带你掌握核心基础。通过丰富的代码示例和图解，将复杂概念简单化，助你轻松入门。熟练掌握这些知识，为构建复杂的 Vue3 应用打下坚实基础，同时为学习更多高级特性做好准备！ 

一、Vue3 组件结构详解

1.1 单文件组件（SFC）架构

Vue3采用.vue单文件组件模式，一个典型组件包含三个区块：

<template>

  <!-- 组件的HTML模板 -->

</template>

<script setup>

  // 组件的JavaScript逻辑（推荐使用Composition API）

</script>

<style scoped>

  /* 组件的CSS样式（scoped表示样式隔离） */

</style>

各区块作用说明：

<template>：定义组件视图层，支持所有HTML语法+Vue指令扩展

<script setup>：使用setup语法糖简化响应式变量声明（替代Vue2的Options API）

<style scoped>：添加scoped属性后，样式仅作用于当前组件（通过自动添加data-v-*属性实现）

1.2 组件导出与组合式API

通过<script setup>语法糖，无需显式导出组件对象：

<script setup>

import { ref } from 'vue'

// 响应式数据声明

const count = ref(0)

// 方法定义

const increment = () => count.value++

</script>

组合式API优势：

更好的逻辑复用（通过自定义Hook）

更灵活的逻辑组织（按功能而非选项类型拆分）

更好的TypeScript支持

二、Vue3 模板语法深度解析

2.1 数据绑定核心语法

（1）文本插值：{{ }}

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

支持JavaScript表达式：{{ message.split('').reverse().join('') }}

自动响应式更新（数据变化时视图同步更新）

（2）属性绑定：v-bind（简写:）

<img :src="dynamicSrc" :alt="imgAlt">

<a :href="url">Link</a>

2.2 常用指令大全

指令 用途 示例

v-if 条件渲染 <div v-if="show">显示内容</div>

v-for 列表渲染 <li v-for="item in items" :key="item.id">{{ item.text }}</li>

v-on 事件监听 <button @click="submit">提交</button>

v-model 双向绑定 <input v-model="username">

v-show 显示/隐藏 <div v-show="isVisible">内容</div>

关键区别说明：

v-if vs v-show：前者直接移除DOM元素，后者通过display:none控制

v-for必须配合:key使用，用于高效DOM更新

2.3动态样式绑定技巧

<!-- 对象语法 -->

<div :class="{ active: isActive, 'text-danger': hasError }"></div>

<!-- 数组语法 -->

<div :class="[activeClass, errorClass]"></div>

<!-- 内联样式 -->

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

三、实战示例：TodoList组件开发

<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>

代码解析流程图：

四、最佳实践与常见问题

4.1 组件设计原则

单一职责原则：每个组件只做一件事

合理拆分：当组件超过200行代码时考虑拆分

props

验证：使用TypeScript或defineProps进行类型校验

4.2 常见错误排查

<!-- 错误示例：直接修改props -->

<button @click="props.count++">Increase</button>