Vue使用

心得

vue能双向绑定数据,数据驱动视图,数据和视图分离的,相比传统的网页,vue是单页面值刷新某一小部分,开发的时候效率会更高

各种指令

1.v-html='vue变量' 使用的时候可以识别标签,  --会覆盖插值表达式

2.v-text='vue变量' 使用的时候不能识别标签    --会覆盖插值表达式

3.v-show 是在样式中设置display:none 样式,频繁的切换使用的时候用

4.v-if 直接重dom树上移除 数据多的时候不建议使用,影响性能

5.v-for 是循环列表的渲染,按照目标结构循环生成,

        可以遍历数组/对象/数字/字符串/可遍历的结构

        注意:v-for的临时变量名不能用到v-for范围外

修饰符有

        .shop阻止事件冒泡

        .prevent阻止默认提交事件

        .once只执行这一次事件,但是该冒泡还是会冒泡的

c-for对数据更新监听

       1. 数组变更方法:导致原数组改变v-for会更新,页面也会更新

                posh();pop();shift();unshift();reverse();sort();splice()

                

        2.数组非变更方法,返回的是新数组,不会导致v-for更新,页面不会改变,

                slice();filter();concat()

                解决方法  覆盖原数据法   或者this.$set()

                                                        

v-for就地更新与跟随kay更新

        生成新的虚拟DOM结构

        和旧的虚拟DOM结构对比

        利用diff算法, 找不不同, 只更新变化的部分(重绘/回流)到页面 - 也叫打补丁

        好处1: 提高了更新DOM的性能(不用把页面全删除重新渲染)

        好处2: 虚拟DOM只包含必要的属性(没有真实DOM上百个属性)

        无key:就地更新

                v-for不会移动DOM, 而是尝试复用, 就地更新，如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

        有key但是值为索引  还是就地更新

        有key值为id

                key的值只能是唯一不重复的, 字符串或数值       

                新DOM里数据的key存在, 去旧的虚拟DOM结构里找到key标记的标签, 复用标签

                新DOM里数据的key存在, 去旧的虚拟DOM结构里没有找到key标签的标签, 创建

                旧DOM结构的key, 在新的DOM结构里没有了, 则==移除key所在的标签