Vue 的 v-if，v-show，v-for 指令

文档警告 Warning：

由于做笔记没有注意到 Vue 官方文档中的提示、书写规范，之前在 Vue 实例对象中，data 的写法是有误的。

从本页文档开始将使用通行写法。

When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is
created we can call it to return a fresh copy of the initial data.

v-if 与 v-show

按照惯例，我们依然从一个需求引入我们的知识点：

页面上有一个按钮，我想让他控制某个内容元素是否显示，在 Vue 我该怎么做呢？

1545043084227.png

    <div id="root">
        <div>Hello world</div>
        <button > show or hide </button>
    </div>

    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    show: true
                }
            },
            methods: {
                // ...About button action
            }
        })
    </script>

• 我们定义了一个布尔变量，用于表示是否显示内容的布尔逻辑状态 即 true or false
• v-if 指令 和 v-show 指令正需要一个这样的布尔值，它们可以将逻辑值的真假绑定在元素上，以此决定元素是否显示。
• 还记得我们的 button 点击事件怎么写么？

<button @click="handleClick"> </button>

<!-- 此处简写 Vue 实例对象中的 method 部分 -->
    <script>
    methods:{
        handleClick: function(){
            this.show = !this.show //取反
        }
    }
    </script>

那 v-if 和 v-show 有什么区别呢 ？我们按下 F12，打开集成查看器一探究竟吧！

当我们使用 v-if 时：

    <div v-if="show">Hello world</div>
    <button @click="handleClick"> show or hide </button>

1545043084227.png

当我们点击按钮后：

1545043134772.png

• 由此可见，v-if 直接改变了文档内容，将该元素从 DOM 中去除掉了。

---

而当我们使用 v-show 时：

    <div v-show="show">Hello world</div>
    <button @click="handleClick"> show or hide </button>

当我们点击按钮后：

1545043283315.png

• 由此可见，v-show 是通过添加了 CSS 属性 display: none; 来隐藏元素的。

根据情况而定：

• 如果元素数量非常多时，那么频繁地操作 DOM 增删显然不是一个好的选择，所以更多选择 v-show
• 如果显示和隐藏并不那么频繁，那么 v-if 也是可以的。

v-for

学过一个或多个编程语言后，对 for 一定不陌生，应该几乎是所有的编程语言都把 for 定为了一个和循环相关的关键字，当然在 Vue 中也沿用了这种标示。

比如我有一组数据想要罗列展示，显然手打一行一行地敲成 HTML 文档内容是一个非常麻烦低效的选择。

那么学习了 Vue ，我们可以这样做：

    <div id="root">
        <ul>
            <li v-for="item of list"> {{ item }}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: "#root",
            data() {
                return {
                    show: true,
                    list: ['Head title', 'Main context', 'End message']
                }
            }
        })
    </script>

• 语法解析：类同与 Python 的 for 循环，除开 in 变成了 of 以外，仍然是 for 取出的单项 in 项目总集合 的形式， 取出的单项是可以作为 插值表达式 中的数据使用的哦！

• 显而易见，data 中对应 list 的数据总集合一定要是某种可迭代的数据集合类，比如数组、字典等。

• Attention 1： 当我们使用了 v-for ，为了尽可能地提升渲染效率，我们都应该加上 :key 指令，:key 指令必须和一个永不重复的值绑定，一般不使用 item，因为 item 很可能重复。

• Attention 2：大多数情况下会使用循环次数下标，写成：

  <div v-for="(item, index) of list" :key="index">
      {{ item }}
  </div>
  

  但这并不是最终的完美选择，但是当需要做排序等这类频繁改变列表元素位置的操作时，index 作为 key 值会被打乱。

  思考题： 那么请问这个最终解决方案应该是什么呢？