/** * 使用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); } });