Vue 入门学习 - 技术栈

一、前置基础

二、两种使用方式

[1. CDN 引入（快速上手，无需构建工具）](#1. CDN 引入（快速上手，无需构建工具）)

[2. 工程化（Vue CLI / Vite，推荐正式开发）](#2. 工程化（Vue CLI / Vite，推荐正式开发）)

三、核心概念（必掌握）

[1. 模板语法](#1. 模板语法)

[2. 核心指令](#2. 核心指令)

[3. 组合式 API（Vue 3 推荐）](#3. 组合式 API（Vue 3 推荐）)

[4. 响应式基础](#4. 响应式基础)

[5. 计算属性 computed](#5. 计算属性 computed)

[6. 组件化（核心思想）](#6. 组件化（核心思想）)

[7. 生命周期（常用）](#7. 生命周期（常用）)

[四、入门实战（TodoList 小案例）](#四、入门实战（TodoList 小案例）)

五、学习路径（建议）

Vue 是一款渐进式 JavaScript 框架 ，核心是响应式数据绑定 与组件化开发，易学易用、生态完善，是前端入门首选框架之一Vue.js。

一、前置基础

HTML / CSS（能写静态页面）
JavaScript 基础（变量、函数、数组、对象、ES6+）
了解 npm / 包管理（可选，工程化需要）

二、两种使用方式

1. CDN 引入（快速上手，无需构建工具）

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>Vue 入门</title>
  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="输入文字">
  </div>

  <script>
    const { createApp } = Vue
    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

2. 工程化（Vue CLI / Vite，推荐正式开发）

Vite 快速创建项目（推荐）：

复制代码

# 1. 安装 Node.js 后执行
npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

三、核心概念（必掌握）

1. 模板语法

文本插值 ：{``{ 变量/表达式 }}
html 复制代码
```
<p>{{ message }}</p>
<p>{{ count + 1 }}</p>
```

属性绑定 v-bind （简写 :）

html 复制代码

<div :id="dynamicId" :class="{ active: isActive }"></div>

双向绑定 v-model （表单专用）
html 复制代码
```
<input v-model="username" />
```

2. 核心指令

v-for 列表渲染（必须加 key）

html 复制代码

<ul>
  <li v-for="item in list" :key="item.id">
    {{ item.name }}
  </li>
</ul>

v-if / v-else / v-show 条件渲染

html 复制代码

<p v-if="isLogin">已登录</p>
<p v-else>请登录</p>
<div v-show="isShow">显示/隐藏（CSS）</div>

v-on 事件绑定（简写 @ 语法糖）
html 复制代码
```
<button @click="handleClick">点击</button>
```

3. 组合式 API（Vue 3 推荐）

单文件组件 Hello.vue 示例：

html 复制代码

<template>
  <div>
    <h2>{{ title }}</h2>
    <p>计数：{{ count }}</p>
    <button @click="add">+1</button>
  </div>
</template>

<script setup>
// 1. 引入响应式 API
import { ref } from 'vue'

// 2. 定义响应式数据
const title = ref('Vue 组合式 API')
const count = ref(0)

// 3. 定义方法
const add = () => {
  count.value++
}
</script>

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

4. 响应式基础

ref：用于基本类型（字符串、数字、布尔）
reactive：用于对象 / 数组

javascript 复制代码

import { ref, reactive } from 'vue'
const name = ref('张三')
const user = reactive({ name: '李四', age: 20 })

5. 计算属性 computed

javascript 复制代码

import { ref, computed } from 'vue'
const firstName = ref('张')
const lastName = ref('三')
const fullName = computed(() => {
  return firstName.value + lastName.value
})

6. 组件化（核心思想）

父 → 子传值：props

html 复制代码

<!-- 子组件 Child.vue -->
<script setup>
const props = defineProps({
  msg: String
})
</script>
<template>
  <p>子组件：{{ msg }}</p>
</template>

<!-- 父组件使用 -->
<Child msg="来自父组件" />

子 → 父传值：emit

html 复制代码

<!-- 子组件 -->
<script setup>
const emit = defineEmits(['send'])
const handleSend = () => emit('send', '子组件数据')
</script>
<button @click="handleSend">发送</button>

<!-- 父组件 -->
<Child @send="handleReceive" />

7. 生命周期（常用）

javascript 复制代码

import { onMounted, onUpdated } from 'vue'
// 组件挂载完成（DOM 已渲染）
onMounted(() => {
  console.log('组件挂载')
})
// 数据更新后
onUpdated(() => {
  console.log('组件更新')
})

四、入门实战（TodoList 小案例）

html 复制代码

<template>
  <div class="todo">
    <h2>Todo 清单</h2>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加任务">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <span :class="{ done: todo.done }" @click="toggleTodo(todo.id)">
          {{ todo.text }}
        </span>
        <button @click="delTodo(todo.id)">×</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const newTodo = ref('')
const todos = ref([
  { id: 1, text: '学习 Vue', done: false }
])

// 添加
const addTodo = () => {
  if (!newTodo.value.trim()) return
  todos.value.push({
    id: Date.now(),
    text: newTodo.value,
    done: false
  })
  newTodo.value = ''
}

// 切换完成状态
const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) todo.done = !todo.done
}

// 删除
const delTodo = (id) => {
  todos.value = todos.value.filter(t => t.id !== id)
}
</script>

<style scoped>
.done { text-decoration: line-through; color: #999; }
li { margin: 8px 0; display: flex; gap: 8px; }
</style>

五、学习路径（建议）

掌握 模板语法、指令、响应式、组件通信
跟着官方文档做 基础教程
写 小项目（TodoList、计算器、留言板）
学习 路由（Vue Router）、状态管理（Pinia）
进阶：组件封装、axios 请求、工程化