Vue2.0学习笔记一 :各种表达式

Posted 一直问

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue2.0学习笔记一 :各种表达式相关的知识,希望对你有一定的参考价值。

#,过滤器
    #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性;
    #,过滤器可以串联 {{ message | filterA | filterB }}

#,条件渲染
    #,注意v-if与v-show的区别,v-if是决定是否创建DOM,而v-show则是DOM始终存在,只是改变了显示样式;
    #,如果要切换多个元素的时候,我们就使用<template v-if=‘ok‘>;
    #,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换使用 v-show 较好,如果在运行时条件不大可能改变则使用 v-if 较好。

#,列表渲染
    #,<li v-for=‘item in items>{{item.message}}</li>,也可以用of 代替in,这种语法和javascript的语法更加接近;
    #,和v-if类似,如果我们要渲染多个元素,则可以使用 <template v-for=‘item in items> <xxxx> < bbb> </tempate>
    #,用v-for不但可以迭代数组,也可以迭代对象,然后item就表示对象的属性值,当然,也可以像下面这样获取到对象属性的key、value、index;
    <ul>
      <li v-for=‘(value, key, index) in person‘>
        {{key}}, {{value}}, {{index}} 
    </ul>

#,还可以使用v-for迭代取整数;<span v-for="n in 10">{{ n }} </span>
#,可以在自定义组件中使用v-for,此时如果要把v-for的item值传递给子组件,需要用到子组件的prop属性;
#,为了提高在items变化时v-for的渲染效率,我们最好给元素指定一个key,例如:
    <div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>






以上是关于Vue2.0学习笔记一 :各种表达式的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0 代码功能片段

vue2.0 路由学习笔记

Vue2.0学习—class与style绑定(三十八)

vue2.0学习笔记之webpack-simple模板中的路由简单配置案例

vue2.0学习笔记之生命周期

vue2.0学习笔记之自定义组件