在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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
JavaScript将相对地址转换为绝对地址示例代码
Jul 19 Javascript
Javascript 读取操作Sql中的Xml字段
Oct 09 Javascript
Vue.js实战之组件的进阶
Apr 04 Javascript
微信web端后退强制刷新功能的实现代码
Mar 04 Javascript
你可能不知道的CORS跨域资源共享
Mar 13 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
react实现移动端下拉菜单的示例代码
Jan 16 Javascript
js 实现验证码输入框示例详解
Sep 23 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
关于js与php互相传值的介绍
2013/06/25 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
2015/03/16 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
JS实现带动画的回到顶部效果
2017/12/28 Javascript
C#程序员入门学习微信小程序的笔记
2019/03/05 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
用C++封装MySQL的API的教程
2015/05/06 Python
Python之re操作方法(详解)
2017/06/14 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
set在python里的含义和用法
2019/06/24 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
python 实现兔子生兔子示例
2019/11/21 Python
Python class的继承方法代码实例
2020/02/14 Python
结束运行python的方法
2020/06/16 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Pytorch 扩展Tensor维度、压缩Tensor维度的方法
2020/09/09 Python
如何用python批量调整视频声音
2020/12/22 Python
syb养殖创业计划书
2014/01/09 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
期末复习计划
2015/01/19 职场文书
互联网创业商业模式以及赚钱法则有哪些?
2019/10/12 职场文书
两行代码解决Jupyter Notebook中文不能显示的问题
2021/04/24 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python