问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

Vue.js 入门案例 - 实时时钟

创作时间:
作者:
@小白创作中心

Vue.js 入门案例 - 实时时钟

引用
CSDN
1.
https://m.blog.csdn.net/2301_76478257/article/details/136823091

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

  1. 定义了一个 data 对象，其中包含一个 currentTime 属性，用于存储当前时间。
  2. 使用 mounted 钩子函数，在 Vue 实例挂载到 DOM 后立即调用 updateClock 方法。
  3. 定义了一个 updateClock 方法，它使用 setInterval 函数每秒更新 currentTime 属性的值。

步骤 3: 在 HTML 中绑定数据

在 HTML 模板中，我们使用 {{ currentTime }} 语法来绑定 currentTime 数据属性到一个段落 <p> 元素中。

<p>{{ currentTime }}</p>

步骤 4: 运行案例

保存 HTML 文件并在浏览器中打开它，你将看到一个实时更新的时钟，显示当前的时间。

这个简单的案例展示了 Vue.js 的基本特性，包括创建 Vue 实例、声明响应式数据、使用模板语法来绑定数据以及使用生命周期钩子和方法来处理逻辑。

热门推荐
© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号