总结的vue一些有趣的包还有学习链接

一个很不错的学习网站

lockr:让使用本地存储保存对象、数组、数字、字符串省略很多步骤

第一步 ：安装
npm i lockr --save
也可以直接引入： <script src="https://raw.githubusercontent.com/tsironis/lockr/master/lockr.js" type="text/javascript"></script>
第二步 ：使用
import Lockr from 'lockr'

Lockr.set('username', 'Coyote'); // 保存字符串
Lockr.set('user_id', 12345); // 保存整型
Lockr.set('users', [{name: 'John Doe', age: 18}, {name: 'Jane Doe', age: 19}]);   //保存对象

Lockr.get('score', 0):
> 0

Lockr.set('score', 3):
Lockr.get('score', 0):
> 3
......
[更多请参见](http://www.bslxx.com/a/mianfeivueke/2017/1206/1493.html)

clipboard:一键复制

clipboard

vue-directive-image-previewer：点击图片实现放大

vue-directive-image-previewer

string-format:

方法一：
String.prototype.format=function(){  
			 if(arguments.length==0) 
			 return this;  
			 for(var s=this, i=0; i<arguments.length; i++)  
			s=s.replace(new RegExp("\\{"+i+"\\}","g"), arguments[i]);  
			 return s;  
			};
			//占位符可以为多个  
			alert("http://{0}/{1}".format("www.songyanjun.net", "index.html"));  
			//与上同理  
			alert("请输入{0},输完后再按存盘按钮".format("姓名"));
方法二：
			String.format = function() {
				var s = arguments[0];
				for (var i = 0; i < arguments.length - 1; i++) {
					var reg = new RegExp("\\{" + i + "\\}", "gm");
					s = s.replace(reg, arguments[i + 1]);
				}
				return s;
			}
			function stringFormat() {
                var s = arguments[0];
                console.log(s)
				for (var i = 0; i < arguments.length - 1; i++) {
					var reg = new RegExp("\\{" + i + "\\}", "gm");
					s = s.replace(reg, arguments[i + 1]);
				}
				return s;
			}

			var name='jeff';
			var greeting1 = String.format("Hi--1, {0}, '{1}',this is a '{0}'! ", name, 'uuu');
			var greeting2 = stringFormat("Hi--2, {0}, '{1}',this is a '{0}'! ", name, 'uuu');
			alert(greeting1 + '\r\n' + greeting2);

vue如何实现键盘登录

在input框中@keyup.enter.navite=‘events（和点击登录按钮的事件名一样）’

vue-lazyload

vue-lazyload是通过指令的方式实现的，定义的指令是v-lazy指令
源码分析

npm安装

npm install vue-lazyload -S

CDN安装

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js" type="text/javascript"></script>   

main.js

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

// or with options 也可以直接在这里设置参数
Vue.use(VueLazyload, {  
  preLoad: 1.3,   //预加载的宽高比
  error: 'dist/error.png',//图片加载失败时使用的图片源
  loading: 'dist/loading.gif',//图片加载的路径
  attempt: 1//尝试加载次数
})

Vue.use(VueLazyLoad,{
  loading: require('base/loading/loading.gif')
})

vue文件中引入

<img class="avatar" v-lazy="item.avatar">

// 其核心是lazyLoadHandler()函数，是经过节流函数处理的图片加载的入口函数。
watch: {
      topList() {  
        setTimeout(() => {
          this.$Lazyload.lazyLoadHandler()
        }, 20)
      }
    },

fastclick

为了解决移动端点击事件延迟300ms的问题

// 1.安装
npm install fastclick -S

// 2.main.js文件中
import fastclick from 'fastclick'

fastclick.attach(document.body)