模板、数据和指令

Vue 的核心是将『数据 / Data』显示在页面上，这一功能通过『模板 / Template』实现。

为正常的 HTML 添加特殊的属性（也被称作『指令 / Directive』），借助它来告诉 Vue 我们想要实现的效果以及如何处理提供给它的数据。

• html 部分

  <div id="app">
    <p v-if="isMorning">早上好！</p>
    <p v-if="isAfternoon">中午好！</p>
    <p v-if="isEvening">晚上好！</p>
  </div>
  

• js

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    var hours = new Date().getHours();
    new Vue({
      el: '#app',
      data: { // 后续会改进这个写法
        isMorning : hours < 12,
        isAfternoon : hours >= 12 && hours < 18,
        isEvening : hours >= 18
      }
    });
  </script>
  

我们通过 data 属性告诉 Vue 在 template 上显示哪些内容。它就是上面所说的『数据 / Data』。

在页面加载时有一个瞬间的闪烁的现象，在《专项问题》笔记中所提供解决方案：v-cloak。

---

Vue 支持在 v-if 中进行简单的布尔表达式运算。因此，上述示例可以进一步简化：

<div id="app">
    <p v-if="hours < 12">早上好！</p>
    <p v-if="hours >= 12 && hours < 18">中午好！</p>
    <p v-if="hours >= 18">晚上好！</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      hours: new Date().getHours()
    }
  });
</script>

v-if="..." 的右值部分本质上要求是一个『表达式』。无论是简单的变量表达式，还是更复杂的其它形式，只要是表达式就行。另外，变量是最简单、最基础的表达式。

---

除了使用指令，也可以通过插值的方式将数据传递给模板。例如：

<p>Hello, {{ msg }}</p>

data: {   // 后续会改进这个写法
  msg : 'World'
}

Vue 的『插值表达式』能全面替代 jQuery 中的 $().text() 方法。

---

除了可以传递字符串和数字这样的简单类型，还可以传递复杂类型的数据到模板中。例如：

<p>第二条狗的名字是 {{ dogs[1] }}</p>
<p>所有狗的名字是 {{ dogs }}</p>

data: { // 后续会改进这种写法
  dogs: ['tommy', 'jerry', 'ben']
}