vue修饰符

修饰符

事件修饰符

语法：

.stop 阻止事件继续传播
.prevent 阻止标签默认行为
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

注意：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

按键修饰符

语法：
全部的按键别名：
.enter、 .tab、 .delete (捕获“删除”和“退格”键)、.esc、.space、.up、.down、.left、.right
修饰键：.ctrl、.alt、.shift、.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

与按键别名不同的是，修饰键和 keyup 事件一起用时，事件引发时必须按下正常的按键。换一种说法：如果要引发 keyup.ctrl，必须按下 ctrl 时释放其他的按键；单单释放 ctrl 不会引发事件。

<!-- 按下Alt + 释放C触发 -->
<input @keyup.alt.67="clear">
 
<!-- 按下Alt + 释放任意键触发 -->
<input @keyup.alt="other">

<!-- 按下Ctrl + enter时触发 -->
<input @keydown.ctrl.13="submit">

表单修饰符

.number 转换为数值
注意点：当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。
.trim 自动过滤用户输入的首尾空白字符只能去掉首尾的不能去除中间的空格

.lazy 将input事件切换成change事件
.lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上在失去焦点或者按下回车键时才更新

自定义按键修饰符

<div id="app">
 <input type="text" v-on:keyup.65='handle' >  
 <input type="text" v-on:keyup.aaa='handle'>
  </div>

 <script type="text/javascript">
 /*
   事件绑定-自定义按键修饰符
   规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值
 */
 Vue.config.keyCodes.aaa = 65
 var vm = new Vue({
   el: '#app',
   data: {
     info: ''
   },
   methods: {
     handle: function(event){
       console.log(event.keyCode)
     }
   }
 });
  </script>

朗读

赞 · 3

版权属于：

拾光°の博客

本文链接：

https://www.blog.lzlj.top/index.php/archives/21/（转载时请注明本文出处及文章链接）

作品采用：

《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

111 作者
Windows 10 · Google Chrome

{!{data:image/webp;base64,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}!}

2021-10-18 回复

拾光°の博客

修饰符

事件修饰符

按键修饰符

表单修饰符

自定义按键修饰符

人生倒计时

热门文章