vue中的.$mount('#app')和el:"#app"

2,153 阅读1分钟

关于$mount(’#app’)

当我们用vue脚手架(vue-cli)创建vue项目时,会生成初始的基本文件,其中关于main.js中的$mount(’#app’)做一点自己的理解。

//导入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");

  • 1. 联系:$mount和el都是用来将vue实例挂载到dom上的

    2. 区别:el是自动挂载,$mount是手动挂载

    注:如果$mount没有提供参数,模板将被渲染为文档之外的的元素,并且你必须使用原生DOM API把它插入文档中。