用Vue时template属性里写标签为什么会把el里的根标签里的id删除?

最简单的一个demo

new Vue({
  el: '#app',
  template: '<p>hello world!<p/>'
})

下面是chrome里显示的dom结构,我知道它会把根节点的名称div改成p,但是为什么id="app"却被删除了?这样我对#app的样式就没起效果

<html>
<head>
    <meta charset="utf-8">
    <title>vue-demo</title>
  <style>
    #app{
      color: red;
    }
  </style>
</head>
  
  <body>
    <p>hello world!</p>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script>


</body></html>
阅读 2.7k
1 个回答
el: '#app',

会把目标覆盖成你的模板渲染出来的结果,
应该针对你的模板写样式

new Vue({
  el: '#app',
  template: '<p id="app">hello world!<p/>'
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题