一、挂载点、模板与实例的关系
挂载点：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。
网友评论