这几节课，我们来做一个简单的实例，编写一个计数器。通过编写计数器体验数据驱动界面的编程模式。
编写项目基本结构
打开上节课的代码，新建一个demo1.html，我们把上节课的代码复制过来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo1计数器</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
template: '<div>Hello World</div>'
}).mount("#app")
</script>
</html>声明和使用变量
修改template模板中的代码，使用 {{}} 双大括号，插入一个变量counter
Vue.createApp({
template: '<div>{{counter}}</div>'
}).mount("#app")然后我们需要在data函数里面声明counter变量，在这里声明的变量vue才能把它渲染到界面的上。
data() {
return {counter: 1}
},这时候就可以用浏览器打开看一下效果，不出意外的话页面上应该显示了一个1。
mounted中实现计数器的自增
mounted是一个生命周期钩子函数，它是我们接触到的第一个生命周期函数，你可以把它理解成页面加载完毕时会自动执行的js事件。
先用console.log()来试试水
<script>
Vue.createApp({
data() {
return {
counter: 1
}
},
mounted() {
console.log('页面加载完成后-自动执行')
},
template: '<div>{{counter}}</div>'
}).mount("#app")
</script>当你的明白这个函数的意义后，就可以在mounted中来写计数器了
mounted() {
console.log('页面加载完成后-自动执行')
setInterval(() => {
this.counter += 1 //这个this.counter指向的就是data中的counter
//this.$data.counter +=1 //效果相同
}, 1000)
},写完这段代码，浏览页面，就可以看到计数器的效果了。现在你回想以前不用框架，原生写法时，是不是要自己编写DOM，而现在完全不用了