异常教程

Vue.js 起步（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在现代 Web 开发领域，Vue.js 以其简洁的语法、灵活的生态和友好的学习曲线，成为开发者入门前端框架的热门选择。无论是构建个人博客、电商网站还是企业级应用，Vue.js 都能提供高效且直观的开发体验。本文将带领编程初学者和中级开发者，通过循序渐进的方式掌握 Vue.js 的核心概念，并通过实际案例理解其工作原理。

环境搭建：快速启动你的 Vue 项目

1. 安装 Vue 开发环境

Vue.js 提供了多种集成方式，对于初学者，推荐使用 Vue CLI（Command Line Interface）工具快速搭建项目。以下是安装步骤：

npm install -g @vue/cli  

vue create my-first-vue-app  

cd my-first-vue-app  
npm run serve

提示：Vue CLI 会根据你的选择（如 Babel、Router、Vuex 等）自动生成项目模板，适合快速开始开发。

2. 直接在 HTML 中引入 Vue

如果希望直接体验 Vue 的基础功能，也可以通过 CDN 引入：

<!DOCTYPE html>  
<html>  
<head>  
  <title>Vue.js 起步示例</title>  
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
</head>  
<body>  
  <div id="app">{{ message }}</div>  

  <script>  
    const app = Vue.createApp({  
      data() {  
        return {  
          message: "Hello, Vue!"  
        };  
      }  
    });  
    app.mount("#app");  
  </script>  
</body>  
</html>

比喻：Vue 的数据驱动视图的机制，就像“魔术贴”——当数据（如 message）变化时，视图会像自动粘贴一样更新。

核心概念：理解 Vue.js 的底层逻辑

1. 数据驱动视图：data 和 {{ }} 模板语法

Vue.js 的核心是 响应式数据绑定。通过 data 函数定义的数据属性，会被 Vue 自动追踪变化，并实时更新视图。例如：

const app = Vue.createApp({  
  data() {  
    return {  
      count: 0  
    };  
  }  
});

在模板中，通过 {{ count }} 将数据渲染到页面。当 count 的值被修改时，视图会立即更新。

2. 指令：Vue 的“超能力”

Vue 提供了多种指令（Directives）来增强 HTML 功能，最常用的包括：

  • v-if：条件渲染（类似“如果…那么…”逻辑）
  • v-for：循环渲染列表
  • v-model：表单双向绑定

示例：使用 v-for 渲染列表

<ul>  
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>  
</ul>  

<script>  
  data() {  
    return {  
      items: [  
        { id: 1, name: "苹果" },  
        { id: 2, name: "香蕉" }  
      ]  
    };  
  }  
</script>

3. 事件处理：与用户交互

通过 v-on 指令（简写为 @）绑定事件，例如：

<button @click="increment">增加计数器</button>  

<script>  
  methods: {  
    increment() {  
      this.count += 1;  
    }  
  }  
</script>

组件化开发：模块化构建复杂应用

1. 组件的定义与注册

Vue 的组件系统允许开发者将界面拆分为独立、可复用的模块。例如，创建一个按钮组件：

// ButtonComponent.js  
export default {  
  template: `<button @click="$emit('custom-event')">点击我</button>`,  
  emits: ["custom-event"]  
};  

// 在主应用中注册并使用  
const app = Vue.createApp({  
  // ...  
});  
app.component("my-button", ButtonComponent);

在模板中使用：

<my-button @custom-event="handleEvent">自定义按钮</my-button>

2. 父子组件通信：props 和事件

  • props：父组件向子组件传递数据（单向数据流）
  • 事件：子组件通过 $emit 触发事件，父组件监听并响应

示例：父子组件交互

// 父组件  
<template>  
  <ChildComponent :message="parentMessage" @child-event="handleChildEvent" />  
</template>  

<script>  
  export default {  
    data() {  
      return {  
        parentMessage: "来自父组件的消息"  
      };  
    },  
    methods: {  
      handleChildEvent(data) {  
        console.log("收到子组件的事件：", data);  
      }  
    }  
  };  
</script>  

// 子组件  
export default {  
  props: ["message"],  
  emits: ["child-event"],  
  methods: {  
    triggerEvent() {  
      this.$emit("child-event", { detail: "子组件触发的事件" });  
    }  
  }  
};

3. 组件通信的最佳实践

  • 兄弟组件：通过父组件作为中介
  • 跨层级组件：使用 Vuex（状态管理库）或 Event Bus
  • 单文件组件（SFC）：推荐使用 .vue 文件组织代码（模板、脚本、样式分离）

响应式系统：Vue 如何感知数据变化

Vue 的响应式机制基于 Object.defineProperty（Vue 2）或 Proxy（Vue 3），自动追踪数据变化并触发视图更新。

示例：理解响应式原理

const app = Vue.createApp({  
  data() {  
    return {  
      user: {  
        name: "Alice",  
        age: 25  
      }  
    };  
  }  
});  

// 修改对象的属性会触发更新  
app.mounted(() => {  
  this.user.name = "Bob"; // 视图自动更新  
});

注意：直接替换整个对象（如 this.user = {}）不会触发更新，需使用 this.$set 或 Vue 3 的 reactive/ref。

实战案例：构建一个待办事项（Todo List）应用

1. 需求分析

  • 显示待办事项列表
  • 添加新任务
  • 标记任务为已完成
  • 清除已完成任务

2. 代码实现

HTML 结构

<div id="app">  
  <h2>待办事项列表</h2>  
  <input v-model="newTodo" @keyup.enter="addTodo" placeholder="输入任务..." />  
  <button @click="addTodo">添加</button>  

  <ul>  
    <li v-for="todo in filteredTodos" :key="todo.id">  
      <input type="checkbox" v-model="todo.completed" />  
      <span :class="{ done: todo.completed }">{{ todo.text }}</span>  
    </li>  
  </ul>  

  <button @click="clearCompleted">清除已完成</button>  
</div>

Vue 实例逻辑

new Vue({  
  el: "#app",  
  data() {  
    return {  
      newTodo: "",  
      todos: [],  
      filter: "all" // all/active/completed  
    };  
  },  
  computed: {  
    filteredTodos() {  
      if (this.filter === "active") {  
        return this.todos.filter(todo => !todo.completed);  
      } else if (this.filter === "completed") {  
        return this.todos.filter(todo => todo.completed);  
      }  
      return this.todos;  
    }  
  },  
  methods: {  
    addTodo() {  
      if (this.newTodo.trim()) {  
        this.todos.push({  
          id: Date.now(),  
          text: this.newTodo,  
          completed: false  
        });  
        this.newTodo = "";  
      }  
    },  
    clearCompleted() {  
      this.todos = this.todos.filter(todo => !todo.completed);  
    }  
  }  
});

效果：用户输入任务后按回车或点击按钮添加，勾选任务标记完成，点击“清除已完成”可删除选中项。

进阶技巧：提升开发效率

1. 开发者工具（Vue Devtools）

安装 Chrome 扩展 Vue Devtools，可实时查看组件层级、数据状态和事件触发情况，是调试的必备工具。

2. 组件复用与代码分割

通过 动态组件（<component :is="currentComponent">）和 异步组件（Vue.defineAsyncComponent）实现按需加载，优化应用性能。

3. 使用单文件组件（SFC）

<template>  
  <div class="counter">  
    <h3>计数器：{{ count }}</h3>  
    <button @click="increment">+1</button>  
  </div>  
</template>  

<script>  
export default {  
  data() {  
    return { count: 0 };  
  },  
  methods: {  
    increment() {  
      this.count += 1;  
    }  
  }  
};  
</script>  

<style scoped>  
.counter {  
  padding: 20px;  
  border: 1px solid #ddd;  
}  
</style>

结论

通过本文，我们从 Vue.js 的环境搭建、核心概念、组件化开发到实战案例，逐步构建了一个完整的知识体系。Vue.js 的灵活性和响应式特性，使其成为现代 Web 开发的有力工具。无论是个人项目还是团队协作，掌握 Vue.js 的基础与进阶技巧，都能显著提升开发效率和代码质量。

接下来，你可以进一步探索 Vue 的生态，如 Vue Router（路由管理）、Vuex（状态管理）、Composition API（函数式编程范式），或参与开源项目实践。记住，持续实践是掌握技术的关键——现在就开始你的第一个 Vue 项目吧！

最新发布

查看更多文章