v-on指令

Posted 2021-07-28 So istes immer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-on指令相关的知识，希望对你有一定的参考价值。

事件监听

1.基本使用

在前端开发中，我们需要经常和用户交互
这个时候，我们必须监听用户发生的事件，比如点击、拖拽、键盘事件等等
在Vue中我们用v-on指令来监听事件
缩写：@
参数:event

基本使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{counter}}</h2>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      counter: 0,
    },
    methods: {
      increment(){
        this.counter++;
      },
      decrement(){
        this.counter--;
      }
    },
  })
</script>
</body>
</html>

2.参数传递问题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1.事件调用的方法没有参数，方法后面的参数可省略-->
  <button @click="btnClick">按钮1</button>
  <button @click="btnClick()">按钮1</button>

<!-- 2.在事件定义时，写方法时省略了小括号，但是方法本身如果需要传一个参数，
那么vue会默认将浏览器产生的事件对象当作实参传入到方法中 -->
  <button @click="btnClick2">按钮2</button>
  <button @click="btnClick2(123)">按钮2</button>
<!--  有小括号却什么也不传，则方法的形参就变成undefined-->
  <button @click="btnClick2()">按钮2</button>

<!--  3.方法定义时，我们需要event对象，又需要其它参数，获取事件对象：$event-->
  <button @click="btnClick3(123, $event)">按钮3</button>
</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    methods: {
      btnClick(){
        console.log("btnClick");
      },
      btnClick2(event){
        console.log(event);
      },
      btnClick3(arg, event){
        console.log(arg, event)
      },
    }
  })
</script>
</body>
</html>

3.v-on修饰符

.stop - 调用event.stopPropagation()
.prevent - 调用event.preventDefault()
.(keyCode | keyAlias) - 当事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 只触发一次回调

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  1. .stop修饰符的使用，可以阻止事件的冒泡-->
  <div @click="divClick">
    <button @click="btnClick">按钮1</button>
    <button @click.stop="btnClick">按钮1</button>
  </div>

<!--  2. .prevent修饰符的使用，阻止事件的发生-->
  <br>
  <form action="baidu">
    <input type="submit" value="提交" @click="submitClick" >
    <input type="submit" value="提交" @click.prevent="submitClick" >
  </form>

<!--  3. 监听某个键盘的键帽-->
<!--  监听任意键-->
  <input type="text" @keyup="keyUp">
<!--  监听enter键-->
  <input type="text" @keyup.enter="keyUp">

<!-- 4. .once修饰符的使用，点击回调只触发一次 -->
  <button @click.once="btnClick2">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    methods: {
      btnClick(){
        console.log("btnClick");
      },
      divClick(){
        console.log("divCLick");
      },
      submitClick(){
        console.log("submitClick");
      },
      keyUp(){
        console.log("keyClick");
      },
      btnClick2() {
        console.log("btnCLick2");
      }
    }
  })
</script>
</body>
</html>

以上是关于v-on指令的主要内容，如果未能解决你的问题，请参考以下文章