# vue初学者项目

**Repository Path**: yushunliee/vue-test

## Basic Information

- **Project Name**: vue初学者项目
- **Description**: vuetest初学者
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-04
- **Last Updated**: 2025-04-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue.js 初学者示例项目

这是一个为Vue.js初学者设计的示例项目，包含一个简单的待办事项应用，帮助你快速了解Vue的基本概念。

## 项目特点

- 使用Vue 3和组合式API (Composition API)
- 待办事项列表功能（添加、删除、标记完成）
- 响应式界面设计
- 简洁的代码结构

## 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问 http://localhost:5173/ 查看应用

## Vue.js 基础概念解析

### 1. 组件结构

Vue组件通常由三部分组成：
- `<script>`: 包含组件的逻辑代码
- `<template>`: 定义组件的HTML结构
- `<style>`: 定义组件的样式

### 2. 响应式数据

```js
import { ref } from 'vue';

// 创建响应式数据
const message = ref('Hello Vue!');

// 修改数据（需要通过.value访问）
function updateMessage() {
  message.value = 'Updated!';
}
```

### 3. 指令

- `v-model`: 双向数据绑定
- `v-for`: 列表渲染
- `v-if` / `v-else` / `v-show`: 条件渲染
- `v-on` (@): 事件处理
- `v-bind` (:): 属性绑定

### 4. 生命周期钩子

在setup()中使用生命周期钩子：

```js
import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})
```

## 项目结构

- `src/components/TodoList.vue`: 待办事项组件
- `src/App.vue`: 主应用组件
- `src/main.js`: 应用入口文件

## 学习资源

- [Vue 官方文档](https://cn.vuejs.org/)
- [Vue 3 组合式 API 指南](https://cn.vuejs.org/guide/extras/composition-api-faq.html)
- [Vue 初学者教程](https://cn.vuejs.org/tutorial/)