vue 入门

我来详细介绍Vue组件之间的关系和语法，特别针对前端小白来解释。

🏗️ Vue组件关系图

让我先用图表展示组件之间的关系：

📁 App.vue - 主应用组件详解

🔍 Vue单文件组件结构

每个.vue文件都包含三个部分：

<template>
  <!-- HTML模板 - 定义组件的结构 -->
</template>

<script>
  // JavaScript逻辑 - 定义组件的行为
</script>

<style>
  /* CSS样式 - 定义组件的外观 */
</style>

📝 Vue语法详解

1. 模板语法 (Template)

插值表达式 {{ }}

<h1>{{ title }}</h1>  <!-- 显示变量内容 -->
<p>图书总数：{{ books.length }}</p>  <!-- 显示计算结果 -->

指令 (Directives)

v-model - 双向数据绑定

<input 
  v-model="searchQuery"  <!-- 输入框内容与searchQuery变量同步 -->
  type="text" 
  placeholder="搜索图书标题或作者..."
>

v-if - 条件渲染

<!-- 只有当条件为true时才显示 -->
<BookForm v-if="showAddForm || editingBook" />
<div v-if="books.length === 0" class="empty-state">
  <p>还没有添加任何图书</p>
</div>

v-for - 列表渲染

<!-- 循环渲染每个图书项 -->
<BookItem 
  v-for="book in books"  <!-- 遍历books数组 -->
  :key="book.id"         <!-- 每项的唯一标识 -->
  :book="book"           <!-- 传递数据给子组件 -->
/>

@ - 事件监听

<!-- @click 等同于 v-on:click -->
<button @click="showAddForm = true">添加新图书</button>
<BookForm @save="handleSaveBook" @cancel="handleCancelForm" />

2. 组件通信

Props - 父组件向子组件传递数据

<!-- 父组件 App.vue -->
<BookList 
  :books="filteredBooks"        <!-- 传递图书数组 -->
  @edit="handleEditBook"        <!-- 监听编辑事件 -->
  @delete="handleDeleteBook"    <!-- 监听删除事件 -->
/>

// 子组件 BookList.vue
export default {
  props: {
    books: {              // 接收父组件传递的books数据
      type: Array,        // 数据类型
      required: true,     // 是否必需
      default: () => []   // 默认值
    }
  }
}

Emit - 子组件向父组件传递事件

<!-- 子组件 BookItem.vue -->
<template>
  <button @click="$emit('edit')">编辑</button>
  <button @click="$emit('delete')">删除</button>
</template>

<script>
export default {
  emits: ['edit', 'delete']  // 声明可以触发的事件
}
</script>

3. JavaScript部分详解

export default {
  name: 'App',                    // 组件名称
  
  // 1. 导入并注册子组件
  components: {
    BookList,                     // 注册BookList组件
    BookForm                      // 注册BookForm组件
  },
  
  // 2. 组件数据 - 必须是函数
  data() {
    return {
      books: [...],               // 响应式数据
      searchQuery: '',
      showAddForm: false
    }
  },
  
  // 3. 计算属性 - 基于其他数据计算得出
  computed: {
    filteredBooks() {             // 过滤后的图书列表
      // 根据searchQuery过滤books
    }
  },
  
  // 4. 方法 - 处理用户交互
  methods: {
    handleSaveBook(bookData) {    // 保存图书
      // 处理保存逻辑
    },
    handleEditBook(book) {        // 编辑图书
      // 处理编辑逻辑
    }
  }
}

🔄 数据流向详解

1. 向下传递数据 (Props)
2. 向上传递事件 (Emit)
   🎯 实际例子分析
   让我们看一个完整的交互流程：
   用户点击"编辑"按钮的完整流程：
   BookItem.vue - 用户点击编辑按钮
   src/components
   BookList.vue - 接收事件并向上传递
   src/components
   <BookItem
   @edit=“$emit(‘edit’, book)”
   />
   App.vue - 处理编辑逻辑
   src
   <BookList @edit=“handleEditBook” />

🔧 Vue响应式原理简介
Vue的响应式系统让数据变化自动更新视图：
📚 学习建议
对于PHP开发者的类比：
组件 ≈ PHP类
Props ≈ 函数参数
Emit ≈ 回调函数
data() ≈ 类属性
methods ≈ 类方法
学习顺序：
✅ 理解单文件组件结构
✅ 掌握基本指令 (v-model, v-if, v-for)
✅ 学会组件通信 (props, emit)
⏭️ 学习生命周期钩子
⏭️ 掌握计算属性和侦听器
这样的组件化设计让代码更加模块化、可维护，每个组件都有明确的职责，就像PHP中的类一样！