美文网首页
new Vue({ render: h => h(App), }

new Vue({ render: h => h(App), }

作者: 泡杯感冒灵 | 来源:发表于2020-07-15 10:49 被阅读0次

    render函数的作用

    render函数是vue通过js渲染dom结构的函数createElement,约定可以简写为h
    

    render: h => h(App) 是下面内容的缩写:

    render:function(createElement){
       return createElement(App);
    }
    

    继续缩写

    render(createElement){
        return createElement(App);
    }
    

    继续缩写

    render(h){
      return h(App)
    }
    

    箭头函数

    h => h(App)
    

    实际渲染

    import App from './App'
    import Vue from 'vue'
    new Vue({
      el:'#root',
      template:'<App></App>',
      components:{
        App
      }
    })
    

    手动挂载

    在Vue构造函数时,需要配置一个el属性,如果没有没有el属性时,可以使用.$mount('#app')进行挂载。

    // 配置了el属性:
    
    new Vue({
        el:"#app",
        router
    });
    
    // 如果没有配置el属性,可以使用手动挂载$mount("#app")
    new Vue({
        router
    }).$mount('#app');
    var vm = new Vue({
        router
    });
    vm.$mount('#app');
    

    相关文章

      网友评论

          本文标题:new Vue({ render: h => h(App), }

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