初识 Vue - 指南

一、什么是 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 文件

  
  
  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


  
  

    
{{ message }}
    
当前时间：{{ currentTime }}
    更新时间
  
  <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>

2. 运行效果

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

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

四、核心概念解析

1. 挂载点（Mount Point）

...

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

2. 插值表达式 {{ }}

{{ message }}

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

3. 指令 v-

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

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

更新时间

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

v-model：双向数据绑定

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

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

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

  
我的任务清单
  
  

    

      {{ task.text }}
    
  

<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 等概念。

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

七、下一步学习建议

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

八、结语

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