Vue的快速入门

Vue 简介

Vue 是一个渐进式 JavaScript 框架，用于构建用户界面。其核心特点是轻量级、易上手，同时支持组件化开发和响应式数据绑定。

安装与基础配置

确保已安装 Node.js（建议版本 16+），通过以下命令创建 Vue 项目：

bash 复制代码

npm init vue@latest
cd your-project
npm install
npm run dev

核心概念与示例

响应式数据绑定

Vue 使用 ref 或 reactive 声明响应式数据。以下是一个计数器示例：

html 复制代码

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

组件化开发

组件是 Vue 的核心功能。创建一个子组件 ChildComponent.vue：

html 复制代码

<template>
  <p>{{ message }}</p>
</template>

<script setup>
defineProps(['message']);
</script>

在父组件中使用：

html 复制代码

<template>
  <ChildComponent message="Hello Vue!" />
</template>

<script setup>
import ChildComponent from './ChildComponent.vue';
</script>

条件与循环

Vue 通过 v-if 和 v-for 实现条件渲染和列表渲染：

html 复制代码

<template>
  <div v-if="show">显示内容</div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
const show = ref(true);
const items = ref([{ id: 1, name: 'Vue' }, { id: 2, name: 'React' }]);
</script>

事件处理

通过 @click 或 v-on 绑定事件：

html 复制代码

<template>
  <button @click="greet">点击</button>
</template>

<script setup>
function greet() {
  alert('Hello Vue!');
}
</script>

进阶功能

状态管理（Pinia）

安装 Pinia：

bash 复制代码

npm install pinia

创建 store：

javascript 复制代码

// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    }
  }
});

在组件中使用：

html 复制代码

<template>
  <button @click="counter.increment">Count: {{ counter.count }}</button>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter';
const counter = useCounterStore();
</script>

路由（Vue Router）

安装 Vue Router：

bash 复制代码

npm install vue-router

配置路由：

javascript 复制代码

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
const routes = [{ path: '/', component: Home }];
const router = createRouter({ history: createWebHistory(), routes });
export default router;

在 main.js 中引入：

javascript 复制代码

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');

调试与优化

浏览器工具：安装 Vue Devtools 扩展，便于调试组件和状态。
性能优化 ：使用 v-once 或 v-memo 减少不必要的渲染。

学习资源

官方文档：vuejs.org
实战项目：参考 GitHub 上的 Vue 模板仓库（如 vuejs/vue-cli）。

通过以上步骤和示例，可以快速掌握 Vue 的核心功能并投入开发。