Vue.js 学习笔记 十 自定义按键事件

<div id="divApp">
        <!--任何键盘动作都会触发-->
        <input type="text" v-on:keyup="show" />
        <!--回车触发-->
        <!--Vue给我们定义了enter,tab,delete删除和退格,esc,space,up,down,left,right事件-->
        <input type="text" v-on:keyup.enter="show('我是入参')" />
        <!--F2触发,113是F2对应的键盘码-->
        <input type="text" v-on:keyup.113="show" />
    </div>

    <script>
        var v = new Vue({
            el: '#divApp',
            data: {
            },
            methods: {
                show(param) {
                    alert("自定义按键" + param.padStart(10,'abc'));
                }
            }
        })

    </script>

出了按键事件,这里还用了个字符串的padStart方法,第一个参数10,是最小长度,第二个参数abc,是不够最小长度的话,用abc填充在字符串前面,对应的还有padEnd,是在后面填充。

 

其实按键事件用到的情况不多,但是有备无患。

 

上一篇

Vue.js 学习笔记 九 v-if和v-show

下一篇

Vue.js 学习笔记 十一 自定义指令

转载于:https://www.cnblogs.com/luyShare/p/11548781.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js自定义指令可以让我们在模板中直接使用自定义的指令,从而实现一些特殊的功能或交互效果。自定义指令是Vue.js提供的一种扩展机制,它允许我们在编写Vue.js应用程序时自定义DOM元素的行为。 自定义指令主要由两部分组成:指令定义和指令钩子函数。 指令定义是一个包含指令名称、绑定值、修饰符等属性的对象,用来描述指令的属性和行为。指令钩子函数是指在绑定元素插入到DOM中、更新DOM时、解绑元素等特定时刻执行的函数,用来实现指令的具体功能。 下面是一个简单的自定义指令示例,用来实现点击外部区域隐藏弹窗的功能: ```javascript Vue.directive('click-outside', { bind: function(el, binding, vnode) { el.clickOutsideEvent = function(event) { if (!(el == event.target || el.contains(event.target))) { vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind: function(el) { document.body.removeEventListener('click', el.clickOutsideEvent); } }); ``` 在上面的例子中,我们通过`Vue.directive`方法注册了一个名为`click-outside`的自定义指令,该指令的功能是在点击指定元素外的区域时隐藏元素。 在指令的`bind`钩子函数中,我们绑定了一个事件监听器,用来监听`document.body`的点击事件。在事件处理函数中,我们判断点击的目标是否是指定元素或指定元素的子元素,如果不是,则调用指令绑定的方法,执行隐藏元素的操作。 在指令的`unbind`钩子函数中,我们移除了绑定的事件监听器,以避免内存泄漏。 使用自定义指令时,我们可以在模板中通过`v-指令名`的方式来调用指令,如下所示: ```html <div v-click-outside="hidePopup"></div> ``` 在上面的例子中,我们将`click-outside`指令绑定到一个`<div>`元素上,并指定了一个名为`hidePopup`的方法,用来隐藏弹窗。当用户点击该元素外的区域时,指令会自动触发绑定的方法,从而实现弹窗的隐藏。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值