main.js

   /**      * 使用ES6语法引入模板      */     import Vue from ‘vue‘     import App from ‘./App.vue‘     import VueRouter from ‘./router/index.js‘;

    // 第一种写法: index.html里的dom 为app作为模板     // new Vue({     //     el:‘app‘,     //     data:{     //         hello:‘hello‘,     //         msg: ‘Welcome to ruanmou‘     //     }     // })

    //第二种写法:template 模式, 需要compiler去编译成render函数进行渲染页面,性能不是最优     // new Vue({     //     el:‘app‘,     //     data:{     //         hello:‘hello‘,     //         msg: ‘Welcome to ruanmou‘     //     },

    //     // template:`<div id="app1">     //     //             <h1>{{msg}}</h1>     //     //         </div>`,

    //     // 改成引用组件就是下面的模式     //     components:{     //         App //App:App      //     }, //注册全局组件     //     template:‘<App/>‘     // });          //第三种写法:render模式,性能最优      new Vue({         el:‘#app‘,         router:VueRouter,         data:{             hello:‘hello‘,             msg: ‘Welcome to ruanmou‘         },         //创建虚拟Dom,不用组件         // render(createElement){         //     return createElement(‘div‘,{         //         id: "app1",         //         style:{         //             color:‘red‘         //         }         //         },[         //             createElement(‘h1‘,this.msg),         //             createElement(‘span‘,‘world‘)         //         ])         // },         //使用组件, 利用render函数渲染         render:function(h){                 return h(App);          },         //  render:h => h(App)         mounted(){             console.log(this);         }     });

相关文章