vue main.js中app绑定的是index.html还是App.vue中?

问题

vue cli默认生成的工程中,main.js绑定了#app,绑定的是index.html中的div还是App.vue中的div?

//main.js
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

// /index.html
<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
//App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

index.htmlmain.js都改为id="app111"App.vue中改为id="app222",观察效果,id=app222,所以main.js中的id="app"绑定的是index.html,然后用App.vue中的内容替换掉。
在这里插入图片描述

总结

main.js中的#app绑定了index.html<div id="app"></div>,并用App.vue内容替换div标签及其内容。

发布了345 篇原创文章 · 获赞 405 · 访问量 203万+

猜你喜欢

转载自blog.csdn.net/wangjun5159/article/details/104390533