在vue-cli中引入lodash.js并使用詳解
更新時間：2019年11月13日 09:53:48 作者：king-w
今天小編就為大家分享一篇在vue-cli中引入lodash.js并使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
lodash
是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。
在vue官方文檔中使用了lodash中的debounce函數(shù)對操作頻率做限制。其引入的方式是直接引入了js
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
而現(xiàn)在我們使用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');
引用在當(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文件的生成和使用 ,非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了Vue 刷新當(dāng)前路由的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了vue地區(qū)選擇組件主要用于全國地區(qū)數(shù)據(jù)的操作，包括省，市，區(qū)三級聯(lián)動，地區(qū)數(shù)據(jù)的添加和刪除,本文重點給大家介紹vue地區(qū)選擇組件教程詳解，需要的朋友參考下吧2018-05-05
Vue $emit()不能觸發(fā)父組件方法的原因及解決
這篇文章主要介紹了Vue $emit()不能觸發(fā)父組件方法的原因及解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vuex實現(xiàn)數(shù)據(jù)持久化的兩種方案
這兩天在做vue項目存儲個人信息的時候,遇到了頁面刷新后個人信息數(shù)據(jù)丟失的問題,在查閱資料后,我得出兩種解決數(shù)據(jù)丟失,使用數(shù)據(jù)持久化的方法,感興趣的小伙伴跟著小編一起來看看吧2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue簡單實現(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問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08