Vue.js入门核心案例通常以简单数据绑定与交互展示为核心，通过创建Vue实例（new Vue()），配置el挂载DOM节点（如id="app"），data中定义响应式数据（如message），模板中使用插值表达式{{message}}动态渲染数据，结合v-on指令（如@click）绑定事件处理函数，实现点击按钮更新数据的效果，该案例直观呈现Vue的数据响应式机制和指令系统，是理解Vue双向绑定、声明式渲染及组件化思想的基础，帮助开发者快速上手Vue的核心特性。
Vue.js 入门：从“待办清单”开始，体验数据驱动的魔力
对于前端开发者而言,一个精心设计的“Hello World”项目往往是掌握新框架的钥匙，Vue.js 凭借其**渐进式设计、易于上手、核心数据驱动**的特性，成为当下备受青睐的前端框架之一，本文将通过一个经典而实用的“待办事项列表”（Todo List）案例，带你初探 Vue.js 的世界，直观感受“数据驱动视图”这一核心机制带来的高效与便捷。
准备：快速搭建 Vue.js 开发环境
在动手实践之前,我们需要搭建一个基础的 Vue.js 开发环境，对于初学者来说，最便捷的方式是使用 **CDN 引入**——无需复杂安装，只需在 HTML 文件中引入 Vue.js 库即可运行。
-
创建一个 HTML 文件（
index.html），在<head>标签内引入 Vue.js 的开发版本 CDN 链接（开发版包含警告信息，便于调试）：<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-
在
<body>标签内添加一个容器元素（通常是<div>），并赋予其一个唯一的id（id="app"），这个div将作为 Vue 应用的挂载点：<div id="app"></div>
至此,开发环境已准备就绪，我们将在这个环境中构建我们的第一个 Vue 应用。
案例：构建交互式待办事项列表（Todo List）
待办事项列表是前端框架入门的经典案例,它完美地涵盖了 Vue.js 的三大核心功能：数据绑定、事件处理、列表渲染，我们的目标是实现一个功能完备的清单，支持“添加新事项”、“标记完成/未完成状态”以及“删除事项”三个核心操作。
案例效果预览
最终实现的功能界面如下：
- 输入框：用于输入新的待办事项内容。
- 添加按钮：点击后将输入框内容添加到待办列表中。
- 待办事项列表：动态展示所有待办事项，每项包含：
- 复选框：用于标记事项为“已完成”或“未完成”。
- 事项文本：显示待办内容，完成时添加删除线样式。
- 删除按钮：点击后移除该待办事项。
代码实现与深度解析
我们将 Vue.js 的逻辑（数据、方法）和视图（模板）整合在挂载点 <div id="app"></div> 内部，Vue 会将数据与视图自动绑定，实现响应式更新。
（1）完整代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 第一个案例：待办事项列表</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style>
/* 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
color: #333;
}
.container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
/* 输入区域 */
.input-container {
display: flex;
margin-bottom: 20px;
}
.todo-input {
flex: 1;
padding: 10px 15px;
font-size: 16px;
border: 2px solid #ddd;
border-radius: 6px 0 0 6px;
outline: none;
transition: border-color 0.3s;
}
.todo-input:focus {
border-color: #42b983;
}
.add-btn {
padding: 10px 20px;
background-color: #42b983;
color: white;
border: none;
border-radius: 0 6px 6px 0;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: background-color 0.3s;
}
.add-btn:hover {
background-color: #3aa876;
}
/* 列表区域 */
.todo-list {
list-style: none;
padding: 0;
margin: 0;
}
.todo-item {
display: flex;
align-items: center;
padding: 12px;
border-bottom: 1px solid #eee;
transition: background-color 0.2s;
}
.todo-item:hover {
background-color: #f9f9f9;
}
.todo-item:last-child {
border-bottom: none;
}
.todo-checkbox {
margin-right: 12px;
width: 18px;
height: 18px;
cursor: pointer;
}
.todo-text {
flex: 1;
margin-right: 10px;
font-size: 16px;
transition: all 0.3s;
}
.todo-text.completed {
text-decoration: line-through;
color: #999;
}
.delete-btn {
