Vue的核心是将数据显示在页面上，这一功能通过模板实现。为正常的HTML添加特殊的属性——被称作指令——借助它来告诉Vue我们想要实现的效果以及如何处理提供给它的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>模板，数据和指令</title>
</head>
<body>
<div id="app">
<p>第二本书的名字：{{ books[1] }}</p>
<p>所有书的名字：{{ books }}</p>
<p v-if="path === '/'">你正位于首页</p>
<p v-else>{{ path }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: "#app",
data: {
path: location.pathname,
books:["《茶馆》", "《龙须沟》", "《四世同堂》", "《骆驼祥子》"]
}
})
</script>
</body>
</html>
重点：
- data对象，我们通过它告诉Vue想在template上显示哪些内容。
- 在template中使用v-if指令来根据变量的值显示，v-if属性的元素只有传递给指令的值为真时才会显示。
- v-else。当用在带有v-if指令的元素之后时，它的表现和一个if-else语句中的else语句一样。
- 如果将整个数组或对象输出到页面上，Vue会输出JSON编码后的值。在调试时，这样做比将日志输出到控制台更加有效，因为页面显示会随着值的变化而更新。