关于$mount(’#app’)
当我们用vue脚手架(vue-cli)创建vue项目时,会生成初始的基本文件,其中关于main.js中的$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')
这里创建的vue实例没有el属性,而是在实例后面添加了一个$mount(’#app’)方法。
$mount(’#app’) :手动挂载到id为app的dom中的意思
当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;
假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载
需要注意的是:该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的
new Vue({
router,
render: h => h(App)
}).$mount("#app");
解释一下render函数
render: h=> h(App)
//这里的render: h=> h(App)是es6的写法
//暂且可理解为是渲染App组件
// 转换过来就是:
// render:(function(h){
// return h(App);
// });
或者
new Vue({
el: '#app',
router,
render: h => h(App)
// render: x => x(App)
// 这里的render: x => x(App)是es6的写法
// 转换过来就是: 暂且可理解为是渲染App组件
// render:(function(x){
// return x(App);
// });
});