P10. vue3 修饰符

事件修饰符

• • .stop
• .prevent
• .capture
• .self
• .once
• .passive

stop

<script>
export default {
  data() {
    return {
      counter: 0,
      age:18,

    };
  },
  methods:{
    addCounter:function (number, e){
      this.counter +=number;
      console.log()
    },
    addAge(){
      this.age++
    },
    divClick:function(){
      console.log("父元素")
    },
    btnClick:function (){
      console.log("子元素")
    },

  },
};
</script>

<template>
  <div>
    <!-- 绑定事件，js -->
    <h2 @click="counter++">{{counter}}</h2>
    <!--绑定事件，methods，没有传递参数 -->
    <h2 @click="addCounter">{{counter}}</h2>
    <!--绑定事件，methods，传递参数 -->
    <h2 @click="addCounter(2)">{{counter}}</h2>
    <!-- 绑定事件既有参数传递也有事件对象 -->
    <h2 @click="addCounter(5, $event)">{{counter}}</h2>
    <!-- 一个事件绑定多个函数 -->
    <h2 @click="addCounter(5), addAge()">{{counter}}---{{age}}</h2>
    <!-- 事件修饰符 -->
    <!-- stop -->
    <div @click="divClick">
      <button @click.stop="btnClick">anniu</button>
    </div>



  </div>
</template>

<style>

</style>

prevent

<script>
export default {
  data() {
    return {
      counter: 0,
      age:18,

    };
  },
  methods:{
    addCounter:function (number, e){
      this.counter +=number;
      console.log()
    },
    addAge(){
      this.age++
    },
    divClick:function(){
      console.log("父元素")
    },
    btnClick:function (){
      console.log("子元素")
    },
    submitClick(){
      console.log("sumbit数据成功")
    }

  },
};
</script>

<template>
  <div>
    <!-- 绑定事件，js -->
    <h2 @click="counter++">{{counter}}</h2>
    <!--绑定事件，methods，没有传递参数 -->
    <h2 @click="addCounter">{{counter}}</h2>
    <!--绑定事件，methods，传递参数 -->
    <h2 @click="addCounter(2)">{{counter}}</h2>
    <!-- 绑定事件既有参数传递也有事件对象 -->
    <h2 @click="addCounter(5, $event)">{{counter}}</h2>
    <!-- 一个事件绑定多个函数 -->
    <h2 @click="addCounter(5), addAge()">{{counter}}---{{age}}</h2>
    <!-- 事件修饰符 -->
    <!-- stop -->
    <div @click="divClick">
      <button @click.stop="btnClick">anniu</button>
    </div>
    <form action="">
      <input type="submit" value="tijiao" @click.prevent="submitClick">
    </form>


  </div>
</template>

<style>

</style>

.once 点击一次失效

<script>
export default {
  data() {
    return {
      counter: 0,
      age:18,

    };
  },
  methods:{
    addCounter:function (number, e){
      this.counter +=number;
      console.log()
    },
    addAge(){
      this.age++
    },
    divClick:function(){
      console.log("父元素")
    },
    btnClick:function (){
      console.log("子元素")
    },
    submitClick(){
      console.log("sumbit数据成功")
    },
    onceClick(){
      console.log("once only")
    }

  },
};
</script>

<template>
  <div>
    <!-- 绑定事件，js -->
    <h2 @click="counter++">{{counter}}</h2>
    <!--绑定事件，methods，没有传递参数 -->
    <h2 @click="addCounter">{{counter}}</h2>
    <!--绑定事件，methods，传递参数 -->
    <h2 @click="addCounter(2)">{{counter}}</h2>
    <!-- 绑定事件既有参数传递也有事件对象 -->
    <h2 @click="addCounter(5, $event)">{{counter}}</h2>
    <!-- 一个事件绑定多个函数 -->
    <h2 @click="addCounter(5), addAge()">{{counter}}---{{age}}</h2>
    <!-- 事件修饰符 -->
    <!-- stop -->
    <div @click="divClick">
      <button @click.stop="btnClick">anniu</button>
    </div>
    <form action="">
      <input type="submit" value="tijiao" @click.prevent="submitClick">
    </form>
    <button @click.once="onceClick">once</button>

  </div>
</template>

<style>

</style>

点击多次也只。。

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 key 是 Enter 时调用 vm.submit() -->
<input v-on:keyup.enter="submit">
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">
在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用

<script>
export default {
  data() {
    return {
      counter: 0,
      age:18,

    };
  },
  methods:{
    addCounter:function (number, e){
      this.counter +=number;
      console.log()
    },
    addAge(){
      this.age++
    },
    divClick:function(){
      console.log("父元素")
    },
    btnClick:function (){
      console.log("子元素")
    },
    submitClick(){
      console.log("sumbit数据成功")
    },
    onceClick(){
      console.log("once only")
    },
    keyUP(){
      console.log("enter key up")
    }

  },
};
</script>

<template>
  <div>
    <!-- 绑定事件，js -->
    <h2 @click="counter++">{{counter}}</h2>
    <!--绑定事件，methods，没有传递参数 -->
    <h2 @click="addCounter">{{counter}}</h2>
    <!--绑定事件，methods，传递参数 -->
    <h2 @click="addCounter(2)">{{counter}}</h2>
    <!-- 绑定事件既有参数传递也有事件对象 -->
    <h2 @click="addCounter(5, $event)">{{counter}}</h2>
    <!-- 一个事件绑定多个函数 -->
    <h2 @click="addCounter(5), addAge()">{{counter}}---{{age}}</h2>
    <!-- 事件修饰符 -->
    <!-- stop -->
    <div @click="divClick">
      <button @click.stop="btnClick">anniu</button>
    </div>
    <form action="">
      <input type="submit" value="tijiao" @click.prevent="submitClick">
    </form>
    <button @click.once="onceClick">once</button>
    <!-- keyCode键盘编码 ，keyAlias 键子-->
    <input type="text" @keyup.enter="keyUP">

  </div>
</template>

<style>

</style>