Web前端开发实战：HTML5+CSS3+JavaScript+Vue+Bootstrap

CSS3

CSS3是最新的CSS标准，提供了许多新的样式规则和特性，使得网页样式设计更加灵活和强大。以下是一些常用的CSS3特性：

• 选择器：如属性选择器、伪类选择器、伪元素选择器等
• 布局：如弹性盒子（Flexbox）、网格布局（Grid）等
• 动画：如过渡（Transitions）、关键帧动画（Keyframes）等
• 媒体查询：用于响应式设计，根据不同设备的特性应用不同的样式

在我们的待办事项应用中，我们使用了CSS3的选择器和一些基本样式规则。同时，结合Bootstrap的预定义样式类，实现了响应式布局和美观的用户界面。

JavaScript

JavaScript是一种广泛应用于网页开发的脚本语言，它使得网页具有动态交互能力。以下是一些常用的JavaScript特性：

• DOM操作：通过JavaScript，可以动态操作HTML文档结构，如添加、删除或修改元素
• 事件处理：如点击事件、鼠标事件、键盘事件等
• 异步编程：如Promise、async/await等，用于处理异步操作
• 模块化：如ES6模块、CommonJS模块等，用于组织和管理代码

在我们的待办事项应用中，我们使用了Vue.js来管理和更新应用的状态，简化了DOM操作和事件处理。

Vue.js

Vue.js是一个用于构建用户界面的渐进式框架。它采用自底向上的增量开发设计，非常容易与其他项目或现有技术栈集成。以下是Vue.js的一些核心概念：

• 组件：Vue.js中的组件是可复用的Vue实例，具有独立的模板、数据和逻辑
• 数据绑定：Vue.js通过双向数据绑定，使得数据和视图保持同步
• 指令：如v-if、v-for、v-bind、v-model等，用于操作DOM元素
• 生命周期钩子：如created、mounted、updated、destroyed等，用于在组件的不同生命周期阶段执行代码

在我们的待办事项应用中，我们使用了Vue.js的双向数据绑定和指令，简化了数据管理和DOM操作。

Bootstrap

Bootstrap是一个开源的前端框架，提供了丰富的CSS和JavaScript组件，帮助我们快速构建响应式和现代化的网页。以下是Bootstrap的一些核心特性：

• 栅格系统：通过定义行（row）和列（col），实现灵活的响应式布局
• 组件：如导航栏、按钮、卡片、模态框等，提供了一致的样式和交互行为
• 工具类：如文本、背景、边框、间距等，提供了常用的样式类，简化了样式设计

在我们的待办事项应用中，我们使用了Bootstrap的栅格系统和一些预定义的组件类，实现了美观和响应式的用户界面。

进阶功能

为了进一步提升我们的待办事项应用，我们可以添加一些进阶功能，如任务编辑、数据持久化和过滤功能。

任务编辑

我们可以允许用户编辑已添加的任务。为

此，我们需要在每个任务项旁边添加一个编辑按钮，点击该按钮时，显示一个输入框，允许用户修改任务内容。

在index.html文件中，更新任务列表项：

<li class=\"list-group-item d-flex justify-content-between align-items-center\" v-for=\"(task, index) in tasks\" :key=\"index\"> <span :class=\"{ \'completed\': task.completed }\" @click=\"toggleTask(index)\">{{ task.text }}</span> <input v-if=\"task.editing\" type=\"text\" v-model=\"task.text\" @blur=\"finishEdit(index)\" @keyup.enter=\"finishEdit(index)\"> <button class=\"btn btn-sm\" @click=\"editTask(index)\"> <i class=\"fas fa-edit\"></i> </button> <button class=\"btn btn-danger btn-sm\" @click=\"removeTask(index)\">Delete</button></li>

在app.js文件中，添加相应的方法：

new Vue({ el: \'#app\', data: { newTask: \'\', tasks: [] }, methods: { addTask() { if (this.newTask.trim() !== \'\') { this.tasks.push({ text: this.newTask, completed: false, editing: false }); this.newTask = \'\'; } }, toggleTask(index) { this.tasks[index].completed = !this.tasks[index].completed; }, removeTask(index) { this.tasks.splice(index, 1); }, editTask(index) { this.tasks[index].editing = true; }, finishEdit(index) { this.tasks[index].editing = false; } }});

数据持久化

为了使得用户在刷新页面后仍能看到之前添加的任务，我们可以将任务列表存储在本地存储（LocalStorage）中。

在app.js文件中，添加生命周期钩子和相应的方法：

new Vue({ el: \'#app\', data: { newTask: \'\', tasks: JSON.parse(localStorage.getItem(\'tasks\')) || [] }, methods: { addTask() { if (this.newTask.trim() !== \'\') { this.tasks.push({ text: this.newTask, completed: false, editing: false }); this.newTask = \'\'; this.saveTasks(); } }, toggleTask(index) { this.tasks[index].completed = !this.tasks[index].completed; this.saveTasks(); }, removeTask(index) { this.tasks.splice(index, 1); this.saveTasks(); }, editTask(index) { this.tasks[index].editing = true; }, finishEdit(index) { this.tasks[index].editing = false; this.saveTasks(); }, saveTasks() { localStorage.setItem(\'tasks\', JSON.stringify(this.tasks)); } }});

过滤功能

我们可以添加过滤功能，允许用户根据任务状态（全部、未完成、已完成）筛选任务列表。

在index.html文件中，添加过滤按钮：

<div class=\"btn-group mb-3\" role=\"group\" aria-label=\"Filter tasks\"> <button type=\"button\" class=\"btn btn-secondary\" @click=\"filterTasks(\'all\')\">All</button> <button type=\"button\" class=\"btn btn-secondary\" @click=\"filterTasks(\'active\')\">Active</button> <button type=\"button\" class=\"btn btn-secondary\" @click=\"filterTasks(\'completed\')\">Completed</button></div>

在app.js文件中，添加相应的过滤逻辑：

new Vue({ el: \'#app\', data: { newTask: \'\', tasks: JSON.parse(localStorage.getItem(\'tasks\')) || [], filter: \'all\' }, computed: { filteredTasks() { if (this.filter === \'all\') { return this.tasks; } else if (this.filter === \'active\') { return this.tasks.filter(task => !task.completed); } else if (this.filter === \'completed\') { return this.tasks.filter(task => task.completed); } } }, methods: { addTask() { if (this.newTask.trim() !== \'\') { this.tasks.push({ text: this.newTask, completed: false, editing: false }); this.newTask = \'\'; this.saveTasks(); } }, toggleTask(index) { this.tasks[index].completed = !this.tasks[index].completed; this.saveTasks(); }, removeTask(index) { this.tasks.splice(index, 1); this.saveTasks(); }, editTask(index) { this.tasks[index].editing = true; }, finishEdit(index) { this.tasks[index].editing = false; this.saveTasks(); }, saveTasks() { localStorage.setItem(\'tasks\', JSON.stringify(this.tasks)); }, filterTasks(filter) { this.filter = filter; } }});

在index.html文件中，将任务列表项的v-for指令中的tasks替换为filteredTasks：

<li class=\"list-group-item d-flex justify-content-between align-items-center\" v-for=\"(task, index) in filteredTasks\" :key=\"index\"> <span :class=\"{ \'completed\': task.completed }\" @click=\"toggleTask(index)\">{{ task.text }}</span> <input v-if=\"task.editing\" type=\"text\" v-model=\"task.text\" @blur=\"finishEdit(index)\" @keyup.enter=\"finishEdit(index)\"> <button class=\"btn btn-sm\" @click=\"editTask(index)\"> <i class=\"fas fa-edit\"></i> </button> <button class=\"btn btn-danger btn-sm\" @click=\"removeTask(index)\">Delete</button></li>

总结

通过这个待办事项应用的开发，我们详细展示了如何结合HTML5、CSS3、JavaScript、Vue.js和Bootstrap进行Web前端开发。这个项目不仅涵盖了前端开发的各个方面，还展示了如何将这些技术整合在一起，构建一个功能完善、界面美观的Web应用。

希望通过这个实战项目，你能够更加深入地理解和掌握Web前端开发的核心技术，并能够在实际项目中应用这些知识和技能。

⭐️ 好书推荐

《Web前端开发实战：HTML5+CSS3+JavaScript+Vue+Bootstrap(微视频版)》

【内容简介】

本书以通俗易懂的语言、翔实生动的案例，全面介绍了使用HTML5、CSS3、JavaScript、Bootstrap、Vue等技术搭建Web前端的方法和技巧，全书共分20章，内容涵盖了HTML5基础、文本和图像、音频和视频、列表和超链接、CSS3基础、文本样式、图像和背景样式、表格、表单、CSS3盒子模型、CSS3移动布局、CSS3变形和动画、JavaScript基础、事件处理、BOM和DOM、Bootstrap基础、CSS通用样式、CSS组件、JavaScript插件和使用Vue等，力求为读者带来良好的学习体验。

📚 京东购买链接：《Web前端开发实战：HTML5+CSS3+JavaScript+Vue+Bootstrap(微视频版)》

黄石新闻