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://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 { 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 框架的基本模式是mvvm
,并对mvvm
模式进行了具体讲解。
码云笔记 » 06. [基础]Vue的createApp()和mount()方法讲解