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

posted @ 2020-12-22 09:27  刘大飞  阅读(1493)  评论(0编辑  收藏  举报