快捷導(dǎo)航

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

更新時間：2019年11月13日 09:53:48 作者：king-w

今天小編就為大家分享一篇在vue-cli中引入lodash.js并使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

lodash

是一個一致性、模塊化、高性能的 JavaScript 實(shí)用工具庫。

在vue官方文檔中使用了lodash中的debounce函數(shù)對操作頻率做限制。其引入的方式是直接引入了js

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

而現(xiàn)在我們使用vue-cli腳手架搭建的項(xiàng)目在這樣使用，明顯會很不合適。所以我們需要通過npm來安裝

$ npm i --save lodash

然后在項(xiàng)目中通過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');

引用在當(dāng)前組件即可，如在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)
}

詳細(xì)的操作和文檔可以去看官方的中文文檔lodash

以上這篇在vue-cli中引入lodash.js并使用詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的示例代碼
這篇文章主要介紹了Vue3中使用ref與reactive創(chuàng)建響應(yīng)式數(shù)據(jù)的方法,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-08-08
vue2.0開發(fā)入門筆記之.vue文件的生成和使用
本篇文章主要介紹了vue2.0開發(fā)入門筆記之.vue文件的生成和使用 ,非常具有實(shí)用價值，需要的朋友可以參考下
2017-09-09
Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
vue地區(qū)選擇組件教程詳解
這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級聯(lián)動，地區(qū)數(shù)據(jù)的添加和刪除,本文重點(diǎn)給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧
2018-05-05
Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vuex實(shí)現(xiàn)數(shù)據(jù)持久化的兩種方案
這兩天在做vue項(xiàng)目存儲個人信息的時候,遇到了頁面刷新后個人信息數(shù)據(jù)丟失的問題,在查閱資料后,我得出兩種解決數(shù)據(jù)丟失,使用數(shù)據(jù)持久化的方法,感興趣的小伙伴跟著小編一起來看看吧
2023-08-08
vue簡單實(shí)現(xiàn)轉(zhuǎn)盤抽獎
這篇文章主要為大家詳細(xì)介紹了vue簡單實(shí)現(xiàn)轉(zhuǎn)盤抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹
這篇文章主要為大家詳細(xì)介紹了vue使用拖拽方式創(chuàng)建結(jié)構(gòu)樹，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
element中el-table表頭通過header-row-style設(shè)置樣式
有些時候需要給element-ui表頭設(shè)置不同樣式,本文主要介紹了element中el-table表頭通過header-row-style設(shè)置樣式,具有一定的參考價值,感興趣的可以了解一下
2024-01-01
elementUI踩坑記錄-el-table問題
這篇文章主要介紹了elementUI踩坑記錄-el-table問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08