Vue学习之路---No.3（分享心得，欢迎批评指正）
同样的，我们先来回顾一下昨天学习的内容：
1.利用v-once来组织双向绑定
2.filter｛｝过滤器的使用（详情请看上一章）
3.computed（计算属性），利用computed属性实现filters同样的效果
4.利用method{}来实现与computed和filters同样的效果
5.比较filters、computed、method的区别
6.利用v-bind{}属性绑定HTML自带属性；如class,style等
7.v-bind{}属性绑定HTML自带属性的三种写法------对象，数组，数组+对象
8.vue会自动为类似于 border-radius,transform等需要加浏览器前缀的属性自动加上前缀
好了，回顾完昨天所学习的东西，那么我们进入今天的进程：：：：：
我想js中的 show(),hide()属性，大家一定已经耳熟能详，没错，这两组属性在我们的开发中运用得很多很多，那么我们来看一下，在Vue中，我们如何实现这两组属性吗，上代码：
<div v-if="ok">Ok</div>
<div v-else>No</div>
//以上代码详解：
1.值得注意的是v-else必须要紧接在v-if后面才会生效。
2.意思很明显，如果v-if的值为ok，那么输出Ok；如果v-if的值不为ok 那么输出No
如果我们把上面的代码更加语义化的写出来，那么就会是这样：
<div v-if="ok"></div>
<div v-if="!ok"></div>
同时，还有另一种表象相同但本质不同的写法：
<div v-show="ok">Ok</div>
<div v-else>No</div>
v-show其实和v-if的效果是一样的，只不过v-show不会渲染dom，而仅仅是改变css中display的属性而已；所以如果，我们把v-show="ok"换成v-show="false"的话，浏览器只会将其隐藏而不会删除节点。
值得注意的是，在新版本中v-show这种写法不支持 complate和v-else。
重点：所以通过上面的介绍，就可以得出这样一个结论；即为
1.v-if需要渲染dom，因此在切换速度上会比v-show慢;
2.而v-show的dom需要预先加载，因此初次加载量比v-if大;
所以，如果需要频繁切换则采用v-show；如果需要提升整个页面的加载速度则采用v-if。
以上只是开胃菜，蔬菜沙拉？水果沙拉？？？无所谓了，下面我们进入正题：
v-for::
我们知道对于任何变成语言来说，数据集合的循环处理其实都是最常用的功能，那么我们来看看vue的基本写法：
<div id="example">
<div v-for="item in items"> {{ message }} </div>
</div>
var example2 = new Vue({
el:' #example ',
data{
items[
{ message : ' foo ' }
{ message : ' bar ' }
]
}
})
上面的输出结果为：
foo , bar ;
同样，我们也可以写成比较像js原生语法的方式：
<div id =" example ">
<div v-for=" item of items "> {{message}} </div>
</div>
上面提到的是最基本的v-for语法
其实Vue中的v-for和PHP中的foreach没有太大的区别；代码如下：
foreach( $x as $index => $y ){}
这个里面 $index 和 $y为一个键值对。
如：
$x = array( 1,2,3,4,5 )
那么 $index 依次是 0 1 2 3 4
$y依次是 1 2 3 4 5
这种写法，我们在Vue里可以这样写：
var example2 = new Vue({
el:'#example',
data{
parentMessage : ' parent ',
items{
[
{ message : ' zoo ' },
{ message : ' bar ' }
]
}
})
<div id = "example">
<div v-for=" ( item, index ) in items ">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</div>
</div>
那么我猜测上面输出的结果应该是：
parent - 1 - bar
上面我们讲到了利用v-for来循环数组，那么我们同样还可以用v-for来循环对象，代码如下：
<div id= " example ">
<div v-for= " value in object ">
{{ value }}
</div>
</div>
new Vue({
el: ' #example ',
data {
object : {
FirstName : ' mc '
LastName : ' mcc '
Age : ' 20 '
}
}
})
以上将会输出 ：
mc
mcc
20；；；；
一个疑问，如果说我们把上面代码中的 value替换为key，那么将会输出什么呢？
？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？
毫无疑问，输出依然是不变的，至于为什么，后面将会提到。
可以看出Vue的写法简洁易懂，既可以循环集合，又可以内部属性，所以在用Vue的v-for循环的时候，要注意不要搞混了，完整循环代码如下：
<div id = "example">
<div v-for = " ( index key value ) in object">
{{value}}.{{index}}:{{key}}
</div>
代码如上，输出的结果应该是：
0.FirstName:mc
1.LastName:mcc
2.Age:20
！！注： 在v-for属性当中，循环的第一个参数，也就是上面的index为 object中的 值
循环的第二个参数，也就是上面的 key 为 object中的 键
循环的第三个参数，也就是上面的value 为object中的 数组下标
那么某些时候，我们只需要循环次数而不需要循环数据，也就是空数据，那么我们可以这样。。。
<div v-for=" n in 10 "> {{ n }} </div>
那么打印出来的结果就应该是 ：： 12345678910
今天我们就到这里，祝大家周末愉快，明天见~~~~~~
希望各位看官，可以留下自己的见解，希望可以向大家学习；
不管是有疑问、质疑等都可以留言发表，希望可以和大家一起讨论，共同进步
