zoukankan      html  css  js  c++  java
  • 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')

  • 相关阅读:
    mysql8下载安装及配置
    jdk11下载安装及环境变量配置
    展示所有商品案例
    事务(转账实例)
    Part2.7 ESLint
    Part2.6 Webpack
    Part2.5 模块化开发
    Part2.4 gulp 实践
    Part2.3 Grunt
    Part2.2 plop 使用
  • 原文地址:https://www.cnblogs.com/liufei1983/p/14171335.html
Copyright © 2011-2022 走看看