参考书籍《Vue.js快跑：构建触手可及的高性能Web应用》第1章 Vue.js基础-----1-3模板（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>

重点：

  1. data对象，我们通过它告诉Vue想在template上显示哪些内容。
  2. 在template中使用v-if指令来根据变量的值显示，v-if属性的元素只有传递给指令的值为真时才会显示。
  3. v-else。当用在带有v-if指令的元素之后时，它的表现和一个if-else语句中的else语句一样。
  4. 如果将整个数组或对象输出到页面上，Vue会输出JSON编码后的值。在调试时，这样做比将日志输出到控制台更加有效，因为页面显示会随着值的变化而更新。
posted @ 2021-06-17 10:52  {颜逸}  阅读(71)  评论(0)  编辑  收藏  举报