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 >

    <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 - 0 - zoo

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

 

 

今天我们就到这里，祝大家周末愉快，明天见~~~~~~

希望各位看官，可以留下自己的见解，希望可以向大家学习；

不管是有疑问、质疑等都可以留言发表，希望可以和大家一起讨论，共同进步