当前位置：首页 > news >正文

初识 Vue

news 2025/9/28 7:35:18

一、什么是 Vue？

Vue（发音 /vjuː/，类似 "view"）是一个用于构建用户界面的 渐进式 JavaScript 框架。
它的核心目标是：通过简洁的 API 实现响应式的数据绑定和组合式的视图组件。
你可以将 Vue 逐步应用于项目中，从一个按钮到一个完整的单页应用（SPA），它都能胜任。

💡 “渐进式”意味着什么？
你可以先用 <script> 标签引入 Vue，为静态页面添加一点交互；也可以使用现代化工具链（如 Vite）构建大型应用。Vue 的使用方式完全由你掌控。

二、为什么选择 Vue？

优势	说明
✅ 易学易用	API 简洁直观，HTML + JavaScript 基础即可上手
✅ 文档优秀	中文文档完善，示例丰富，学习成本低
✅ 响应式系统	数据变化，视图自动更新，无需手动操作 DOM
✅ 组件化开发	将 UI 拆分为可复用的组件，提升开发效率
✅ 生态丰富	路由（Vue Router）、状态管理（Pinia）、构建工具（Vite）一应俱全

三、第一个 Vue 应用：Hello World！

我们不急于搭建复杂环境，先通过 CDN 方式 在浏览器中运行你的第一个 Vue 应用。

1. 创建 HTML 文件

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8" /><title>初识 Vue</title><!-- 引入 Vue 3 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><!-- 挂载点 --><div id="app"><h1>{{ message }}</h1><p>当前时间：{{ currentTime }}</p><button @click="updateTime">更新时间</button></div><script>// 创建 Vue 应用const { createApp } = Vue;createApp({// 数据data() {return {message: '欢迎来到 Vue 的世界！',currentTime: new Date().toLocaleTimeString()}},// 方法methods: {updateTime() {this.currentTime = new Date().toLocaleTimeString();}}}).mount('#app'); // 挂载到 #app 元素</script>
</body>
</html>

2. 运行效果

将代码保存为 index.html
用浏览器打开
你会看到：
- 显示 “欢迎来到 Vue 的世界！”
- 显示当前时间
- 点击按钮，时间自动更新

🔥 神奇之处：我们没有手动修改 innerHTML，但点击按钮后，页面上的时间自动刷新了！这就是 响应式 的魅力。

四、核心概念解析

1. 挂载点（Mount Point）

<div id="app">...</div>

Vue 应用通过 mount('#app') 与此 DOM 元素关联。
此元素内的内容将由 Vue 接管并渲染。

2. 插值表达式 `{{ }}`

<h1>{{ message }}</h1>

双大括号语法用于输出 data 中的数据。
数据变化时，内容自动更新。

3. 指令 `v-`

Vue 提供了一系列以 v- 开头的指令，用于增强 HTML 功能。

`v-on`：事件监听（简写 `@`）

<button @click="updateTime">更新时间</button>

@click 监听点击事件，触发 updateTime 方法。

`v-model`：双向数据绑定

<input v-model="message" placeholder="输入内容" />

输入框的值与 message 数据双向绑定。
输入时，message 自动更新；message 变化，输入框内容也更新。

五、再进一步：列表渲染 `v-for`

让我们展示一个待办事项列表。

<div id="app"><h2>我的任务清单</h2><input v-model="newTask" @keyup.enter="addTask"placeholder="按回车添加任务" /><ul><li v-for="task in tasks" :key="task.id">{{ task.text }}</li></ul>
</div><script>const { createApp, ref } = Vue;createApp({setup() {// 使用 Composition API（Vue 3 推荐）const newTask = ref('');const tasks = ref([{ id: 1, text: '学习 Vue' },{ id: 2, text: '编写第一个应用' }]);function addTask() {if (newTask.value.trim()) {tasks.value.push({id: Date.now(),text: newTask.value});newTask.value = ''; // 清空输入框}}return {newTask,tasks,addTask};}}).mount('#app');
</script>

✅ v-for：遍历数组生成列表。
✅ :key：为每个元素提供唯一标识，提升渲染性能。

六、Vue 的两种 API 风格

1. 选项式 API（Options API）

createApp({data() { ... },methods: { ... },computed: { ... },mounted() { ... }
})

传统风格，逻辑分散在不同选项中。
适合新手入门。

2. 组合式 API（Composition API）

setup() {const count = ref(0);const double = computed(() => count.value * 2);function increment() {count.value++;}return { count, double, increment };
}