Vue基础内容--02笔记

Vue基础内容–02笔记

v-for 作用：根据一组数据,渲染出一个标签结构i相似的列表界面

数组方式
    语法1：v-for="item in tems"
    语法2: v-for="(irem index) in items"

对象方式
    语法：v-for="(value key index) in obj"

注意：使用v-for指令时，通常要加一个指令 v-bind:key（该指令的值通常是数组的下标或数组中对象的id，能代表数据唯一性的） ==>提高渲染效率

作用：缓存上一次的渲染结果，在下一次因数据变化而重新渲染时，先去查找有无相同的已缓存过的标签，如有则只是对标签按需调整顺序，而不需要重新创建。

v-model 作用：双向绑定
实现原理：
    例如=>  v-bind:value="message" 
            v-on:input="message = $event.target.value" /

过滤器 => 作用：对视图中要显示的数据作文本格式化

    使用方法：在插值表达式或者v-bind指令中，通过竖线操作符|调用过滤器
    可以为过滤器传参数
    可以串联使用多个过滤器

局部过滤器 =>只在当前的Vue实例中生效

语法：
   1.在Vue实例对象的选项中配置filters:{}
   2.过滤器名字:(要过滤的数据)=>{return 过滤后的结       果数据}
        3.{{被过滤的数据|过滤器1|过滤器2}}

全局过滤器 =>可在所有的Vue实例中生效

    语法：
        1.创建Vue实例之前，使用Vue.fileter()函数来定义全局过滤器
        2.Vue.fileter('过滤器名字'，(要过滤的数据)=>{return 过滤后的结果数据})
        3.{{被过滤的数据|过滤器1|过滤器2}}