Vue自定义指令封装节流函数的方法示例
更新时间：2018年07月09日 11:09:22 作者：勇PAN高峰
本篇文章主要介绍了Vue自定义指令封装节流函数的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在《JavaScript高级程序设计》一书中有这样的一个例子:
function throttle (method, context) {
clearTimeout((method.tId))
method.tId = setTimeout(function () {
method.call(context)
}, 100)
}
function resizeDiv () {
var div = document.getElementById('myDiv')
div.style.height = div.offsetWidth + 'px'
}
window.onresize = function () {
throttle(resizeDiv)
}
这个就是很典型的函数节流的应用,不多解释,本文通过vue的自定义指令封装类似的方法.
<template>
<div>
<input
type="text"
v-model="text"
v-debounce="search"
>
</div>
</template>
<script>
export default {
name: 'debounce',
data () {
return {
msg: 'Welcome to Your Vue.js App',
text: '',
count: 1
}
},
directives: {
debounce: {
inserted: function (el, binding) {
let timer
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
binding.value()
}, 300)
})
}
}
},
methods: {
search () {
// 实际要进行的操作 axios.get('')之类的
this.count++
console.log('count is:' + this.count)
}
}
}
</script>
以上代码实现了一个实时搜索类的函数节流,通过vue自定义指令v-debounce实现.原本,如果我们想做一个实施搜索,那么会直接用@keyup=search,这样就会非常耗性能,键盘敲一下,就会调用一次search事件,如果是ajax请求,那么会非常不友好,所以通过v-debounce,则可以在键盘连续敲击的时候组织运行,停留300毫秒才执行.
通过vue的自定义指令,还可以将其挂载在全局,那样就能全局通过v-debounce调用了.这个比传统方法简单很多,不需要call,apply之类的.
关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的,上例绑定的是el, keyup事件,这些也可以通过binding传递,通过vue的自定义指令,可以简化很多重复代码,并且逻辑更加清晰
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面通过本文给大家介绍vue.js ajax动态参数与列表显示实现方法，感兴趣的朋友一起看看吧2016-10-10
本文主要介绍了flask和vue前后端分离项目部署的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
vue.js2.0 实现better-scroll的滚动效果实例详解
better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等，下面通过本文给大家介绍vue.js2.0 实现better-scroll的滚动效果，感兴趣的朋友一起看看吧2018-08-08
这篇文章主要为大家详细介绍了vue的watch和watchEffect，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要为大家介绍了vue测试环境打包与生产环境打包文件数量不一致的解决方案，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要介绍了vue截图转base64转文件File异步获取方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Vue3 + Vite 使用 SVG 的方法主要是为了引入和利用图标库、自定义组件以及通过插件简化项目构建过程,这篇文章给大家介绍了Vue3+vite实现使用svg可改变颜色的全过程,需要的朋友可以参考下2024-07-07
这篇文章主要为大家详细介绍了vue使用swiper实现左右滑动切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
这篇文章主要为大家介绍了项目中一键添加husky实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了vue.js使用3DES加密的方法,结合实例形式分析了vue.js使用3DES加密的具体操作步骤与使用技巧,并提供了CryptoJS-v3.1.2的本地下载,需要的朋友可以参考下2018-05-05
最新评论