【Vue3从零开始-第二章】2-1 vue应用的基础概念

2022-09-26 125

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第二章】2-1 vue应用的基础概念

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在第一章的文章中，大致上都了解了vue的一些指令和使用方法，在第二章正式开始学习之前，应该让大家更深的了解一下vue应用的基础概念，让大家不仅要会写vue代码，还要知道其中的概念，这样就可以更好的理解之后的内容了。

createApp()

在之前的文章中，我们一直用到的代码都是这样写的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp();
    app.mount('#root');
</script>
</html>
复制代码

在这段代码中，Vue后面会调用一个createApp的方法，createApp方法的字面意思就是创建一个应用，app就是application的缩写。createApp实际意思就是创建一个vue的应用，而这个应用要通过mount方法挂载到root节点上，而这个应用只作用于id = root的元素节点上。如果body中还有其他根元素，mount方法会对它视而不见，只对root节点有用。

<script>
    const app = Vue.createApp({
        data(){
            return {
                message: 'Hello World'
            }
        },
        template: "<div>{{message}}</div>"
    });
    app.mount('#root');
</script>
复制代码

在这段代码中，可以看到createApp方法中传入的是一个对象，在第一章中，我们了解到了一个网页都是有一个又一个的组件组成的，而createApp里面的对象就表示这个应用最外层的组件应该如何展示。

在最外层的组件中，我们传入了data方法用于展示数据，传入template模板用于展

示DOM元素，所以在打开页面的时候，就会第一时间看到这个最外层的组件了。

$3SPWFKA3X{5_]24$1]~[}}G.png$

根组件

在上面的内容中，我们创建一个Vue应用之后，存储到了app变量中，如果我们想要获取这个应用中对应的根组件，应该怎么获取呢？

调用app.mount()方法的时候，方法返回的结果就是根组件

下面我们就来详细介绍一个这个根组件

const vm = app.mount('#root');
复制代码

我们将mount方法返回值给到vm之后，vm就代表vue应用中的根组件

当我们理解了vue的应用和根组件之后，应该会发现在获取根组件的时候，用的是vm去定义的，那这个vm的意义是什么呢？

在之前的内容中，我们也学习过，vue是一个面向数据编程的，在代码中，我们定义了数据message，也定义了模板template，那么vue就会自动的把模板和数据关联起来，变成我们想要展示的一个页面效果。

vue面向数据编程的模式就是参考了MVVM设计模式，那什么是MVVM设计模式呢？可以结合上面的代码来理解一下MVVM

M：model - 数据 ----> message: 'Hello World'

V：view - 视图 ----> {{message}}

VM：viewModel - 视图数据连接层 ----> app.mount('#root');

所以我们会用vm去定义根组件，它表示的就是视图连接层，也是vue里面一个又一个的组件。

全局使用

在上面的代码中，我们定义了app和vm，那么我们应该怎么用这两个参数呢？这两个参数里面返回的数据有啥用呢？下面我们就可以打开浏览器控制台，一起去看看这俩玩意儿到底能干点啥。

$6QM_231{)CBLKQB6$$CL({Q.png$

app和vm都是定义的全局常量，所以可以在浏览器中直接输出由于数据和视图的绑定，或者说是关联关系是通过vm来维护的，那么我们就可以借助vm来对数据和视图做些操作了。

$B_]OXDP3Z]XSP{X3_DPG`9J.png$

在浏览器控制台中，我们可以用vm.$data的方式获取到对应的根组件上的一些数据内容，也就是data里面定义的数据，我们的data数据里面定义了message，所以可以通过vm.$data.message去操作message，使数据和视图都发生改变。

总结

Vue.createApp()创建一个vue的应用，传递进去的参数表示这个应用的根组件应该如何去创建。

mount()返回的是vue应用对应的根组件，这个根组件充当了vm这个角色。

vm.$data修改数据，使数据和视图都发生改变之后，页面重新渲染

【Vue3从零开始-第二章】2-1 vue应用的基础概念

前言

createApp()

根组件

全局使用

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景