烟台网站建设 共赢,古镇网站建设哪家好,推广策略包括哪些方面,网站与网页设计教程哈喽#xff0c;小伙伴们#xff0c;大家好啊#xff0c;最近要实现一个vue自定义指令#xff0c;就是让input输入框禁止输入空格建立一个directives的指令文件#xff0c;里面专门用来建立各个指令的官方文档#xff1a;自定义指令 | Vue.js (vuejs.org)我们都知道vue中…哈喽小伙伴们大家好啊最近要实现一个vue自定义指令就是让input输入框禁止输入空格建立一个directives的指令文件里面专门用来建立各个指令的官方文档自定义指令 | Vue.js (vuejs.org)我们都知道vue中有常见得指令 比如v-show v-for v-if v-on v-blindvue还可以允许你注册自定义得指令英文custom Directives我们已经介绍了两种在 Vue 中重用代码的方式组件和组合式函数。组件是主要的构建模块而组合式函数则侧重于有状态的逻辑。另一方面自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子当一个 input 元素被 Vue 插入到 DOM 中后它会被自动聚焦(vue片段原话)import Vue from vue;Vue.directive(input-no-space, {inserted(el) {// 监听键盘落下的事件禁止输入空格// 监听输入事件以防如果有带有空格的文本粘贴进来可以给予替换el.addeventListenser(input,(e) {})}
})vue中democonst focus {mounted:(el) el.focus()
}export default {directives: {// 在模板中启用v-focusfocus}
}input v-focus/对于自定义指令来说一个很常见的情况是仅仅需要在mounted和updated上事项相同的行为div v-colorcolor/divapp.directive(color,(el,blinding) {// 这会在mounted和updated时调用el.style.color binding.value
})对象字面量如果你的指令需要多个值你可以向它传递一个js对象字面量div v-demo{color: white,text: hello}/divapp.directive(demo,(el,binding) {console.log(binding.value.color)// whiteconsole.log(binding.value.text)// hello
})angular自定义指令import { Directive,ElementRef,HostListener,Input } from angular/core;Directive({selector: [input-no-space]
})export class InputNoSpaceDirective {constructor(private elementRef: ElementRef,) {}// 禁止输入空格即当用户按下空格键时便阻止输入HostListener(keydown,[$event])keydownFun(evt) {}// 监听输入事件以防如果有带有空格的文本粘贴进来可以给予替换HostListener(keyup,[$event,$event.target])keyupFun(evt,target) {}
}好了今天的文章就写到这里了
