码云 Vue3教程 2021-07-16

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

AI 概述

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

文章目录隐藏

编写项目基本结构
准备计数器变量
mounted() 中实现自增

通过编写计数器我们要从面向 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编写的计数器的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 5 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

Vue3 Vue3教程 vue相关计数器

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 02. [初识]用Vue3编写的计数器

码云 SVIP

分享到：

编写项目基本结构

准备计数器变量

mounted() 中实现自增

码云 SVIP

相关推荐

发表回复 取消回复

发表回复取消回复