02. [初识]用Vue3编写的计数器

目录
文章目录隐藏
  1. 编写项目基本结构
  2. 准备计数器变量
  3. mounted() 中实现自增

通过编写计数器我们要从面向 DOM 编程的思想中解放出来,进入面向数据的编程方式。如果你以前只使用过JQuery,没有使用过AngularVue,这可能会颠覆你的认知,但这就是 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()是自动执行,那就可以在里边写一个计时器了。

mounted() {
    // console.log('页面加载完成后-自动执行')
    setInterval(() => {
        this.counter += 1   //这个 this.counter 指向的就是 data 中的 counter
        //this.$data.counter +=1   //效果相同
    }, 1000)
},

写完这段代码,浏览页面,就可以看到计数器的效果了。

用 Vue3 编写的计数器

现在你回想以前不用框架,原生写法时,是不是要自己编写 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>

「点点赞赏,手留余香」

5

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 02. [初识]用Vue3编写的计数器

发表回复