自学Vue必看的v-on知识总结

文章目录

v-on基础用法

基本用法示例

v-on参数

v-on参数示例

v-on参数修饰符

.stop修饰符的使用
.prevent修饰符的使用
[keyCode(编码)|keyAlias（简写）] 的使用
.once 的使用

v-on基础用法

（1）作用：绑定事件监听器
（2）缩写（语法糖）：@
（3）预期：function 、Inline Statement、Object

基本用法示例

<body>
  <div id="app">
    <h2>{{count}}</h2>
    <button v-on:click="count--">-</button>
    // 使用方法 ，使用语法糖 
    <button @click='add()'>+</button>
  </div>
  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      count:0
    },
    methods:{
      add() {
        this.count++;
      }
   }
  })
</script>
</body>

在这里插入图片描述

v-on参数

注意：
（1）如果该方法不需要额外的参数，那么方法后的()可以不写
但是注意：如果方法本身中就有一个参数，那么会默认将原生事件event参数传递进去
（2）如果需要同时传入某个参数，同时需要event时，可以通过 $event 传入事件

v-on参数示例

具体细节注释中都有提到

<body>
  <div id="app">
    //<!-- 1、事件调用的方法没有参数 -->
    <button @click="btn1">按钮一</button>
    <button @click='btn1()'>按钮二</button> 
  
    //<!-- 2、在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的 
    //  这个时候Vue会默认地将浏览器生成地event事件对象作为参数传入到方法中
    <button @click="btn2(12)">按钮三</button>
    //<!-- undefined -->
    <button @click="btn2()">按钮四</button>   
    <button @click="btn2">按钮五</button>
  
    //<!-- 3、在我们方法定义时，我们需要event对象，同时有需要其他参数-->
    //<!-- 不加小括号时，event事件对象会传给第一个参数，而方法的第二个参数（本应是event事件对象）却为undefined -->
    <button @click="btn3">按钮六</button>
    //<!-- 这里会认为event是一个变量，若没有event变量会报错 -->
    <button @click="btn3(12,event)">按钮七</button>
   // <!-- 在调用方法时，使用$手动地获取到浏览器的event事件对象 -->
    <button @click="btn3(12,$event)">按钮八</button>
  </div> 
  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      event:12
    },
    methods:{
      btn1() {
        console.log('我是按钮一');        
      },
      btn2(a) {
        console.log(a);  
      },
      btn3(a,event) {
        console.log(a,event);        
      }
    }
  })
</script>
</body>

在这里插入图片描述

v-on参数修饰符

.stop修饰符的使用

.stop修饰符的使用调用event.stopPropagation()
以下示例若不加 .stop 修饰符，将会出现点击按钮时也会

<body>
  <div id="app">
    //<!-- 阻止冒泡 -->
    
    <div @click='div'>
      <span>点我才触发div点击事件</span>
      <button @click.stop='btn'>按钮</button>
    </div>  
  </div>

  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    methods:{
      btn() {
        console.log("btn");      
      },
      div() {
        console.log("div");       
      }
    }
  })

</script>
</body>

在这里插入图片描述

.prevent修饰符的使用

prevent修饰符的使用调用event.preventDefault()

<body>
  <div id="app">
    <form action="baidu">
    // <!-- 阻止默认事件 -->
    <input type="submit" value="提交" @click.prevent="submit">
  </form> 
  </div>

  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    methods:{
      submit() {
        console.log("我提交了");  
      }
    }
  })

</script>
</body>

在这里插入图片描述

[keyCode(编码)|keyAlias（简写）] 的使用

[keyCode(编码)|keyAlias（简写）] 只当事件是从特定键触发时才触发回调

<body>
  <div id="app">
    <!--3 -->
    <input type="text" @keyup="keyUp">
    <input type="text" @keyup.enter="keyUp">
  </div>

  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    methods:{
      keyUp() {
        console.log("keyUp");  
      }
    }
  })

</script>
</body>

在这里插入图片描述

.once 的使用

.once 只触发一次回调

<body>
  <div id="app">
    <button @click.once ='one'>只触发一次</button>
  </div>
  
<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    methods:{
      one() {
        console.log("one");  
      }
    }
  })

</script>
</body>