
vue入门小案例(实时显示当前日期和时间的时钟)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue

·
步骤 1: 创建 HTML 文件
首先,我们需要创建一个 HTML 文件,它将包含 Vue 应用的结构。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 入门案例 - 实时时钟</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>当前时间:</h1>
<p>{{ currentTime }}</p>
</div>
<script>
// 接下来,我们将在这里编写 Vue 实例的代码
</script>
</body>
</html>
步骤 2: 初始化 Vue 实例
在 <script>
标签内,我们将初始化一个 Vue 实例,并将其关联到 #app
元素。
new Vue({
el: '#app',
data: {
currentTime: new Date().toLocaleTimeString() // 获取当前时间
},
mounted: function() {
this.updateClock(); // 组件挂载后立即更新时钟
},
methods: {
updateClock: function() {
setInterval(() => {
this.currentTime = new Date().toLocaleTimeString(); // 更新当前时间
}, 1000); // 每秒更新一次
}
}
});
在这个 Vue 实例中,我们做了以下几件事情:
- 定义了一个
data
对象,其中包含一个currentTime
属性,用于存储当前时间。 - 使用
mounted
钩子函数,在 Vue 实例挂载到 DOM 后立即调用updateClock
方法。 - 定义了一个
updateClock
方法,它使用setInterval
函数每秒更新currentTime
属性的值。
步骤 3: 在 HTML 中绑定数据
在 HTML 模板中,我们使用 {{ currentTime }}
语法来绑定 currentTime
数据属性到一个段落 <p>
元素中。
<p>{{ currentTime }}</p>
步骤 4: 运行案例
保存 HTML 文件并在浏览器中打开它,你将看到一个实时更新的时钟,显示当前的时间。
这个简单的案例展示了 Vue.js 的基本特性,包括创建 Vue 实例、声明响应式数据、使用模板语法来绑定数据以及使用生命周期钩子和方法来处理逻辑。




vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:5 个月前 )
9e887079
[skip ci] 4 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 7 个月前
更多推荐
所有评论(0)