用vue做一个简单的网页
时间: 2023-07-29 14:12:29 浏览: 48
好的,以下是一个简单的示例,用 Vue.js 构建一个显示当前时间的网页:
首先,需要在 HTML 文件中引入 Vue.js 库和一个自定义的 JavaScript 文件:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
</body>
</html>
```
在自定义的 JavaScript 文件中,可以定义一个 Vue 实例,用来控制网页中的数据和行为:
```javascript
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods: {
updateTime: function() {
this.message = new Date().toLocaleString();
}
},
mounted: function() {
setInterval(this.updateTime, 1000);
}
});
```
这个 Vue 实例有一个名为 `app` 的标识符,它绑定到 HTML 中的 `#app` 元素上。`data` 属性中定义了一个名为 `message` 的变量,它初始值为空字符串。`methods` 属性中定义了一个名为 `updateTime` 的方法,用来更新 `message` 变量的值为当前时间。`mounted` 属性中定义了一个方法,它会在 Vue 实例挂载到页面后立即执行,这里用来定时调用 `updateTime` 方法,实现页面中时间的实时更新。
以上代码可以保存为 `main.js` 文件,放置在 HTML 文件同一目录下。然后在浏览器中打开 HTML 文件,就可以看到一个简单的网页,显示当前时间。