Vue 从入门到精通：构建响应式前端与渐进式框架实战

myapp/ ├── src/ │ ├── App.vue # 根组件 │ ├── main.js # 入口文件 │ ├── components/ # 公共组件 │ └── assets/ # 静态资源 ├── package.json └── index.html。

2501_93945834

399人浏览 · 2025-10-25 17:59:53

2501_93945834 · 2025-10-25 17:59:53 发布

一、Vue 是什么

Vue（全称 Vue.js）是一款由尤雨溪开发的 渐进式前端框架，以“简单易上手、高效灵活”著称。
它融合了 React 的组件思想与 Angular 的模板语法，成为现代 Web 开发的首选之一。

一句话概括：

Vue = 简洁语法 + 响应式系统 + 强大生态。

Vue 的设计理念是“逐步增强”：

只想写静态页面？引入一个脚本即可；
想构建大型项目？配合 Vue CLI、Vue Router、Vuex 轻松搞定。

二、环境搭建

1. 使用 CDN 方式（快速体验）

<div id="app"> <h2>{{ message }}</h2> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script> const app = Vue.createApp({ data() { return { message: "Hello Vue 3!" } } }); app.mount('#app'); </script>

2. 使用 Vue CLI 创建项目

npm install -g @vue/cli vue create myapp cd myapp npm run serve

3. 使用 Vite（推荐）

npm create vite@latest myapp --template vue cd myapp npm install npm run dev

访问：

http://localhost:5173

三、项目结构介绍

myapp/ ├── src/ │ ├── App.vue # 根组件 │ ├── main.js # 入口文件 │ ├── components/ # 公共组件 │ └── assets/ # 静态资源 ├── package.json └── index.html

四、模板语法基础

插值表达式

<h2>{{ title }}</h2> <p>{{ 1 + 2 }}</p> <p>{{ message.toUpperCase() }}</p>

指令（Directives）

指令	功能
`v-if`	条件渲染
`v-for`	列表循环
`v-model`	双向绑定
`v-on` 或 `@`	事件绑定
`v-bind` 或 `:`	动态属性

五、响应式数据系统

App.vue

<template> <div> <h2>{{ count }}</h2> <button @click="count++">点击 +1</button> </div> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script>

ref() 创建一个响应式变量，改变它会自动更新 DOM。

六、计算属性与监听器

计算属性（computed）

<template> <p>价格含税：{{ totalPrice }}</p> </template> <script setup> import { ref, computed } from 'vue' const price = ref(100) const totalPrice = computed(() => price.value * 1.13) </script>

监听器（watch）

七、条件与循环渲染

<template> <div v-if="isLogin">欢迎回来！</div> <div v-else>请登录。</div> <ul> <li v-for="(item, index) in users" :key="index">{{ item }}</li> </ul> </template> <script setup> import { ref } from 'vue' const isLogin = ref(true) const users = ref(['Tom', 'Jerry', 'Lucy']) </script>

八、事件与表单绑定

<template> <input v-model="username" placeholder="请输入用户名" /> <button @click="greet">提交</button> </template> <script setup> import { ref } from 'vue' const username = ref('') const greet = () => alert(`你好，${username.value || '访客'}`) </script>

九、组件化开发

父组件：App.vue

<template> <UserCard name="小红" :age="18" /> </template> <script setup> import UserCard from './components/UserCard.vue' </script>

子组件：UserCard.vue

<template> <div class="card"> <h3>{{ name }}</h3> <p>年龄：{{ age }}</p> </div> </template> <script setup> defineProps({ name: String, age: Number }) </script>

十、父子组件通信

父传子

<UserCard :user="user" />

子组件接收：

defineProps(['user'])

子传父（emit）

<template> <button @click="$emit('login', username)">登录</button> </template> <script setup> const username = 'Alice' defineEmits(['login']) </script>

父组件监听：

<UserCard @login="handleLogin" />

参考案例：www.kdney.cn

十一、生命周期钩子

<script setup> import { onMounted, onUnmounted } from 'vue' onMounted(() => console.log('组件已挂载')) onUnmounted(() => console.log('组件已卸载')) </script>

十二、路由系统（Vue Router）

安装路由：

npm install vue-router

配置：

import { createRouter, createWebHistory } from 'vue-router' import Home from './pages/Home.vue' import About from './pages/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] export const router = createRouter({ history: createWebHistory(), routes })

在 main.js 中挂载：

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

导航链接：

<router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view />

十三、状态管理（Pinia 替代 Vuex）

npm install pinia

创建 store：

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

使用：

<script setup> import { useCounterStore } from './stores/counter' const counter = useCounterStore() </script> <template> <button @click="counter.increment">点击：{{ counter.count }}</button> </template>

十四、Axios 请求数据

npm install axios

<template> <ul> <li v-for="user in users" :key="user.id">{{ user.name }}</li> </ul> </template> <script setup> import { ref, onMounted } from 'vue' import axios from 'axios' const users = ref([]) onMounted(async () => { const res = await axios.get('https://jsonplaceholder.typicode.com/users') users.value = res.data }) </script>

十五、自定义指令

<template> <input v-focus /> </template> <script setup> import { onMounted } from 'vue' const vFocus = { mounted(el) { el.focus() } } </script>

十六、动态组件与 KeepAlive

<template> <button @click="show = 'A'">组件A</button> <button @click="show = 'B'">组件B</button> <keep-alive> <component :is="show" /> </keep-alive> </template> <script setup> import { ref } from 'vue' import A from './A.vue' import B from './B.vue' const show = ref('A') </script>

十七、动画与过渡效果

<template> <button @click="show = !show">切换</button> <transition name="fade"> <p v-if="show">淡入淡出效果</p> </transition> </template> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style> <script setup> import { ref } from 'vue' const show = ref(true) </script>

十八、Composition API 模块化逻辑

// useMouse.js import { ref, onMounted, onUnmounted } from 'vue' export function useMouse() { const x = ref(0) const y = ref(0) const update = e => { x.value = e.pageX; y.value = e.pageY } onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) return { x, y } }

<script setup> import { useMouse } from './useMouse' const { x, y } = useMouse() </script> <template> <p>鼠标坐标：{{ x }}, {{ y }}</p> </template>