在vue-cli中引入lodash.js并使用详解


Posted in Javascript onNovember 13, 2019

lodash

是一个一致性、模块化、高性能的 JavaScript 实用工具库。

在vue官方文档中使用了lodash中的debounce函数对操作频率做限制。其引入的方式是直接引入了js

<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>

而现在我们使用vue-cli脚手架搭建的项目在这样使用,明显会很不合适。所以我们需要通过npm来安装

$ npm i --save lodash

然后在项目中通过require去引用

// Load the full build.
var _ = require('lodash');
// Load the core build.
var _ = require('lodash/core');
// Load the FP build for immutable auto-curried iteratee-first data-last methods.
var fp = require('lodash/fp');
 
// Load method categories.
var array = require('lodash/array');
var object = require('lodash/fp/object');
 
// Cherry-pick methods for smaller browserify/rollup/webpack bundles.
var at = require('lodash/at');
var curryN = require('lodash/fp/curryN');

引用在当前组件即可,如在App.vue中引用

<script>
let lodash = require('lodash')

export default {
 data () {
  return {
   firstName: 'Foo',
   lastName: 'Bar2',
   question: '',
   answer: 'ask me'
  }
 },
methods: {
 getAnswer: lodash.debounce(function () {
  if (this.question.indexOf('?') === -1) {
   this.answer = 'without mark'
   return
  }
  this.answer = 'Thinking...'
  var vm = this
  vm.$http.get('https://yesno.wtf/api').then(function (response) {
   vm.answer = lodash.capitalize(response.data.answer)
  })
   .catch(function (error) {
    vm.answer = 'error' + error
   })
 }, 500)
}

详细的操作和文档可以去看官方的中文文档lodash

以上这篇在vue-cli中引入lodash.js并使用详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在模板页面的js使用办法
Apr 01 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
jQuery实现右键菜单、遮罩等效果代码
Sep 27 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
React组件refs的使用详解
Feb 09 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
vue使用exif获取图片旋转,压缩的示例代码
Dec 11 Vue.js
vue 解除鼠标的监听事件的方法
Nov 13 #Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 #Javascript
element实现合并单元格通用方法
Nov 13 #Javascript
vue之debounce属性被移除及处理详解
Nov 13 #Javascript
Vue的click事件防抖和节流处理详解
Nov 13 #Javascript
vue表单数据交互提交演示教程
Nov 13 #Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
javascript之可拖动的iframe效果代码
2008/08/01 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
2019/05/06 Javascript
关于AOP在JS中的实现与应用详解
2019/05/06 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Js on及addEventListener原理用法区别解析
2020/07/11 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
django实现分页的方法
2015/05/26 Python
Python实现带百分比的进度条
2016/06/28 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
python 爬虫基本使用——统计杭电oj题目正确率并排序
2020/10/26 Python
俄语专业毕业生推荐信
2013/10/28 职场文书
倡议书范文
2014/04/16 职场文书
校长个人总结
2015/03/03 职场文书
2015年电工工作总结
2015/04/10 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
教师节倡议书2015
2015/04/27 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
bose降噪耳机音能消除人声吗
2022/04/19 数码科技