AICODING / DEMO
下载 Markdown 原文 ↗运行示例 ↗

什么是 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>{{ title }}</h1>
    <p v-if="showMessage">{{ message }}</p>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }}
      </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>{{ message }}</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 开发

📚 学习资源

🔗 相关链接

本页目录 ↑