Vue核心教程

封面图 • 2026-04-11 • Vue

当然！以下是一个**Vue 核心教程**的概览，适合初学者逐步学习 Vue 的核心概念和用法。本教程将涵盖 Vue 的基础语法、组件系统、数据绑定、指令、事件处理、计算属性、生命周期钩子等内容。

---

## 🚀 一、Vue 简介

### 1.1 什么是 Vue？
Vue 是一款用于构建用户界面的渐进式 JavaScript 框架。它专注于视图层，易于上手，同时也可以集成到大型项目中。

### 1.2 安装方式
- **CDN 引入（开发测试）**：
  ```html
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  ```

- **通过 npm 安装（生产环境）**：
  ```bash
  npm install vue
  ```

---

## 💻 二、Vue 基础

### 2.1 Hello World 示例
```html
<div id="app">
  {{ message }}
</div>

### 2.2 数据绑定（Data Binding）
- **插值表达式**：`{{ }}`
- **指令（Directives）**：以 `v-` 开头的特殊属性，如 `v-bind`, `v-on`, `v-if` 等。

---

## 🔧 三、Vue 指令

| 指令 | 说明 |
|------|------|
| `v-bind` | 绑定 HTML 属性，可简写为 `:` |
| `v-on` | 监听 DOM 事件，可简写为 `@` |
| `v-if` / `v-show` | 条件渲染 |
| `v-for` | 列表渲染 |
| `v-model` | 表单输入绑定 |
| `v-pre` | 跳过该元素的编译 |

### 示例：
```html
<input v-model="username">
<p v-if="isLoggedIn">欢迎回来！</p>
<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>
```

---

## 🎯 四、计算属性（Computed Properties）

当需要根据响应式数据进行复杂计算时使用。

```js
computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('')
  }
}
```

---

## 🧩 五、方法（Methods）

用于定义在模板中调用的函数。

```js
methods: {
  reverseMessage() {
    this.message = this.message.split('').reverse().join('')
  }
}
```

---

## 📦 六、组件（Components）

Vue 的核心特性之一是组件化开发。

### 6.1 注册组件
```js
Vue.component('my-component', {
  template: '<h1>这是一个组件</h1>'
})
```

### 6.2 使用组件
```html
<my-component></my-component>
```

### 6.3 传递数据（props）
```js
Vue.component('child', {
  props: ['message'],
  template: '<p>{{ message }}</p>'
})
```

```html
<child message="来自父组件的数据"></child>
```

### 6.4 自定义事件（$emit）
```js
// 子组件
this.$emit('custom-event', data)

// 父组件
<child @custom-event="handleEvent"></child>
```

---

## ⏳ 七、生命周期钩子（Lifecycle Hooks）

Vue 实例在不同阶段会触发特定的钩子函数。

| 钩子函数 | 说明 |
|----------|------|
| `beforeCreate` | 实例初始化之后，数据观测和事件配置之前 |
| `created` | 实例创建完成，数据和方法已就绪 |
| `beforeMount` | 模板渲染之前 |
| `mounted` | 模板渲染完成 |
| `beforeUpdate` | 数据更新前 |
| `updated` | 数据更新后 |
| `beforeDestroy` | 实例销毁前 |
| `destroyed` | 实例销毁后 |

### 示例：
```js
new Vue({
  created() {
    console.log('实例已创建')
  },
  mounted() {
    console.log('DOM 已挂载')
  }
})
```

---

## 🧠 八、Vue 与 Vue Router（进阶）

如果你想要实现单页应用（SPA），可以使用 Vue Router：

```bash
npm install vue-router
```

### 示例路由配置：
```js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(Router)

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router,
  // ...其他选项
}).$mount('#app')
```

---

## 📚 九、Vue 与 Vuex（状态管理）

对于复杂应用，推荐使用 Vuex 进行全局状态管理。

### 安装：
```bash
npm install vuex
```

### 示例：
```js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

new Vue({
  store,
  // ...
}).$mount('#app')
```

---

## ✅ 十、总结

| 内容 | 说明 |
|------|------|
| 数据绑定 | `{{ }}`, `v-bind`, `v-model` |
| 指令 | `v-if`, `v-for`, `v-on`, `v-show` |
| 计算属性 | `computed` |
| 方法 | `methods` |
| 组件 | `component` |
| 生命周期 | `created`, `mounted`, `updated` 等 |
| 状态管理 | `Vuex` |
| 路由 | `Vue Router` |

---

## 🧩 附录：Vue 2 vs Vue 3

| 特性 | Vue 2 | Vue 3 |
|------|-------|-------|
| 模板编译 | 通过运行时编译 | 通过编译时优化 |
| Composition API | 不支持 | 支持 |
| 性能 | 较好 | 更快 |
| TypeScript 支持 | 好 | 更强 |

---

如果你希望我继续深入某个主题（比如组件通信、Vue Router、Vuex、Composition API 等），请告诉我！我可以为你提供更详细的讲解或示例代码。