vue的directive使用方法,vue中directives
本文主要介绍vue中自定义指令的相关信息。自定义指令或使用场景解决的问题是普通DOM元素的底层操作，不能盲目乱用自定义指令。有需要的朋友可以参考一下。
目录
一、什么是自定义命令二。如何自定义命令钩子函数三？应用场景输入框防抖图片懒人加载一键复制功能拖拽汇总
一、 什么是自定义指令
我们在v-开头看到的内联属性都是指令。不同的指令可以完成或实现不同的功能，对普通DOM元素进行底层操作。此时，将使用自定义指令。除了核心功能的默认内置指令(v-model和v-show)，Vue还允许注册自定义指令。
使用说明的几种方法：
//将实例化一条指令，但这条指令没有参数
` v-xxx
//-将值传递给指令
` v-xxx=值
//-向指令中传递一个字符串，例如` v-html= p content/p ` s
` v-xxx=string
//-传递参数(` arg `)，如` v-bind:class= name `。
` v-xxx:arg=value
//-使用修饰符(` modifier `)
` v-xxx:arg.modifier=value
二、 如何自定义指令
注册自定义指令包括全局注册和本地注册。
全局注册主要通过使用Vue.directive方法进行注册。
Vue.directive的第一个参数是指令的名称(不需要写v前缀)，第二个参数可以是对象数据，也可以是指令函数。
//注册一个全局自定义指令“v-focus”。
Vue.directive(focus ，{
//当绑定元素插入DOM时.
插入：函数(el) {
//焦点元素
El.focus() //页面加载后自动让输入框获得焦点的小函数。
}
})
本地注册是通过设置组件选项中的directive属性来实现的。
指令：{
焦点：{
//指令的定义
插入：函数(el) {
El.focus() //页面加载后自动让输入框获得焦点的小函数。
}
}
}
然后，您可以在模板中的任何元素上使用新的v-focus属性，如下所示：
输入垂直焦点/
钩子函数
自定义指令也像组件一样具有挂钩功能：
Bind:仅在指令第一次绑定到元素时调用一次。可以在这里执行一次性初始化。
Inserted:当绑定元素插入到父节点时调用(只存在父节点，但不一定插入到文档中)
Update:当组件的VNode更新时调用，但它可能发生在其子VNode更新之前。指令的值可能已更改，也可能未更改。但是您可以通过比较更新前后的值来忽略不必要的模板更新。
Updated:在component的VNode updated指令所在的位置及其子VNode全部更新后调用。
Unbind:仅在指令从元素解除绑定时调用一次。
的所有挂钩函数的参数如下：
El:指令绑定的元素可以用来直接操作DOM。
绑定：包含以下属性的对象：
` name `:指令名，不包括v前缀。
` value `:指令的绑定值，例如，在v-my-directive=1 1 中，绑定值为2。
` oldValue:指令绑定的前一个值，仅在update和componentUpdated挂钩中可用。无论值是否改变都可用。
`表达式`:字符串形式的指令表达式。例如，在v-my-directive=1 1 中，表达式为 1 1 。
` arg `:传递给指令的参数，可选。例如，在v-my-directive:foo中，参数是 foo 。
` Modifiers `:包含修改器的对象。例如，在v-my-directive.foo.bar中，修饰符对象是{foo: true，bar: true}
Vnode`:Vue编译生成的虚拟节点。
OldVnode:前一个虚拟节点，它只在update和componentUpdated挂钩中可用。
除el外，其他参数应为只读，不可修改。如果需要在钩子之间共享数据，建议通过元素的数据集来实现。
例如：
div v-demo={ color: white ，text:你好！}/div
脚本
Vue.directive(demo ，function (el，binding) {
控制台。日志(绑定。价值。颜色)//白色
控制台。日志(绑定。价值。文本)//你好！
})
/脚本
三、应用场景
使用自定义组件组件可以满足我们日常一些场景，这里给出几个自定义组件的案例：
防抖
图片懒加载
一键复制的功能
输入框防抖
防抖这种情况设置一个v形节流阀自定义指令来实现
举个例子：
//1.设置v形节流阀自定义指令
Vue.directive(throttle ，{
bind: (el，binding)={
设节流时间=binding.value//防抖时间
如果(!throttleTime) { //用户若不设置防抖时间，则默认2s
节流时间=2000
}
让cbFun
el.addEventListener(click ，event={
如果(!cbFun) { //第一次执行
cbFun=setTimeout(()={
cbFun=null
}，油门时间)；
}否则{
事件事件。停止立即传播()；
}
},真);
},
});
//2.为按钮标签设置v形节流阀自定义指令
按钮@click=sayHello v-throttle提交/按钮
图片懒加载
设置一个懒惰自定义组件完成图片懒加载
const LazyLoad={
//安装方法
安装(Vue，选项){
//代替图片的装货图
let defaultSrc=options.default
Vue.directive(lazy ，{
bind(el，binding){
LazyLoad.init(el，binding.value，默认src)；
},
已插入(el){
//兼容处理
如果(窗口中的“内部观察员”){
懒惰负载。观察(El)；
}否则{
懒惰负载。听众滚动(El)；
}
},
})
},
//初始化
init(el，val，def){
//src储存真实科学研究委员会
el.setAttribute(src ，val)；
//设置科学研究委员会为装货图
el.setAttribute(src ，def)；
},
//利用观察者间监听埃尔
观察(el){
让io=新的内部观察者(条目={
设实src=El。数据集。src
如果(条目[0]。正在交叉
if(realSrc){
el.src=realSrc
埃尔。删除属性(“src”)；
}
}
});
io。观察(El)；
},
//监听卷起事件
listenerScroll(el){
让handler=懒惰加载。节流(懒加载。负载，300)；
懒惰负载。负载(El)；
窗户。addevent侦听器( scroll ，()={
汉德勒(El)；
});
},
//加载真实图片
负载(el){
设窗口高度=文档。documentelement。客户身高
设elTop=El。getboundingclientrect().顶；
设elBtm=el.getBoundingClientRect().底部；
设实src=El。数据集。src
if(elTop - windowHeight0elBtm 0){
if(realSrc){
el.src=realSrc
埃尔。删除属性(“src”)；
}
}
},
//节流
节气门(fn，延迟){
让定时器；
让时光倒流
返回函数（.args){
让货币时间=日期。now()；
设上下文=这个
如果(!prev time)prev time=curr time；
清除超时(定时器);
如果(当前时间-前一时间延迟){
prevTime=currTime
应用(上下文，参数);
清除超时(定时器);
返回；
}
timer=setTimeout(function(){
前一时间=日期。now()；
计时器=空
应用(上下文，参数);
},延迟);
}
}
}
导出默认延迟加载
一键 Copy的功能
从“蚂蚁设计”导入{邮件}；
const vCopy={ //
/*
约束钩子函数，第一次绑定时调用，可以在这里做初始化设置
el:作用的数字正射影像图对象
价值：传给指令的值，也就是我们要复制的值
*/
bind(el，{ value }) {
埃尔. value=值；//用一个全局属性来存传进来的值，因为这个值在别的钩子函数里还会用到
el.handler=()={
如果(!埃尔价值){
//值为空的时候，给出提示，我这里的提示是用的蚂蚁设计的提示，你们随意
Message.warning(无复制内容);
返回；
}
//动态创建文本区域标签
const textarea=document。createelement(“textarea”)；
//将该文本区域设为只读的防止ios下自动唤起键盘，同时将文本区域移出可视区域
textarea.readOnly= readonly
文本区域。风格。position= absolute
文本区域。风格。left=-9999 px ；
//将要复制的值赋给文本区域标签的价值属性
textarea.value=el .美元价值
//将文本区域插入到身体中
文档。身体。appendchild(textarea)；
//选中值并复制
文本区域。select()；
//textarea.setSelectionRange(0，textarea。价值。长度)；
常量结果=文档。exec命令(“Copy”)；
如果（结果){
Message.success(复制成功);
}
文档。身体。移除子对象(textarea)；
};
//绑定点击事件，就是所谓的一键复制啦
el.addEventListener(click ，el。处理者)；
},
//当传进来的值更新的时候触发
componentUpdated(el，{ value }) {
埃尔. value=值；
},
//指令与元素解绑的时候，移除事件绑定
解除绑定(el)
el.removeEventListener(click ，el。处理者)；
},
};
导出默认vCopy
拖拽
div ref=a id=bg v拖动/div
指令：{
拖动：{
bind() {}，
已插入(el) {
el.onmousedown=(e)={
设x=e . clientx-El。向左偏移；
设y=e .客户-El。offsettop
document.onmousemove=(e)={
设xx=e . clientx-x px ；
设YY=e . client y px ；
埃尔。风格。左=xx
埃尔。风格。top=YY；
};
el.onmouseup=(e)={
document.onmousemove=null
};
};
},
},
},
关于自定义组件还有很多应用场景，如：拖拽指令、页面水印、权限校验等等应用场景
总结
到此这篇关于某视频剪辑软件中自定义指令管理的的文章就介绍到这了，更多相关某视频剪辑软件自定义指令管理的内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。