06. [基础]Vue的createApp()和mount()方法讲解

从这节开始,我们将详细学习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:[email protected]"></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 {
                message: 'mybj123.com'   //1.在这里定义了数据,也就是`model`数据
            }
        },
        template: "<h2>{{message}}</h2>" //2.在这里定义了模板,也就是`view`,
        //定义后的自动关联,就叫做`vm`,viewModel数据视图连接层。
    })
    const vm = app.mount("#app")
    console.log(vm)
</script>

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

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

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

vm.$data.message ='码云笔记'

这个时候你会发现网页界面也跟着发生了变化,变成了码云笔记

[基础]Vue的createApp()和mount()方法讲解

总结

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 06. [基础]Vue的createApp()和mount()方法讲解

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们