在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实现的页内搜索代码
May 23 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
JavaScript获取对象在页面中位置坐标的方法
Feb 03 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
详解Angular5 服务端渲染实战
Jan 04 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
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自动反斜杠的函数代码
2010/01/05 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
关于PHP中interface的用处详解
2020/07/26 PHP
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
jQuery中position()方法用法实例
2015/01/16 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
js实现内容显示并使用json传输数据
2016/03/16 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
js简单正则验证汉字英文及下划线的方法
2016/11/28 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
python实现TF-IDF算法解析
2018/01/02 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
Python Flask框架扩展操作示例
2019/05/03 Python
python实现列表的排序方法分享
2019/07/01 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
英语自荐信常用语句
2013/12/13 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
2014学雷锋活动总结
2014/03/09 职场文书
企业业务员岗位职责
2014/03/14 职场文书
电气工程自动化求职信
2014/03/14 职场文书
英文求职信范文
2014/05/23 职场文书
工作年限证明模板
2015/06/15 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
六年级作文之关于梦
2019/10/22 职场文书