Vue零基础入门必看！3小时从安装到写出第一个应用（新手必藏）
** 导读：** 全网最直白的Vue入门指南！避开90%新手踩过的坑，图文+代码保姆级教学
---
#### ** 核心1：Vue为什么能成为前端顶流？**
✅ **3大杀器**
响应式：数据变页面自动更新（告别手动DOM操作）
组件化：像搭积木一样开发（效率提升300%）
渐进式：可以从简单页面扩展到大型项目
**框架选型避坑指南**
小团队/新项目：首选Vue 3
老项目维护：vue 2 + Composition API
超大型应用：Angular/React
---
#### ** 核心2：5分钟快速搭建开发环境（两种方式）**
** 方案一：CDN引入（适合学习）**
```html
<!-- 直接复制粘贴就能用 -->
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ message }}</div>
<script>
Vue.createApp({ data() { return { message: "Hello!" } } }).mount('#app')
</script>
```
** 方案二：Vite脚手架（推荐实战）**
```bash
# 终端执行这三条命令
npm create vite@latest my-app -- --template vue
cd my-app
npm run dev
```
**文件结构解密**
```
src/
├─ App.vue # 核心组件
├─ main.js # 程序入口
└─ assets/ # 图片存放处
```
---
#### ** 核心3：模板语法四大金刚（附代码模板）**
**1. 数据绑定**
```vue
<div>{{ user.name }}</div>
<input v-model="inputText">
```
**2. 条件渲染**
```vue
<div v-if="isVIP">尊享特权</div>
<div v-else>普通用户</div>
```
**3. 列表渲染**
```vue
<ul>
<li v-for="item in list" :key="item.id">
{{ item.title }}
</li>
</ul>
```
⚠️ **90%新手都会犯的错**
❌ 用index当key → ✅ 必须用唯一id
❌ v-if和v-for混用 → ✅ 先过滤数据再渲染
---
