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

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

七、Vue cli详解学习笔记——什么是Vue cli ,Vue cli的使用（安装，拉取2.x模板，初始化项目），Vue cli2详解，Runtime-Compiler和Runtime-only区别
一.什么是Vue CLI 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI. 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI 使用Vue.js开发大型应用时 ...
Vue实例详解与生命周期
Vue实例详解与生命周期 http://www.jianshu.com/p/b5858f1e6e76 Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理. ...
【Vue组件详解（一）】
Vue组件详解(一) 简介对组件的理解传统方式编写页面组件方式编写页面非单文件组件完整代码总结简介组件的定义其实就是实现应用中局部功能代码(html,css,js)和资源(MP3 ,M ...
Electron vue使用详解
Electron vue使用详解 Electron是什么? Electron 是一个框架,可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序. 然后这些应用程序可以打包在m ...
Linux运行脚手架vue,Linux Nodejs与vue脚手架详解
本篇教程介绍了Linux Nodejs与vue脚手架详解,希望阅读本篇文章以后大家有所收获,帮助大家对Node.js的理解更加深入. < https://nodejs.org/dist/v8.9 ...
vue路由详解 --基础
vue路由详解 --基础 1.router-link 和router-view组件 router-link相当于封装了一个a标签 router-view为组件显示的位置 <router-link ...
vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...
vue 源码详解（零）：Vue 源码流程图
vue 源码详解(零):Vue 源码流程图最近在研究 Vue 的源码, 整理博客, 结果想到的.看到的内容实在是太多了, 不知道从何写起, 故整理了一个大致的流程图,根据这个顺序进行一一整理. 为了 ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...