16 new Vue({ render: h => h(App), }).$mount('#app')
/* webpack打包入口文件 */ //导入vue构造函数 import Vue from 'vue' //导入根组件App.vue import App from './App.vue' //导入路由文件 import router from './router' import './plugins/element.js' Vue.config.productionTip = false new Vue({ router, render: h => h(App) }).$mount('#app')
有上述代码:
render: h => h(App)是ES6的写法,其实就是如下内容的简写:
render: function (createElement) { return createElement(App); }
官方文档中是这样的,createElement 是 Vue.js 里面的 函数,这个函数的作用就是生成一个 VNode节点(虚拟节点),render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。
$mount()手动挂载:
这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount(’#app’)方法。$mount(’#app’) :手动挂载到id为app的dom中的意思.当Vue实例没有el属性时,则该实例就没有挂载到某个dom中.
假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。
/* webpack打包入口文件 *///导入vue构造函数import Vue from'vue'//导入根组件App.vueimport App from'./App.vue'//导入路由文件import router from'./router'import'./plugins/element.js' Vue.config.productionTip =falsenewVue({ router, render: h =>h(App)}).$mount('#app')