如果 div下面存在模板，Vue里面也有模板的话，在执行的时候，vue会自动忽略div下面的吗？ <h1>hello</h1>中的hello不会在页面输出？

源自：2-2 挂载点，模版与实例

如果 div下面存在模板，Vue里面也有模板的话，在执行的时候，vue会自动忽略div下面的吗？ <h1>hello</h1>中的hello不会在页面输出？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>hello</h1>
    </div>
    <script>
        new Vue({
            el:"#root",//挂载点
 template:'<h2>bee2{{msg}}</h2>',
            data:{
                msg:"Hello World bee"
 }
        })
    </script>
</body>
</html>

提问者：qq_bee_5 2018-06-02 21:44

个回答

小铁妮儿

2018-06-03 09:05:55

刚试了一下是会忽略原来的DOM节点。可以了解一下Vue生命周期。在beforeMounted 和 mounted 之间进行了替换：创建vm.$el 并且用这个替换掉 'el'。你可以去生成的DOM里看看，h2标签已经替换掉了 div标签。

2