vue自定义指令封装节流_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的自定义指令封装类似的方法.
type="text"
v-model="text"
v-debounce="search"
>
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)
}
}
}
以上代码实现了一个实时搜索类的函数节流,通过vue自定义指令v-debounce实现.原本,如果我们想做一个实施搜索,那么会直接用@keyup=search,这样就会非常耗性能,键盘敲一下,就会调用一次search事件,如果是ajax请求,那么会非常不友好,所以通过v-debounce,则可以在键盘连续敲击的时候组织运行,停留300毫秒才执行.
通过vue的自定义指令,还可以将其挂载在全局,那样就能全局通过v-debounce调用了.这个比传统方法简单很多,不需要call,apply之类的.
关键点:vue 的自定义指令传递的参数binding 如果是一个函数,则通过binding.value()来执行,通过上述示例,还可以传递比如事件, 绑定对象之类的,上例绑定的是el, keyup事件,这些也可以通过binding传递,通过vue的自定义指令,可以简化很多重复代码,并且逻辑更加清晰
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
本文标题: Vue自定义指令封装节流函数的方法示例
本文地址: http://www.cppcns.com/ruanjian/java/232411.html
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例相关推荐
- TIA博途中使用AT指令实现双字中高低字转换的具体方法示例
TIA博途中使用AT指令实现双字中高低字转换的具体方法示例 西门子PLC采用的是大端存储,有些PLC品牌或上位机采用的小端存储,那么在通信时为了获得正确的数据,我们需要将一个双字DWORD中的高低字进 ...
- vue 数字变星号 过滤器_Vue自定义过滤器格式化数字三位加一逗号
{{num | NumFormat}}元 data(){ return { num: 876543.00 } }, filters: { NumFormat: function (value) { i ...
- vue试按钮失去焦点_Vue中实现回车键切换焦点的方法
几乎在所有浏览器中,都具有 Tab 键切换焦点的功能. 但是任性的用户强烈要求一定要有 Enter 键切换焦点的功能. 为了交付上线拿到钱,我们只好再一次毫无原则性的接受了客户的需求. 在上一代人中, ...
- vue接口总是请求超时_vue axios请求超时的正确处理方法
自从使用Vue2之后,就使用官方推荐的axios的插件来调用API,在使用过程中,如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历. 具体原因 最近公司在做一个项目, ...
- python自定义类求解一元二次方程_Python实现求解一元二次方程的方法示例
本文实例讲述了Python实现求解一元二次方程的方法.分享给大家供大家参考,具体如下: 1. 引入math包 2. 定义返回的对象 3. 判断b*b-4ac的大小 具体计算代码如下: # -*- co ...
- vue自定义指令之手写v-loading指令
先看效果 自定义加载效果的loading指令 为什么不创建一个组件来加载loading效果: 麻烦你得先引入组件,注册挂载组件,然后在通过v-if在空子显示隐藏 为什么要用自定义loading指令: ...
- 笔记三 vue中封装复用 过滤器 自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架 封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
- vue click事件传参数_Vue框架之各种指令的使用
今天是刘小爱自学Java的第138天. 感谢你的观看,谢谢你. 学习计划安排如下: 昨天初步接触了2个指令,继续学其它指令. 这个指令数量有点多,有的一个指令还有多种用法,一次性全记下来显然不太现实, ...
- vue 根据字符串生成表单_vue自定义表单生成器,可根据json参数动态生成表单
介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再复杂的表单都可 ...
最新文章
- python采用函数式编程模式吗_Python函数与函数式编程
- 看《疯狂的程序员》,很好很新奇
- 一张图看程序媛阿源的2021个人年度流水账
- linux kill命令使用方法,Linux初学者的killall命令（8个例子）
- 小程序·云开发实战 - 体重记录小程序
- [转]JS部分通用函数
- flutter 如何判断在哪个页面_如何判断初中英语辅导哪个更好呢？
- Java对MongoDb的CURD操作
- linux安装 lr agent
- 开机脚本之——小键盘代替鼠标热键
- 聊聊大龄程序员的一条出路
- matlab hist3 密度图,Matlab中hist3
- python爬股指期货数据_新浪期货数据接口API(实时数据/历史数据)
- ios实用wifi分析仪——AirPort
- Word2vec And Doc2vec - 文本向量化
- linux如何设置串口参数,串口通信的参数如何设置
- 【腾讯Bugly干货分享】程序员们也该知道的事——“期权和股票”
- 接口测试 — 使用Requests库发送POST请求
- phase portrait 如果爱情像数学一样
- 【名词解释】LTE终端的五模、七模、十频、十一频