vue rules 两个输入框不能相等_5.1、Vue 的内置指令

目标：

1、记住 v-cloak 和 v-once 两个基本指令；
2、重点学习 v-if 系列 和 v-show 两个条件渲染指令，并搞清楚它们的区别；
3、v-if 只渲染变化的元素，如何解决。

---

一、基本指令

1、v-cloak

瞎扯：虽然9102年的今天，有些地方（比如魔都某高校）迎来了 5G 时代。那 5G 给人们的第一反应，应该就是网速更快了，就像当初 4G 时代来临，一个月几十几百兆流量根本不够用的好伐，移动还会回馈老用户，给我们办理5元30M的套餐吗（手动笑脸）。可是即使如今网速快成“闪电侠”，也难免存在一些“信号黑洞”的地方，也可能有的人喜欢跟你抢网速还不亦乐乎。所以你不能保证你的网速时刻处于巅峰状态，所以当你浏览网页时，难免有“卡壳”的时候。

有些同学一定经历过一件事，就是网页加载很慢的时候，可能会看到一些“奇怪的东西”，也可能会发现页面闪了一下。

那为了解决这种“灵异事件”呢，vue 贴心地给了我们一个 v-cloak 指令。

v-cloak 作用：解决初始化慢导致页面闪动。

但是请记住，v-cloak 指令一般要与 display: none 一起使用。

请看大屏幕：

<style>
    [v-cloak] {                  // 2、与 display: none 一起使用
      display: none;
    }
</style>

<div id="app">
    <p v-cloak>{
    { text }}</p>    // 1、使用 v-cloak 指令
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '头上一片青天'
  }
})

这样一来，你就不会看到页面突然他妈的闪了一下这种“灵异事件”了。

因为它会等到指令关联的实例结束编译，再一起显示。

2、v-once

作用：元素和组件只渲染一次。

什么叫只渲染一次？

就是当你把该定义好的都定义好了，并且在页面渲染了以后，你就不要再想着改变它了，因为它不让你改了。

比如说：

<div id="app">
    <p v-once>{
    { text }}</p>    // 使用 v-once 指令
</div>

var app = new Vue({
  el: '#app',
  data: {
    text: '头上一片青天'
  }
})

页面渲染：

现在我想在控制台改变 data 中的 text：