初识 Vue

KT857

611人浏览 · 2025-09-27 23:47:20

KT857 · 2025-09-27 23:47:20 发布

一、什么是 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 };
}

Vue 3 推荐，逻辑按功能组织，复用更方便。
需要理解 ref、reactive、computed 等概念。

📌 建议：初学者可从选项式入门，逐步过渡到组合式。

七、下一步学习建议

官方文档：https://cn.vuejs.org —— 最权威的学习资源
掌握核心指令：v-if、v-show、v-bind、v-on、v-model
学习组件：尝试创建自己的按钮、卡片组件
了解工具链：尝试使用 Vite 创建项目
实践小项目：Todo List、天气应用、博客首页

八、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

程序员的工作台正在换代：聊聊 GPT-5.6、ChatGPT Plus/Pro 和 Codex 到底改变了什么

我觉得 ChatGPT Plus、Pro、GPT-5.6 和 Codex 带来的变化，不应该只理解成：AI 写代码更厉害了。真正的变化是，软件开发的操作界面正在改变。以前程序员直接操作文件、终端、编辑器和各种开发工具。现在中间开始多出一层 Agent。程序员告诉 Agent 目标，Agent 再去操作文件、终端和工具，最后把结果交回来。程序员 → 开发工具 → 代码程序员 → AI Agent →