参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础--模板（Template）数据（Data）和指令（Directive）
Posted 吃蛋糕的猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础--模板（Template）数据（Data）和指令（Directive）相关的知识，希望对你有一定的参考价值。
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编码后的值。在调试时，这样做比将日志输出到控制台更加有效，因为页面显示会随着值的变化而更新。
以上是关于参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础--模板（Template）数据（Data）和指令（Directive）的主要内容，如果未能解决你的问题，请参考以下文章