在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操作输入框中选择内容兼容IE及其他主流浏览器
Apr 22 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
Bootstrap前端开发案例一
Jun 17 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
javascript常用经典算法详解
Jan 11 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
Aug 04 Javascript
使用Vue构建可重用的分页组件
Mar 26 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 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网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
ThinkPHP中的常用查询语言汇总
2014/08/22 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
让getElementsByName适应IE和firefox的方法
2007/09/24 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
2013/12/16 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
javascript实现最长公共子序列实例代码
2018/02/05 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
npm的lock机制解析
2019/06/20 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
python 利用turtle库绘制笑脸和哭脸的例子
2019/11/23 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
英文自我鉴定
2013/12/10 职场文书
网上开店必备创业计划书
2014/01/26 职场文书
法人授权委托书样本
2014/09/19 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
python 办公自动化——基于pyqt5和openpyxl统计符合要求的名单
2021/05/25 Python
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python