_
2023/5/11 18:36:463873
vue3编写的计数器

这几节课,我们来做一个简单的实例,编写一个计数器。通过编写计数器体验数据驱动界面的编程模式。

编写项目基本结构

打开上节课的代码,新建一个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,而现在完全不用了

视频讲解