Vue学习之路---No.3(分享心得,欢迎批评指正)

    xiaoxiao2021-03-25  26

    同样的,我们先来回顾一下昨天学习的内容:

    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    

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

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

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

    转载请注明原文地址: https://ju.6miu.com/read-50122.html

    最新回复(0)