Vue根组件vm


<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>

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

vm.$data.message ='Bibooo'


文章作者: Bibooo
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Bibooo !
评论
  目录