4db7f29b53a5488387eddc858c3d889b.gif

步骤 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 实例、声明响应式数据、使用模板语法来绑定数据以及使用生命周期钩子和方法来处理逻辑。

 

GitHub 加速计划 / vu / vue
86
16
下载
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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐