什么是VUE

最新推荐文章于 2026-06-19 19:56:49 发布

原创最新推荐文章于 2026-06-19 19:56:49 发布 · 969 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript

前端(VUE) 专栏收录该内容

2 篇文章

订阅专栏

Vue（读音 /vjuː/，类似于 “view”）是一个 用于构建用户界面 的渐进式 JavaScript 框架。由尤雨溪（Evan You）创建，首次发布于 2014 年。它的设计思想是轻量、易用、灵活，适合快速开发现代 Web 应用。

🌟 Vue 的核心特点

1. 渐进式框架

意味着你可以逐步采用 Vue：
- 从简单的页面交互
- 到复杂的 SPA（单页应用 Single Page Application）
- 或者配合 Vue Router、Vuex、Pinia 等生态构建大型应用

2. 声明式渲染

使用直观的模板语法（HTML + 模板语法）来描述 UI 状态与数据之间的关系。

<div id="app">
  <p>{{ message }}</p>
</div>

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

3. 组件化开发

将页面拆分成一个个可重用的“组件”（Component），每个组件都有自己的数据、逻辑和样式。

Vue.component('my-button', {
  template: '<button @click="count++">点击了 {{ count }} 次</button>',
  data() {
    return { count: 0 }
  }
})

4. 响应式系统

Vue 能自动追踪组件中使用的数据变化，并在数据变化时高效更新 DOM。

5. 生态系统完整

Vue Router：路由管理
Pinia（或 Vuex）：状态管理
Vue CLI / Vite：项目构建工具
Nuxt.js：服务端渲染（SSR）支持的 Vue 框架

🧠 Vue 的核心概念

概念	解释
模板语法	使用 `{{ }}` 和指令（如 `v-if`, `v-for`, `v-model`）绑定数据
组件	可复用、可嵌套的 Vue 实例，构成页面
Props	父组件向子组件传递数据
Emit	子组件向父组件发送事件
生命周期钩子	如 `mounted`, `updated`，用于监听组件的创建、更新、销毁过程
计算属性 & 侦听器	自动计算/监听数据变化的处理方式

🔧 Vue 的发展版本

版本	特点
Vue 2.x	稳定、使用广泛，使用 `Options API` 为主
Vue 3.x	性能更优，支持 `Composition API`，更适合大型项目，默认使用 Vite 构建工具

🚀 Vue 应用场景

前端界面开发
移动 Web 应用
后台管理系统
单页应用（SPA）
SSR（服务端渲染）或静态网站生成（如 Nuxt）

📦 示例：一个简单的计数器组件（Vue 3）

<template>
  <button @click="count++">点击了 {{ count }} 次</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>