用vue框架写一个时钟的页面

好的，下面是一个使用Vue框架编写的简单时钟页面示例。

首先，在HTML中创建一个容器元素来显示时钟，并将Vue的CDN链接添加到页面的头部。

<div id="clock">
  {{ time }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

接下来，在JavaScript中定义Vue实例，并在data选项中添加一个名为time的属性来存储当前时间。我们将使用Vue的计算属性来实时更新时间。

var clock = new Vue({
  el: '#clock',
  data: {
    time: ''
  },
  computed: {
    updateTime: function() {
      var date = new Date();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      this.time = hours + ':' + minutes + ':' + seconds;
    }
  },
  created: function() {
    setInterval(this.updateTime, 1000);
  }
});

最后，在CSS中对时钟进行样式设置。以下是一个简单的样式示例：

#clock {
  font-size: 3em;
  text-align: center;
  margin-top: 100px;
}

完成上述步骤后，保存并刷新页面，您应该会看到一个带有当前时间的时钟。