vue.js中的main.js中的作用是将app组件挂载到页面中,其中app组件是汇总所有组件元素的组件。main.js的创建vue实例。
#认为的版本
import APP from './App.vue';
new Vue({
el:'#root',
template:'<App></App>',
components:{App},
})
#实际的版本
/*
整个项目的入口文件
*/
//引入vue
import Vue from ‘vue’ //引入的是残缺版的vue,
//引入app组件,所有组件的父组件
import App from './App.vue'
//关闭生产提示
Vue.config.productionTip = false
new Vue({
//将app组件放入容去中
render: h => h(App),
}).$mount('#app’)
/*
这里的new Vue({}).$mount('#app') 就等同于 new Vue({ el:'#app' })
*/
上述两个版本之间的区别在于用了render函数和没有用render函数,render的作用是将js中所搭建的标签模版渲染到页面中。
认为的版本在vue脚手架创建的项目里是不可运行的,因为脚手架中到实际运行的js中是没有模版解析器的,只是在开发阶段有,打包成浏览器所认识的版本是没有的。如果想使用需要引入完整版的vue.js 但是这会导致vue内容多。可能会导致性能降低。
Vue = 核心+模版解析器(1/3) 带有runtime的vue.runtime.xxx.js都是运行时vue 没有模版解析器的文件。
最简单的render函数的使用
render函数
render(createElement){
return createElement(‘h1’,'你好啊’);
}
ps: 简单来说,render函数字符串模版的代替方案,接收createElement创建的标签来将所创建的dom元素渲染到页面上。
大家加油,不要让潜在堕落期的自己打败向上的自己。