关于Vue v-on指令的使用

目录

• 1、监听事件
• 2、传入event参数
• 3、事件修饰符
• 案例1：阻止单击事件继续传播
• 案例2：提交事件不再重载页面

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指令内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！