前端框架入门：Vue 基础

Vue.js 是一款流行的前端框架，专注于构建用户界面。它采用响应式数据绑定和组件化开发，易于上手且功能强大。Vue 3 版本引入了 Composition API，提升了开发效率。

---

一、Vue.js 基础

1. Vue 介绍

Vue 是一个渐进式 JavaScript 框架，可用于：

• 构建单页应用（SPA）。
• 组件化开发，提高代码复用性。
• 结合 Vuex（状态管理）和 Vue Router（路由）开发大型应用。

2. Vue 模板语法

Vue 使用声明式渲染，通过模板语法（Template Syntax）将数据绑定到 HTML。

<div id="app">
  <h1>{{ message }}h1>
div>

<script>
const app = Vue.createApp({
  data() {
    return {
      message: "Hello Vue!"
    };
  }
});
app.mount("#app");
script>

• {{ message }}：数据绑定（双花括号语法）。
• data()：定义组件的响应式数据。

---

二、Vue 组件

组件是 Vue 应用的核心概念。Vue 组件可以复用，提高开发效率。

1. 全局组件

<div id="app">
  <custom-message>custom-message>
div>

<script>
const app = Vue.createApp({});

app.component("custom-message", {
  template: `
这是一个全局组件`
});

app.mount("#app");
script>

2. 单文件组件（SFC）

在 Vue 项目中，我们通常使用 .vue 文件创建组件：

---

三、Vuex（状态管理）

Vuex 是 Vue.js 的状态管理库，用于管理多个组件共享的状态。

1. 安装 Vuex

npm install vuex@next

2. 创建 Vuex Store

import { createStore } from "vuex";

const store = createStore({
  state() {
    return {
      count: 0
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

3. 在 Vue 组件中使用 Vuex

---

四、Vue 3 新特性

Vue 3 相比 Vue 2 进行了大量优化，主要包括：

1. Composition API

Vue 3 引入 Composition API 以提高代码可读性和复用性。

2. Teleport

允许组件内容渲染到 HTML 的任何位置：

3. Suspense

用于处理异步组件加载：

---

五、Vue 项目示例

1. 创建 Vue 3 项目

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

2. 计数器应用

---

六、总结

特性	Vue 2	Vue 3
状态管理	Vuex	Vuex / Pinia
组件定义	data() {}	setup()（Composition API）
渲染性能	普通 Virtual DOM	更快的 Virtual DOM
异步支持	依赖异步组件	处理异步

Vue 是现代前端开发的重要框架，Vue 3 提供了更高效的开发方式，适用于构建大型 Web 应用。