2 Vue 中的mounted()方法用 setInterval

阅读目录说明编写项目基本结构准备计数器变量mounted() 中实现自增说明通过编写计数器我们要从面向DOM编程的思想中解放出来，进入面向数据的编程方式。如果你以前只使用过JQuery，没有使用过Angular和Vue，这可能会颠覆你的认知，但这就是Vue的众多特性之一。编写项目基本结构新建一个Demo2.html文件，这时候你可以把Demo1.html内容复制过来，但更建议你手敲一下上节的代码，

知其黑、受其白

11566人浏览 · 2021-11-23 19:14:51

知其黑、受其白 · 2021-11-23 19:14:51 发布

说明

通过编写计数器我们要从面向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>