vue四種掛載方式區別

1.第一種,最常見.vue-cli模板就是這樣

import Vue from 'vue'

import App from './App'

 

new Vue({

el: '#app',                                  //#app 元素的 outerHTML 是 Vue 模板，該模板可以被編譯成 render function。

template: '<App/>',

components: { App }

})

 

2.第二種，這種掛載好像是直接掛載到入口文件index.html 的 id=app 的dom 元素上

new Vue({

    router,

    store,

}).$mount('#app')       

 

第三種，

new Vue({
//el: '#app',
//template: '<App/>',
router,
store,
//components: { App }
render: h => h(App)
}).$mount('#app')

 

第四種，

new Vue({
  el: '#app', 
  router,
  render: h => h(App)
})

 第五種：

var options = {

    el: '#app',

     store,

    router,

    ...App

};

new Vue(options)