02. [初识]用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 } },
也许你现在还不能完全明白这段代码的意思,这不要紧,前几节你只要跟着敲,得到结果就好。写到这里,你可以双击文件打开,在浏览器中看一下效果。
这时候页面上应该展示出1
。再回来看整个代码,他的意思是说,在 Vue 中声明了一个变量counter
,并在模板中展示出来。知识点就是如何声明变量和在模板中使用变量。
<!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>
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>
码云笔记 » 02. [初识]用Vue3编写的计数器