效果图：
新手入门：用 Vue.js 打造一个番茄工作法倒计时器
目录
项目简介
本文将通过一个实用的 Vue.js 项目，带你一步步实现一个 番茄工作法倒计时器。这是一个适合初学者的项目，可以帮助你掌握 Vue.js 的基本使用，包括数据绑定、事件处理、计算属性和监视属性等核心概念。最终效果是一个能切换工作/休息时间、开始/暂停/重置倒计时的应用。
创建基本 HTML 页面
首先，我们将构建一个基本的 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>
<script src="https://cdn.staticfile.net/vue/2.7.0/vue.min.js"></script>
<style>
/* 样式部分将在下一步详细讲解 */
</style>
</head>
<body>
<div id="app">
<h1>番茄工作法倒计时器</h1>
<!-- 倒计时显示区域 -->
<div id="timer">
<span>{
{ minutes }}</span>:<span>{
{ seconds }}</span>
</div>
<!-- 控制按钮 -->
<div id="controls">
<button @click="startTimer">开始</button>
<button @click="pauseTimer">暂停</button>
<button @click="resetTimer">重置</button>
</div>
<!-- 设置工作与休息时间 -->
<div id="settings">
<label>工作时长（分钟）：</label>
<input type="number" v-model.number="workTimeInput">
<label>休息时长（分钟）：</label>
<input type="number" v-model.number="breakTimeInput">
</div>
</div>
<script>
/* Vue 实现将在后面讲解 */
</script>
</body>
</html>
添加 CSS 样式
在 style 标签中添加样式，为页面设计一个清晰的布局。包括居中显示、背景渐变、倒计时显示区和按钮样式等。
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
}
#app {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
max-width: 300px;
width: 100%;
}
h1 {
color: #333;
}
#timer {
font-size: 48px;
margin: 20px 0;
color: #4caf50;
}
#controls button {
padding: 10px 20px;
margin: 5px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#controls button:hover {
background-color: #45a049;
}
#settings {
margin-top: 20px;
}
#settings label {
margin-right: 10px;
}
#settings input {
width: 50px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
用 Vue.js 构建倒计时逻辑
在 <script> 标签中添加 Vue.js 实例，通过 Vue 的 data 来管理应用的数据状态，包括工作时间、休息时间、倒计时状态等。
<script>
new Vue({
el: '#app',
data: {
workTimeInput: 25, // 初始工作时间（分钟）
breakTimeInput: 5, // 初始休息时间（分钟）
timeRemaining: 25 * 60, // 剩余时间（秒）
isWorkTime: true, // 当前是否为工作时间
timerInterval: null // 用于保存计时器的 interval
},
computed: {
// 计算分钟和秒钟的显示格式
minutes() {
return String(Math.floor(this.timeRemaining / 60)).padStart(2, '0');
},
seconds() {
return String(this.timeRemaining % 60).padStart(2, '0');
}
},
methods: {
// 开始倒计时
startTimer() {
if (this.timerInterval) return;
this.timerInterval = setInterval(() => {
this.timeRemaining--;
if (this.timeRemaining <= 0) {
this.switchMode();
}
}, 1000);
},
// 切换工作/休息模式
switchMode() {
if (this.isWorkTime) {
this.timeRemaining = this.breakTimeInput * 60;
this.isWorkTime = false;
alert('工作时间结束！现在是休息时间');
} else {
this.timeRemaining = this.workTimeInput * 60;
this.isWorkTime = true;
alert('休息结束！继续工作');
}
},
// 暂停倒计时
pauseTimer() {
clearInterval(this.timerInterval);
this.timerInterval = null;
},
// 重置倒计时
resetTimer() {
this.pauseTimer();
this.isWorkTime = true;
this.timeRemaining = this.workTimeInput * 60;
}
},
watch: {
// 监控工作时间和休息时间输入的变化
workTimeInput(newVal) {
if (this.isWorkTime) {
this.timeRemaining = newVal * 60;
}
},
breakTimeInput(newVal) {
if (!this.isWorkTime) {
this.timeRemaining = newVal * 60;
}
}
}
});
</script>
实现倒计时的核心功能
-
data对象：定义应用的初始数据，包括workTimeInput、breakTimeInput、timeRemaining、isWorkTime和timerInterval。 -
computed计算属性：minutes和seconds计算属性，格式化倒计时显示的分钟和秒钟。
-
methods方法：startTimer：启动倒计时，如果倒计时已启动，直接返回。switchMode：切换工作和休息模式。pauseTimer：暂停倒计时。resetTimer：重置倒计时，将倒计时重置为工作时长。
-
watch监视属性：- 监视
workTimeInput和breakTimeInput的变化，当用户调整工作或休息时间时，自动更新倒计时时间。
- 监视
总结与扩展思路
通过这个教程，你了解了如何使用 Vue.js 构建一个简单的倒计时器应用，并实现了番茄工作法的基本功能。接下来可以考虑：
- 增加工作/休息周期的计数器
- 添加声音提醒
- 保存用户的工作习惯（如工作/休息时长）到本地
这个项目既适合初学者练习 Vue.js 的基本操作，也可以扩展为更加丰富的个人效率工具。希望你在学习中收获颇丰！