2 [初识]用Vue3编写的计数器
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2 [初识]用Vue3编写的计数器相关的知识，希望对你有一定的参考价值。
说明
通过编写计数器我们要从面向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
,
也许你现在还不能完全明白这段代码的意思，这不要紧，前几节你只要跟着敲，得到结果就好。写到这里，你可以双击文件打开，在浏览器中看一下效果。
<!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
,
template: '<div>counter</div>'
).mount("#app")
</script>
</html>
这时候页面上应该展示出1。再回来看整个代码，他的意思是说，在Vue中声明了一个变量counter，并在模板中展示出来。知识点就是如何声明变量和在模板中使用变量。
mounted() 中实现自增
mounted是一个声明周期钩子函数，你把他想成是页加载渲染完成，自动执行的方法就可以了。
先用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，而现在完全不用了。
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>
Vue生命周期中mounted和created的区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
以上是关于2 [初识]用Vue3编写的计数器的主要内容，如果未能解决你的问题，请参考以下文章
初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段
初识Spring源码 -- doResolveDependency | findAutowireCandidates | @Order@Priority调用排序 | @Autowired注入(代码片段
Vue3官网-高级指南（十七）响应式计算`computed`和侦听`watchEffect`（onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre）(代码片段