6 mvvm设计模式

以你之姓@ 2023-10-06 20:21 16阅读 0赞

#### Vue的 createApp 和 mount 方法讲解 ####

*  简介
 *  最常见的Vue初级代码
 *  createApp() 和 mount() 方法讲解
 *   *  createApp() 方法的基本参数讲解
     *  如何获取Vue的根组件vm
     *  mvvm设计模式讲解
 *  总结

## 简介 ##

从这节开始，我们将详细学习Vue3的基础语法，这些语法我会详细的讲解，目的是让大家理解并且会使用。

所以这篇文章开始，都需要你认真的学习。

## 最常见的Vue初级代码 ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo6</title>
        <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
        })
        app.mount("#app")
    </script>
    
    </html>

## createApp() 和 mount() 方法讲解 ##

现在你先看下面两句JavaScript代码，代码中有两个重要的方法 `createApp()` 和 `mount()`。

const app = Vue.createApp({
        })
    app.mount("#app")

createApp()方法

在第一篇文章编写HelloWorld的时候，就写过这句话 `Vue.createApp()` 从英文单词上理解，这个就是创建一个应用create-创建，App-Application-应用，前面的Vue就是Vue这个框架，所以Vue.createApp()的意思就是创建一个Vue的应用。

mount()方法

mount()方法就是挂载到某个Html的DOM节点上，它接受一个字符串型参数，参数可以使用CSS选择器，一般都是ID选择器的形式，指定挂载的DOM元素。

### createApp() 方法的基本参数讲解 ###

当你明白了createApp()方法的作用，接下来可以更深层次的去了解它的参数。

首先它接受一个对象形式的参数`{}`。

这个对象就是告诉Vue应该如何展现我们最外层的组件, 根据我们在初始章节学习的内容，我们很容易写出下面的内容。

<script>
        const app = Vue.createApp({
        
            data() {
        
                return {
        
                    message: 'mybj123.com'
                }
            },
            template: "<h2>{
        {message}}</h2>"
        })
        app.mount("#app")
    </script>

写完后，可以到浏览器中预览一下结果。

### 如何获取Vue的根组件vm ###

当你使用creatApp()方法创建了一个Vue应用时，如何能获取根组件呢？

其实你使用mount()方法时，就会返回根组件。

下面的代码，声明一个变量来获取根组件，并打印出来。通过打印你可以看出根组件是一个`Proxy`形式的对象。

const vm = app.mount("#app")
    console.log(vm)

这里为什么我把根组件起名为vm那？

我们先来了解一下Vue的设计模式。

### mvvm设计模式讲解 ###

Vue的编程设计模式应该叫做mvvm的设计模式，什么叫做mvvm呢？

它首先是面向数据的编程，程序中定义了数据，然后定义了模板，Vue就可以把数据和模板自动进行关联。

最后挂载到真实的DOM上，展示给用户。

> mvvm解释: 第一个m代表model数据，第一个v代表view视图，最后两个字幕vm代表viewModel视图数据连接层。

如果你看完这个解释还不太明白，我们可以看一下 `Demo6.html` 进行理解。

<script>
        const app = Vue.createApp({
        
            data() {
        
                return {
        
                    // 1.在这里定义了数据，也就是`model`数据
                    message: 'mybj123.com'
                }
            },
             //2.在这里定义了模板，也就是`view`，
            //定义后的自动关联，就叫做`vm`，viewModel数据视图连接层。
            template: "<h2>{
        {message}}</h2>"
        })
        const vm = app.mount("#app")
        console.log(vm)
    </script>

model数据，是我们自己定义的，view模板也是我们自己定义的，但是vm是Vue自动给我们关联的。

当我们明白了什么是mvvm后，你就知道为什么我们给根组件起名vm了。

当我们获取了vm 根节点后，其实就可以操作里边的数据了。比如在控制台中输入下面的代码：

vm.$data.message ='willem笔记'

这个时候你会发现网页界面也跟着发生了变化，变成了willem笔记。

![在这里插入图片描述][23a226ddfad84059b577c4b3fa3a9083.gif_pic_center]

## 总结 ##

首先我们学习了Vue中的两个最基本方法 `createApp()` 和 `mount()` ，然后学习了如何获取和使用根组件，在学习根组件的时候又讲解了Vue框架的基本模式是mvvm，并对mvvm模式进行了具体讲解。

[23a226ddfad84059b577c4b3fa3a9083.gif_pic_center]: https://img-blog.csdnimg.cn/23a226ddfad84059b577c4b3fa3a9083.gif#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 6 mvvm设计模式

Vue的 createApp 和 mount 方法讲解简介最常见的Vue初级代码 createApp() 和 mount() 方法讲解

以你之姓@/ 2023年10月06日 20:21/ 0 赞/ 17 阅读

相关 Vue中的MVVM设计模式

1、传统的MVP设计模式：是面向DOM进行开发的。 model：数据层/模型层 view：视图层 presenter：逻辑层/控制器，是view和model的中转

﹏ヽ暗。殇╰゛Y/ 2023年09月28日 20:32/ 0 赞/ 30 阅读

相关 MVVM设计模式的好处

MVVM设计思想 M （model）模型（数据）从模型到视图如何进行的交互（Data bindinger 数据绑定） V (view) 视图（DOM-html）

叁歲伎倆/ 2023年02月24日 13:25/ 0 赞/ 22 阅读

相关 vue 与 MVVM设计模式

vue是一个使用mvvm模式设计的前端框架 M(模型) 代表 vue中 javascript对象 V(视图) 代表vue中的 DOM (VM)视图模型代表 vu

偏执的太偏执、/ 2023年02月17日 11:08/ 0 赞/ 17 阅读

相关 MVC与MVVM设计模式理解

MVC与MVVM设计模式理解 MVC设计模式 MVC是一种架构模式，M表示Model，V表示视图View，C表示控制器Controller： Model负责

痛定思痛。/ 2022年09月22日 01:14/ 0 赞/ 197 阅读

相关【Android】DataBinding库（MVVM设计模式）

转载地址：http://www.jianshu.com/p/5dcdc5798d85 什么是MVVM 说到DataBinding，就有必要先提起MV

﹏ヽ暗。殇╰゛Y/ 2022年07月17日 03:48/ 0 赞/ 227 阅读

相关理解MVC，MVP和MVVM设计模式

原文链接：http://www.dotnet-tricks.com/Tutorial/designpatterns/2FMM060314-Understanding-MVC,-

不念不忘少年蓝@/ 2022年07月17日 03:27/ 0 赞/ 231 阅读

相关 mvvm设计模式总结

要了解mvvm，首先要了解mvc和mvp，我们也先简单说一下mvc和mvp。 MVC: MVC全名是Model View Controller，是模型(mode

红太狼/ 2022年05月28日 09:06/ 0 赞/ 359 阅读

相关理解MVC，MVP和MVVM设计模式

MVC模式： MVC即Model-VIew-Controller。他是1970年代被引入到软件设计大众的。MVC模式致力于关注点的切分，这意味着model和controlle

素颜马尾好姑娘i/ 2022年05月26日 04:25/ 0 赞/ 241 阅读

相关 iOS MVVM设计模式

前言： MVC 模式是iOS业内人士耳熟能详的，后来逐渐有人提出了MVVM的设计模式，这篇文章的目的是在熟知MVC模式的基础上进一步认知什么是MVVM模式，并且在工作中MV

布满荆棘的人生/ 2021年12月16日 17:59/ 0 赞/ 328 阅读