vue入门小案例（实时显示当前日期和时间的时钟）

最新推荐文章于 2025-03-18 15:38:11 发布

YCY866

最新推荐文章于 2025-03-18 15:38:11 发布

阅读量2.4k

点赞数 8

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2301_76478257/article/details/136823091

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

步骤 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 实例中，我们做了以下几件事情：