|
1、监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。事件代码可以直接放到v-on后面，也可以写成一个函数。 示例代码如下： <div id="app"> <p>{{counter}}</p> <button @click="counter += 1">+1</button> <button @click="subtract(10)">-10</button></div><script> const app = new Vue({ el: "#app", data: { counter: 0 }, methods: { subtract(value){ this.counter-=value } } })</script>
2、传入event参数如果在事件处理函数中，想要获取原生的DOM事件，那么在html代码中，调用的时候，可以传递一个$event参数。 示例代码如下： <button v-on:click="subtract(10,$event)">减10</button>...<script>...methods: { subtract: function(value,event){ this.count -= value; console.log(event); }}...</script>
3、事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 - .stop：
event.stopPropagation，阻止事件冒泡。 - .prevent：
event.preventDefault，阻止默认行为 - .capture：事件捕获。
- .self：代表当前这个被点击的元素自身。
- .once：这个事件只执行一次。
- .passive：在页面滚动的时候告诉浏览器不会阻止默认的行为，从而让滚动更加顺畅。
案例1：阻止单击事件继续传播<div id="app"> <div @click="divClick"> 1111 <button @click.stop="btnClick">按钮</button> </div></div><script> let app = new Vue({ el: "#app", data: { count: 0 }, methods: { divClick(){ console.log("divClick") }, btnClick(){ console.log("btnClick") } } });</script>
案例2：提交事件不再重载页面<div id="app"> <form action=""> <label> <input type="text"> </label> <label> <input type="submit" value="提交"> </label> </form></div><script> const app = new Vue({ el: "#app", data: { } })</script>以上是最标准的提交数据的代码，提交完后会自动跳转到百度，但是现在有个需求，我们希望输入完数据后，不会自动跳转到百度，而是通过自己的方法，先处理数据，处理完后，自己指定页面跳转， 代码如下： <div id="app"> <form action="https://www.baidu.com"> <label> <input type="text"> </label> <label> <input type="submit" value="提交" @click.prevent="testClick"> </label> </form></div><script> const app = new Vue({ el: "#app", methods: { testClick(){ } } })</script>这里我们给submit绑定了一个点击事件，并使用.prevent阻止了他的默认行为 到此这篇关于关于Vue v-on指令的使用 的文章就介绍到这了,更多相关Vue v-on指令内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net！
下载地址:
Vue 计算属性 computed
JavaScript实现标签页切换效果 |
