问题

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标签及其内容。


发布评论
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

vue .passive的作用详解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。