1,回顾HTML列表?
答:列表分为顺序列表ol,无序列表ul,用于在网页上以表格的形式进行数据展示,数据放在单元格之中,可以用于布局或者展示某个具体对象的信息。li表示列表的每一项。自定义列表为dl,dd为自定义的项目,区分项目的标准就是每一项前面的符号,比如圆形、方形等。如果存在多个项目,那么我们需要手动写多了li标签。
2,使用v-for自动生成li标签?
答:Vue指令v-for能够让Vue自动地帮我们生成li标签,也就是生成数据,并将项目类容展现到页面上。他的属性值是一个容器,容器里面存放条目数据。 通常结合li标签使用,(p,index)类似于容器解包,但是index会自动获取p的索引,p就是容器里面的一个元素。:key一般等于index。不要怀疑这种语法形式,只要不违背js语法,Vue会自动地去处理这些字符串的。
v-for除了变量数组,还能遍历对象、字符串。对于对象,一般index自动获取对象里面的属性名称。对于字符串,index自动获得字符的索引。另外index也可以来自条目内容。
此外,也可以指定遍历次数,下图中,会自动生成5个li。
3,key的原理??
答:key给每一个生成li标签进行编号 ,以便于模板管理与编译。每一个HTML元素都可以自定义key这个属性,但是如果在Vue模板里面使用key属性则会被Vue强制征用,实际DOM中并不会存在key属性。
当v-for渲染列表时,他的索引从上往下是自增的,只要li的个数改变Vue都要自动刷新index。
当一个页面使用Vue时,每当打开一个页面,会存在一个实际页面的实际DOM对象,还有一个仿品DOM对象(即Vue虚拟DOM对象),Vue每时每刻都在对比这两个DOM,每当虚拟DOM与实际DOM存在不同,Vue就会使用原生JS去修改实际DOM中需要修改的部分。
由于Vue是数据管理者,每当模板发生变化,他又会自动生成一个局部虚拟DOM与现有的虚拟DOM进行对比,从而对比去改变虚拟DOM,虚拟DOM变化了又去修改实际DOM。
而这个找不同的过程需要高效的处理,而字典是最快的,所以Vue使用key作为索引进行DOM比较,这个Key代表着DOM节点(元素节点的索引编号)。str.indexof('')返回0。arr.fliter(item,func)-->a new arr。