Vue根组件vm

Vue

发布日期: 2021-01-23

<script>
    const app = Vue.createApp({
         data(){
             return{
                 message:'Bibooo.top'
             }
         },
         template:"<h2>{{message}}</h2>"

    })
    app.mount("#app")
</script>

createApp()和mount()方法讲解

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

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

`Vue.createApp()`的意思就是创建一个Vue的应用。

mount()方法

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

如何获取Vue的根组件vm

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

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

mvvm设计模式讲解

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

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

图解

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