一、挂载点、模板与实例的关系

一、挂载点、模板与实例的关系
挂载点：Vue中的el属性所绑定的DOM节点
Vue只会处理挂载点内的内容

模板：挂载点内部的内容都是模板
模板不仅仅可以放在挂载点内部，也可以放在Vue实例中，用template属性，写在template属性中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 挂载点，模板，实例之间的关系 -->
    <div id="root">
        <h1>{{msg}}</h1>
    </div>
    
    <script>
        new Vue({
            el:"#root",
            data:{
                msg:"hello world"
            }
        })
    </script>
</body>
</html>

1、上述Vue实例中，el属性id=root对应的div标签是挂载点，实例中会处理此div内的内容，若有其他标签，但是id不等于root，这样的标签就不是挂载点；
2、模板就是挂载点内的内容，模板不仅仅可以写在body标签中的挂载点内，还可以写在Vue实例中。上述 <h1>hello {{msg}}</h1> 就是模板，此模板在Vue实例中是写在template属性中：

template:"<h1>{{msg}}</h1>",

3、h1标签中有两个花括号，此为“插值表达式”，花括号内的为标记，真正表达出来的为Vue的data属性中的标记后的内容，所以在div中，msg真正表现在出来的是hello world。