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

简介: 【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里面一个又一个的组件。


全局使用


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


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


  • appvm都是定义的全局常量,所以可以在浏览器中直接输出 由于数据和视图的绑定,或者说是关联关系是通过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修改数据,使数据和视图都发生改变之后,页面重新渲染
相关文章
|
1天前
|
JavaScript API 开发者
关于vue3中v-model做了哪些升级 ?
【10月更文挑战第1天】
97 59
|
1天前
|
存储 JavaScript 前端开发
如何使用Vue.js实现一个简单的待办事项应用
【10月更文挑战第1天】如何使用Vue.js实现一个简单的待办事项应用
12 5
|
1天前
|
JavaScript 前端开发 网络架构
vue 路由器history和hash工作模式
vue 路由器history和hash工作模式
|
2天前
|
监控 JavaScript 安全
vue3添加pinia
本文介绍了Pinia作为Vue 3的状态管理库的特点,包括其基于Vue 3的Composition API、响应式状态管理、零依赖设计、插件系统、Devtools集成、Tree-shakable特性以及对TypeScript的支持,并详细说明了如何在Vue 3项目中安装和初始化Pinia。
9 0
vue3添加pinia
|
2天前
|
JavaScript
vue3完整教程从入门到精通(新人必学2,搭建项目)
本文介绍了如何在Vue 3项目中安装并验证Element Plus UI框架,包括使用npm安装Element Plus、在main.js中引入并使用该框架,以及在App.vue中添加一个按钮组件来测试Element Plus是否成功安装。
15 0
vue3完整教程从入门到精通(新人必学2,搭建项目)
|
2天前
|
JavaScript Java CDN
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
本文提供了Vue 3从入门到精通的完整教程,涵盖了创建Vue应用、通过CDN使用Vue、定义网站以及使用ES模块构建版本的步骤和示例代码。
16 0
vue3完整教程从入门到精通(新人必学1,vue3快速上手)
|
2天前
|
存储 资源调度 JavaScript
Vite是什么?怎样使用Vite创建Vue3项目?
Vite是什么?怎样使用Vite创建Vue3项目?
6 0
|
3天前
|
JSON 缓存 JavaScript
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
vue尚品汇商城项目-day01【1.vue-cli脚手架初始化项目生成文件的介绍】
10 0
|
3天前
|
JavaScript
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
vue尚品汇商城项目-day01【2.vue-cli脚手架初始化项目的其他配置】
9 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1040 0