列表渲染
v-for
template v-for
数组变动检查
变异方法
替换数组
track-by
track-by $index
问题
对象 v-for
值域 v-for
显示过滤/排序的结果
1、v-for指令 是基于一个 数组 渲染列表。这个指令使用特殊的语法 ,形式为 item in items,items是数组数据,item是当前数组元素的别名。

另一种循环方式 为索引制定一个别名。

还一个是v-for=。。。of。。。

2、template v-for 模板便利
用于渲染一个包含多个元素的块。
3、变异方法。
vue.js包装了被观察数组的变异方法,故他们能触发视图更新。被包装的方法有:
push();尾部添加,返回新长度
pop();尾部删除,返回新长度。
shift();删除并返回数组的第一个元素。
unshift();在头部添加一个元素,返回长度
splice()
例如Vm.items.name(message:'bazz');

filter过滤

4、track-by 优化已有的。
有时候需要全新对象(例如通过API调用创建的对象)替换数据。
因为v-for默认通过数据的特征来决定对已有作用于和DO没元素的复用程度,这可能导致重新渲染整个列表。但是,如果每个对象都有一个唯一ID得属性,
便可以使用track-by特性给Vue.js一个提醒,vue.js因为能尽可能的复用已有实例。
例子:
如果vue.js遇到一个包含_uid:‘88f869d’的新对象,
它知道它可以服用这个已有对象的作用域和DOM元素。
 
简单的讲,就是v-for遍历model时,vue.js会建立索引,这个索引要求是不重复,不然会出错,track-by=“_uid”,使用者制定索引是哪个部分。

track-by $index
track-by=‘$index’,它强制让v-for进入原位更新模式:
片断不会被移动,而是简单的以对应索引的新值刷新。这种模式也能处理数据数组中重复的值。
但是这种模式下,dom节点不在映射数组元素的顺序的改变,也不能同步临时状态如input输入的值及组建的私有状态。因此如果v-for包含input元素或者子组件,要小心使用track-by=“$index”;

5、vue.js不能做到的:
(1)不能直接用索引设置元素:vm.item[0]={}; 用$set(索引,’新键名‘,’新值‘);
(2)不能修改数据长度:vm.item.length=0; 用items={};空数组替换
(3)$.remove(item);删除某个数据;

6、v-for不仅可以遍历数组,还可以遍历对象。
v-for遍历数组:索引$index;
v-for遍历对象:索引$key;

同理 也可以给键名$key起一个别名: v-for=“(key , val) in object”;
 
v-for也可以接受一个整数,因此它将重复模板次数。

7、显示过滤/排序结果
不是及修改或重置原始数据,有2方法:
(1)创建一个计算属性,返回过滤/排序的数组;
(2)使用内置的过滤器 filterBy和orderBy。
两者的比较:
计算属性有更好的控制力,也更灵活。因为他是全功能javascript。
过滤器使用方便。

filterBy和orderBy:

 
 
 
 
 

vue.js 第八课的更多相关文章

  1. vue.js第六课

    class与style绑定 绑定HTML class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 1.class与style绑定. 数据绑定一个常见需求就是 操作元素的clas ...

  2. vue.js 第五课

    计算属性 1.基础例子 2.计算属性 vs $watch 3.计算 setter 4.计算属性开发实务demo   1.计算属性 computed( 电脑computer) (区别普通属性) 计算属性 ...

  3. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  4. vue.js 第三课

    1.构造器 constructor 2.属性和方法 properties methods 3.实例生命周期 instance_lifecycle   1.vue.js都是通过 var vm=new V ...

  5. Vue.js入门第一课

    这个好像比ANGULAR.JS要轻量一些,看看. <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  6. vue.js第七课

    条件渲染 v-if template v-if v-show v-else v-if 与 v-show   handlebars.js 1.v-if 如果我们想一次 控制 多个元素呢? 我们可以吧一个 ...

  7. vue.js 第十课-第十六课

    第十课: http://note.youdao.com/noteshare?id=25b5ba45286464856f21eb4b6b391ecd&sub=19C4429995384F72BD ...

  8. vue.js学习(第一课)

    学习资料 来自台湾小凡! vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁. 第一课: 不支持IE8. 1.声明式渲染: el元素的简称 element : ...

  9. Python学习二十八周(vue.js)

    一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...

随机推荐

  1. 《深入浅出WPF》学习总结之Binding

    一.前言 友好的图形用户界面(Graphics User Interface ,GUI)的流行也就是近十来年的事情,之前应用程序与用户的交互是通过控制台界面(Console User Interfac ...

  2. Common Subsequence Gym - 102307C 公共序列

    2019 ICPC Universidad Nacional de Colombia Programming Contest C D J   C. Common Subsequence 题意:给出长度 ...

  3. Multisim 如何调整编辑界面大小

    1.option -> sheet properties 2.选择workspace

  4. js中yyyymmdd hh:mm:ss字符转换为Date

    var dateString="20190102 10:30:35"; var pattern = /(\d{4})(\d{2})(\d{2})/; var formatedDat ...

  5. mysql 随笔

    (select GROUP_CONCAT(car_brand_name separator ',') carBrandName,supplier_id from ycej_supplier_carbr ...

  6. yii2自定义报错页面

    在Yii2版本的advanced高级模板环境中:设置404自定义页面的方法 1.config/main.php文件 'errorHandler' => [ 'errorAction' => ...

  7. properties文件读写工具类PropertiesUtil.java

    import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException; import ...

  8. ANSYS中 *VWRITE命令使用

    目录 1. *VWRITE命令 2. Fortran字段描述符 1. *VWRITE命令 ANSYS输出结果到文件,采用*VWRITE命令,具体命令如下: *VWRITE,Par1,Par2,.... ...

  9. 【C语言】无参函数调用实例

    #include<stdio.h> void hello() { printf("年轻人,加油!"); } int main() { hello(); ; }

  10. Shiro入门学习之shi.ini实现认证及源码分析(二)

    一.Shiro.ini文件 1.文件说明 ①ini(InitializationFile)初始文件:Window系统文件扩展名 ②Shiro使用时可以连接数据库,也可以不连接数据库(可以使用shiro ...