抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

继续看第二节教程第二课
首先还是新建一个html结构,引入vue.js,然后写上初始化,这次要实现一个按时间递增的计数器,直接看完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo2计数器</title>
<script src="https://unpkg.com/vue@next"></script>
</head>

<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data() {
return {counter: 1 }
},
mounted() {
console.log('页面加载完成后-自动执行')
setInterval(() => {
this.counter += 1
}, 1000)
},
template: '<div>{{counter}}</div>'
}).mount("#app")
</script>

</html>

首先发现里面增加了datamounted
data里面放的变量,可以绑定在 {{}}里,动态变化。
mounted是一个生命周期的函数,页面加载完成后执行。
最后在里面写了一个定时器,每1000毫秒(一秒)执行一次。把count加一
打开网页,就能看到一个每秒+1的数字了

评论