【vue】指令修饰符，键盘事件，阻止默认事件，阻止事件传播

最新推荐文章于 2024-05-03 22:01:02 发布
最新推荐文章于 2024-05-03 22:01:02 发布
阅读量2.7k 收藏 3
点赞数 1
文章标签： javascript ViewUI
原文链接：https://yq.aliyun.com/articles/649874
版权
<style>
#box1 {
width : 100px ;
height : 100px ;
background-color : blue ;
}
#box2 {
width : 50px ;
height : 50px ;
background-color : red ;
}
< /style>
</head>
<body>
<div id = "app" >
  • 语法
<!-- vue的某些指令 可以使用指令修饰符，从而实现不同的指令效果 -->
<!-- 格式：指令.修饰符1.修饰符2 -->
  • number类型
<!--v-model指令的 .number修饰符用于设置绑定的数据为number类型 -->
<input type = "text" v-model . number = "num" >
<p> {{num+1}} </p>

<br>
  • 失去焦点时才同步
<!--v-model指令的 .lazy修饰符，用于设置绑定在blur事件中而不是默认的input事件。 -->
<input type = "text" v-model . lazy = "d1" >
<p> {{d1}} </p>


<hr>
<br>
<br>
  • 去除空格
<!--v-model指令的 .trim修饰符,用于将输入框中的内容trim（去除两端空格）之后再绑定-->
<input type = "text" v-model . trim = "d2" >
<pre>
<span style = "background-color:rgb(173, 119, 119)" > {{d2}} </span>
</pre>
<p style = "background-color:rgb(173, 119, 119)" > {{d2}} </p>

  • 键盘事件
<!-- v-on指令监听的键盘事件，可以使用键名或者keycode作为修饰符，那么仅当这个键被按下才会触发事件 -->
<!-- <input type="text" v-model="d3" @keypress.13="keypress"> -->
<input type = "text" v-model = "d3" @ keypress . enter = "keypress" >


<hr>
  • 阻止默认行为
<!-- v-on 指令的.prevent 修饰符，用于阻止事件的默认行为-->
  • 阻止事件传播
<!-- .stop修饰符，阻止事件的迹象传播。 -->
<a href = "" @ click . prevent = "" > 这是一个按钮 </a>

<hr>

<div id = "box1" @ click . self = "blueClick" >
<div id = "box2" @ click . stop = "redClick" >
<!-- <div id="box2" @click.stop="redClick"> -->
不会向下传播
</div>
</div>
</div>

<script src = "vue.js" > < /script>
<script>
new Vue ({
el: "#app" ,
data: {
num: 0 ,
d1: 100 ,
d2: "" ,
d3: "" ,
},
methods: {
keypress ( e ){
console . log ( e . keyCode )
alert ( this . d3 )
},
blueClick ( e ){
console . log ( "蓝色点击了" )
},
redClick ( e ){
console . log ( "红色点击了" )
}
}
})
< /script>
</body>
weixin_33924220
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue 之事件修饰符 阻止事件冒泡 .stop .prevent .capture .self .once
夜阑珊妖妖
11-21 946
弹层，点击空白处隐藏； <div class="tanceng" @click="blank"> <div class="main" @click.stop> <!-- ... --> <p class="btn" @click="btn">提交</p> </div> </div> 问题：点main ...
07 事件处理
baidu_41922918的博客
07-23 199
1. 事件的基本使用 事件的基本使用： 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名； 2.事件的回调需要配置在methods对象中，最终会在vm上； 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了； 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象； 5.@click=“demo” 和 @click="demo(event)"效果一致，但后者可以传参；其中event)" 效果一致，但后者可以传参；其中even
Vue Vant 移动端如何禁止手机调起自带的输入键盘
最新发布
HaushoLin的博客
05-03 592
一篇移动端如何禁止手机调起自带的输入键盘的文章
vue中键盘事件的处理
热门推荐
水痕
10-04 1万+
一、常见的键盘事件 1、keydown键盘按下 2、keyup键盘抬起 不错说明:如果要确定用户按下是哪个键盘需要使用keyCode===?来确认键盘 二、在vue中键盘事件一般的使用 1、在模板中定义事件名称,并传递$event作为参数<input type="text" placeholder="请输入书名" ref="inputBook" @keydown="submit($event)"/
vue.js事件修饰符(阻止冒泡 默认行为)
ZZHK666的博客
02-10 2576
vue 阻止事件冒泡 默认行为
vue事件修饰符和按键修饰符用法总结
12-03
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现...
Vue 按键修饰符处理事件的方法
12-29
在 PC 端开发时, 我们常常会遇到类似的需求, 比如用户按下 enter 键时提交表单, 没有用按键修饰符时, 我们可能会去监听键盘事件, 根据 keyCode 的值加以判断 Vue 新增按键修饰符和系统修饰符来处理类似事件 /** ...
Vue事件修饰符native、self示例详解
10-16
主要给大家介绍了关于Vue事件修饰符native、self的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
详解vue事件对象、冒泡、阻止默认行为
12-11
整理文档，搜刮出一个vue事件对象、冒泡、阻止默认行为的代码，稍微整理精简一下做下分享。 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title>...
【每天一个小技巧】vue3阻止键盘默认事件
Go_going_的博客
04-01 310
vue3 结合wails go 开发的桌面应用exe 防止界面放大缩小；
vue阻止默认_vue中，阻止默认事件
weixin_29341747的博客
01-14 1634
用vue的写法就是：id="freeinput":rows="6"placeholder="请输入自由条件内容(json格式)"@focus="add_eventListener"@blur="remove_eventListener">methods:{//在vue项目中，需要将事件监听封装成函数，让this托管，才能生效，所以是这样的写法。add_eventListener() {win...
Vue.js 中v-on的事件修饰符【笔记】
单枪匹码
06-09 1361
1、Vue.js中修饰符使用：在指令后缀通过点( . )来调用修饰符。 <a v-on:click.stop="doThis"></a> 举个例子：一个嵌套div，分别添加click事件。 <div id="aa" @click="doaa"> <div id="bb" @click="dobb"></div> </div> 点击以后会相继执行dobb和doaa方法，此时我们可以通过加修饰符的方式来阻止冒泡事件。 <div
Vue 2_4.vue的v-on鼠标移动事件和阻止事件传播
weixin_46503633的博客
05-30 1591
鼠标移动事件的关键字是v-on:mouseover， 例: v-on:mouseover=“divmouseover()” 接下来看下具体代码的编写： 在body中编写以下代码： <body> <div id="jieke"> <div id="div" v-on:mouseover="divmouseover()"> <textarea v-on:mouseover="textareamouseover()">这是一个文件域</texta
Vue.js入门笔记（五）--v-on鼠标移动事件和阻止事件传播
java阳旭的博客
05-23 3772
案例：div 内部有一个 textarea，当鼠标移动到 div 作用域上，提示“鼠标移动到了 div 上了”，当鼠标移动到 textarea 作用域上时，提示“鼠标移动到了 textarea 上了”。 1、原生 JavaScript 的 onmouseover 事件 <div onmouseover="divmouseover()" id="div"> <textarea onmouseover="textareamouseover()">这是一个文件域</textarea
阻止默认事件
weixin_46140106的博客
05-20 190
<script> var ul = document.createElement('ul') document.oncontextmenu = function(e) { e = e || window.event ul.style.position = 'absolute' ul.style.left = e.clientX + 'px' ul.style.top = e.clientY + 'px' ul.innerHTML = '<
Vue事件处理+ Vue事件修饰符(阻止默认行为等)+Vue中的键盘事件
weixin_47075145的博客
10-02 1415
1.使用 v-on:xxx = ' ' 或者 @xxx = ' '，绑定事件，其中xxx是事件名2.事件的回调(事件处理函数)需要配置在 methods 对象中，最终会在 vm上3.methods 中配置的函数，不要用箭头函数！！，否则this指向就不是vm4.methods 中配置的函数，都是被Vue所管理的函数，this指向是 vm 或者 组件实例对象。
阻止事件默认行为
m0_48180834的博客
08-11 773
首先来了解下事件的默认行为： 网页元素的默认行为有：点击a标签时会有一个跳转行为，form表单中点击提交按钮时网页会网页会产生提交行为并刷新网页。 有些情况下要阻止该默认行为，在事件加载完成后执行，这里使用的是window.onload=function(){}事件加载，那么以按钮为例进行分析： 需要先获取要阻止默认行为的dom节点 为该按钮绑定点击事件，在绑定事件的函数体内执行event.preventDefault(); 完整代码（阻止事件默认行为）： <!DOCTYPE html&.
vue click.stop阻止点击事件继续传播
qq_27009517的博客
12-27 1080
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", da.
vue键盘事件修饰符
09-14
Vue.js 提供了键盘事件的修饰符，用于更方便地处理键盘事件。以下是一些常用的键盘事件修饰符： - `.enter`：监听 enter 键 - `.tab`：监听 tab 键 - `.delete`：监听 delete 键 - `.esc`：监听 esc 键 - `.space`：监听空格键 - `.up`：监听上箭头键 - `.down`：监听下箭头键 - `.left`：监听左箭头键 - `.right`：监听右箭头键 同时，你也可以结合其他修饰符使用键盘事件，例如： - `.ctrl`：监听同时按下 ctrl 键的情况 - `.alt`：监听同时按下 alt 键的情况 - `.shift`：监听同时按下 shift 键的情况 - `.meta`：监听同时按下 meta 键的情况（在 Mac 上，meta 键对应 command 键） 下面是一个示例代码，用于演示如何在 Vue.js 中使用键盘事件修饰符： ```html <template> <div> <input type="text" @keyup.enter="handleEnter" /> <input type="text" @keyup.tab="handleTab" /> <input type="text" @keyup.delete="handleDelete" /> </div> </template> <script> export default { methods: { handleEnter() { console.log('Enter key pressed'); }, handleTab() { console.log('Tab key pressed'); }, handleDelete() { console.log('Delete key pressed'); }, }, }; </script> ``` 在上面的示例中，我们使用了 `@keyup.enter`、`@keyup.tab` 和 `@keyup.delete` 来监听相应的键盘事件，并在触发时执行相应的处理函数。你可以根据需要修改处理函数的内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值