使用Vue.js创建简单网页的摘要：Vue.js是一款轻量级前端框架，通过数据驱动视图实现高效开发，首先需引入Vue.js库，创建Vue实例并挂载到DOM元素上，在HTML中使用{{ }}插值表达式绑定数据，通过v-model实现表单双向绑定，v-on添加事件监听，组件化开发可复用代码，提高维护性，Vue的生命周期钩子函数可在不同阶段执行逻辑，最后使用Vue CLI或CDN部署，即可快速构建响应式、交互性强的单页面应用，适合初学者快速上手前端开发。
Vue.js快速搭建简单网页：从零开始的入门指南
Vue.js作为当前主流的前端框架之一，凭借其轻量级架构、渐进式设计理念和强大的响应式数据绑定能力，成为开发者构建交互式应用的首选工具，对于初学者而言，通过实现一个功能完整的**个人待办事项列表**项目，是快速掌握Vue核心概念的高效路径，本教程无需复杂环境配置，仅需基础HTML/CSS/JavaScript知识,即可零门槛上手。
准备工作：引入Vue.js
在项目开发初期，最便捷的方案是通过CDN（内容分发网络）引入Vue 3，在HTML文件的`
`标签中添加以下代码：<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
**注**：我们采用Vue 3的**生产版本**（`vue.global.prod.js`），它包含核心功能且经过压缩优化，适合小型项目快速开发，若需调试可暂时使用开发版本（`vue.global.js`）。
创建项目结构：HTML骨架与样式
Vue应用的核心是**根元素**（如`
`），所有动态内容都将在此渲染,以下是完整的HTML结构及配套样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的待办事项</title>
<style>
/* 响应式布局与视觉优化 */
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
min-height: 100vh;
}
#app {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
font-weight: 600;
}
.input-group {
display: flex;
gap: 10px;
margin-bottom: 25px;
}
input[type="text"] {
flex: 1;
padding: 12px 16px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="text"]:focus {
outline: none;
border-color: #42b983;
}
button {
padding: 12px 20px;
background: #42b983;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
transition: all 0.3s;
}
button:hover {
background: #3aa876;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(66, 185, 131, 0.3);
}
ul {
list-style: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
border-bottom: 1px solid #eee;
transition: background 0.2s;
}
li:hover {
background: #f8f9fa;
}
.task-text {
flex: 1;
color: #34495e;
font-size: 15px;
}
.delete-btn {
background: #ff6b6b;
padding: 6px 12px;
font-size: 14px;
border-radius: 6px;
}
.delete-btn:hover {
background: #ff5252;
}
.empty-state {
text-align: center;
color: #95a5a6;
padding: 40px 0;
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<!-- Vue动态内容将在此渲染 -->
</div>
</body>
</html>
**优化说明**： - 采用现代CSS特性（`box-sizing`、`linear-gradient`、`transition`）提升视觉体验 - 添加响应式设计（`viewport` meta标签）和空状态提示 - 优化交互细节（输入框聚焦效果、按钮悬浮动画）
初始化Vue实例：数据与方法
在``标签前添加`