ai-coding-demo

什么是 Vue.js？

📖 概述

Vue.js（读音 /vjuː/，类似于 view）是一款渐进式 JavaScript 框架，由尤雨溪于 2014 年创建。它是一套用于构建用户界面的渐进式框架，核心库只关注视图层，易于学习，又能轻松集成到其他库或现有项目中。

🌟 核心特性

1. 渐进式框架

可以逐步集成到项目中
不强制要求一次性使用全部功能
可以从简单的 jQuery 项目逐步迁移

2. 响应式数据绑定

使用 `` 进行文本插值
自动追踪数据变化并更新 DOM
实现数据与视图的双向绑定

3. 组件化开发

将页面拆分为可复用的组件
每个组件包含自己的模板、样式和逻辑
支持组件嵌套和通信

4. 虚拟 DOM

使用虚拟 DOM 提高渲染性能
智能的 diff 算法只更新必要的 DOM 节点
平衡了性能和开发效率

5. 指令系统

v-if、v-show：条件渲染
v-for：列表渲染
v-model：双向数据绑定
v-on：事件处理（简写 @）

🏗️ 项目结构

my-vue-app/
├── src/
│   ├── components/     # 组件目录
│   ├── views/         # 页面视图
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── public/            # 静态资源
└── package.json       # 项目配置

💻 基本语法

1. 模板语法

<template>
  <div>
    <h1></h1>
    <p v-if="showMessage"></p>
    <ul>
      <li v-for="item in items" :key="item.id">
        
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      showMessage: true,
      items: [
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' }
      ]
    }
  },
  methods: {
    handleClick() {
      console.log('按钮被点击')
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

2. 组件通信

父组件传向子组件（Props）

<!-- 父组件 -->
<ChildComponent :message="parentMessage" @child-event="handleChild" />

<!-- 子组件 -->
<template>
  <div></div>
</template>

<script>
export default {
  props: ['message'],
  emits: ['child-event']
}
</script>

🎯 Vue 3 组合式 API

Vue 3 引入了 Composition API，提供更灵活的逻辑复用：

<script setup>
import { ref, computed, onMounted } from 'vue'

// 响应式数据
const count = ref(0)
const double = computed(() => count.value * 2)

// 方法
const increment = () => {
  count.value++
}

// 生命周期
onMounted(() => {
  console.log('组件已挂载')
})
</script>

📦 核心生态

Vue CLI：官方命令行工具
Vue Router：官方路由管理器
Pinia/Vuex：状态管理库
Vue DevTools：浏览器调试工具
Nuxt.js：基于 Vue 的全栈框架
Vite：新一代构建工具

🚀 开发流程

1. 创建项目

npm create vue@latest my-app
cd my-app
npm install
npm run dev

2. 构建项目

npm run build

3. 预览构建结果

npm run preview

✅ 优缺点

优点

✅ 学习曲线平缓，文档清晰
✅ 渐进式，可灵活集成
✅ 组件化开发，代码复用性强
✅ 响应式数据绑定，开发效率高
✅ 社区活跃，生态丰富
✅ TypeScript 支持完善

缺点

❌ 灵活性过高可能导致项目结构不统一
❌ 生态系统相比 React 较小
❌ IE8 以下浏览器不支持

🎯 适用场景

中小型项目快速开发
需要快速迭代的产品
已有 jQuery 项目需要现代化改造
学习成本要求较低的项目
移动端 H5 开发

📚 学习资源

🔗 相关链接

在线预览：Vue.js Demo
GitHub：vuejs/core
官网：vuejs.org

This site is open source. Improve this page.