一、挂载点、模板与实例的关系
挂载点: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。