抱歉,您的浏览器无法访问本站

本页面需要浏览器支持(启用)JavaScript


了解详情 >

第六课主要讲的是createApp()mount()方法的讲解

前几节里都有createApp()mount()两个方法

  • createApp方法
    从字面上意思来说就是创建一个vue应用
  • mount方法
    就是挂载到某个html的dom节点上,它接受一个字符串型参数,参数可以使用CSS选择器,一般都是ID选择器的形式,指定挂载的DOM元素。

获取Vue的根组件vm

当使用creatApp()方法创建了一个Vue应用时,如何能获取根组件那?其实你使用mount()方法时,就会返回根组件。下面的代码,声明一个变量来获取根组件,并打印出来。通过打印你可以看出根组件是一个Proxy形式的对象。

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

mvvm设计模式

Vue的编程设计模式应该叫做mvvm的设计模式。什么叫做mvvm哪?它首先是面向数据的编程,程序中定义了数据,然后定义了模板,Vue就可以把数据和模板自动进行关联。最后挂载到真实的DOM上,展示给用户。

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

1
2
3
4
5
6
7
8
9
10
11
12
<script>
const app = Vue.createApp({
data() {
return {
message: 'HelloWorld' //1.在这里定义了数据,也就是`model`数据
}
},
template: "<h2>{{message}}</h2>" //2.在这里定义了模板,也就是`view`,
//定义后的自动关联,就叫做`vm`,viewModel数据视图连接层。
})
app.mount("#app")
</script>

model数据,是我们自己定义的,view模板也是我们自己定义的,但是vm是Vue自动给我们关联的。
当我们明白了什么是mvvm后,你就知道为什么我们给根组件起名vm了。
当我们获取了vm根节点后,其实就可以操作里边的数据了。比如在控制台中输入下面的代码:

1
vm.$data.message ='奥里给'

这个时候你会发现网页界面也跟着发生了变化,变成了奥里给.

评论