Vue 2.5从零开始学习 — v-if，v-show，v-f
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 值会被打乱。
思考题： 那么请问这个最终解决方案应该是什么呢？
