通过编写计数器我们要从面向 DOM 编程的思想中解放出来，进入面向数据的编程方式。如果你以前只使用过JQuery，没有使用过Angular和Vue，这可能会颠覆你的认知，但这就是 Vue 的众多特性之一。
编写项目基本结构
新建一个Demo2.html文件，这时候你可以把 Demo1.html 内容复制过来，但更建议你手敲一下上节的代码，作为复习。
<!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({
template: '<div>Hello World</div>'
}).mount("#app")
</script>
</html>
准备计数器变量
基本编码结构准备好后，可以开始写计数器了。计数器能变化，肯定是需要一个变量的，这个变量起名为counter。在 Vue 的template(模板)中使用变量，需要用到字面量标识{{}}双大括号，我喜欢把这个双大括号叫做字面量。
Vue.createApp({
template: '<div>{{counter}}</div>'
}).mount("#app")
到目前为止，只是在模板中使用了counter变量，但是还没有声明，声明这个变量需要在data()函数中，具体代码如下。
data() {
return {
counter: 1
}
},
也许你现在还不能完全明白这段代码的意思，这不要紧，前几节你只要跟着敲，得到结果就好。写到这里，你可以双击文件打开，在浏览器中看一下效果。
![02. [初识]用Vue3编写的计数器 1](/d/file/webqianduan/x3whlfjlumcx3whlfjlumc.png "02. [初识]用Vue3编写的计数器 1")
现在你回想以前不用框架，原生写法时，是不是要自己编写 DOM，而现在完全不用了。
document.getElementById('app').innerHTML()
这节就是你要转变的一个观点，从面向 DOM 编程，改为面向数据编程。你能感受到这点不同，这就是你本文最大的收获。如果你真的想学好 Vue3，光看和听是没有用的，还是要动手敲，我建议你先把本文的代码敲三边以上。我是一个比较笨的开发者，所以一般学习时，我都会把实例代码多敲几边。这样才能有个初步印象。
如果你完全是一个新手，对本文的代码不能完全理解，也不要慌张。在[初识]阶段，我们只要动手，大概了解Vue3的基本特性就可以。在基础语法中，我们还会详细讲解。
最后，为了方便你学习，给出Demo2.html的全部代码.
<!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>