这篇文章主要为大家展示了“Vue中v-on指令有什么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue中v-on指令有什么用”这篇文章吧。
创新互联建站专注于东明企业网站建设,响应式网站建设,商城建设。东明网站建设公司,为东明等地区提供建站服务。全流程按需定制,专业设计,全程项目跟踪,创新互联建站专业和态度为您提供的服务
v-on
v-on 主要用来监听 dom 事件,以便执行一些代码块。表达式可以是一个方法名。
简写为:【 @ 】
<div id="app"> <button @click="consoleLog"></button> </div> <script> var app = new Vue({ el: '#app', methods:{ consoleLog:function (event) { console.log(1) } } }) </script>
事件修饰符
.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
只会阻止对元素自身的点击。
以上是“Vue中v-on指令有什么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前文章:Vue中v-on指令有什么用
标题网址:https://www.cdcxhl.com/article48/jidphp.html
成都网站建设公司_创新互联,为您提供云服务器、网站设计、全网营销推广、网站营销、微信公众号、网站策划
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联