美文网首页
vue实例挂载的5种方式

vue实例挂载的5种方式

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-02-22 22:52 被阅读0次

    如果有el:"#app" 就不需要手动挂在

    否则就需要使用$mount("#app")手动挂载

    vue四种挂载方式区别

    1.第一种,最常见.vue-cli模板就是这样

    import Vue from 'vue'

    import App from './App'

    new Vue({

        el: '#app',           //#app 元素的 outerHTML 是 Vue 模板,该模板可以被编译成 render function。

        template: '<App/>',

        components: { App }

    })

    2.第二种,这种挂载是直接挂载到入口文件index.html 的 id=app 的dom 元素上

    new Vue({

        router,

        store,

    }).$mount('#app')       

    3.第三种,

    new Vue({

        router,

        store,

        render: h => h(App)

    }).$mount('#app')

    4.第四种,

    new Vue({

         el:'#app',  

         router,  

         render: h =>h(App)

    })

     5.第五种:

    var options = {

        el: '#app',

         store,

         router,

         ...App

    };

    new Vue(options)

    $mount()用于手动挂载

    当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中假如需要延迟挂载,可以在之后手动调用vm.$mount()方法挂载。

    例如:newVue({router,render:h=>h(App)}).$mount("#app");

    render: x => x(App)// 这里的render: x => x(App)是es6的写法// 

    转换过来就是: 暂且可理解为是渲染App组件// 

    render:(function(x){// return x(App);// });

    相关文章

      网友评论

          本文标题:vue实例挂载的5种方式

          本文链接:https://www.haomeiwen.com/subject/swurqrtx.html