vue知识点详解，Vue之v-prev、vue-virtual-scroll-list、alise、data动态添加数据、v-for中的key值等

1.没有vue语法的v-prev

给模版中静态html添加该指令,表示不需要重复编译.(可以极大的加快编译速度)

2.vue-virtual-scroll-list虚拟插件,用于长列表,几十万的数据也可以展示,一般情况下会页面卡死.但是使用它不会.

import virtualList from "vue-virtual-scroll-list"
<virtualList 
:data-sources="list"
data-component=""
:data-key="">
</virtualList>

3.使用alise(@)减小搜索范围,alise(@)

@: vue中src文件的绝对路径

import xx from "@/components/view.vue"
即src下的components/view.vue

alise(@) 在webpack中的配置

4.data动态添加数据

$set

this.$set(target, key, value)属性时时渲染视图
this.$set(target,index,value)数组

5.详解v-for中的key值

key键，起标识的作用，作用域内独一无二，相当于身份证。所以我们通常会绑定索引值给它，加强虚拟dom的对比，但是有时我们动态增加数据时也会因为key值绑定index而出现bug，有一些特殊场景，动态录入数据，为什么这儿要提到动态录入呢，动态录入会发生数据改变，从而导致试图发生变化，当删除某个节点的时候会dom节点的key值重新计算，dom上移，所以key值有可能还是原来的key值，所以需要我们设定比较复杂的key身份证号牌来增加它的唯一性。

6.图片懒加载

全局配置
1.安装

npm install vue-lazyload --save-dev

2.导入，进行全局统一处理

import VueLazyload from 'vue-lazyload'
vue.use(VueLazyload, {
	 loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直重复加载占位图
     error: require('img/error.png')  //加载失败图片
})

3.应用

<img v-lazy="/img/' + pic" :key="'/img/' +pic">  // v-lazy == src  --> true