vue事件修饰器

vue事件修饰器

1.stop等同于JavaScript中的event.stopPropagation()，防止事件冒泡(由内向外) 例子

未添加stop情况下 点击3 执行结果：会弹出三次alert 分别是是3 2 1，
添加stop后执行 3 后面21将停止， 点击2会正常执行21

<template>
  <div> <div @click="a">1
          <div @click="b">2
              <div @click.stop="c">3</div>
          </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    a() {alert(1);},
    b() {alert(2);},
    c() {alert(3);},
  },
};
</script>

2.prevent：等同于JavaScript中的event.preventDefault()，阻止默认行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播例子：

停止执行a标签条件，执行自定义函数

<template>
  <div>
    <a
      href="http://www.baidu.com"
      target="_blank"
      rel="noopener noreferrer"
      @click.prevent="a"
      >prevent修饰器</a
    >
  </div>
</template>
<script>
export default {
  methods: {
    a() {alert(1)},
  },
};
</script>

3.capture：等同于JavaScript中的event.currentTarget ()，防止事件冒泡(由外向内）例子

未添加capture时  点击3    执行结果将会是  321 
当3添加了修饰器（capture） 点击3 执行 顺序 132 
因第二个没有加captrue所以又变成了冒泡从3开始执行

<template>
  <div>
    <div @click.capture="a">1
      <div @click="b">2
        <div @click="c">3</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    a() {alert(1);},
    b() {alert(2);},
    c() {alert(3);},
  },
};
</script>

4.self：只会触发自己范围内的事件，不包含子元素 例子

判断当前事件是否是自身触发执行，如果不是则跳过 。
点击3 未添加self 将会执行冒泡  执行 321 
点击3   添加self后 执行 3和1   2将会跳过不执行

<template>
  <div>
    self修饰器
    <div @click="a">1
      <div @click.self="b">2
        <div @click="c">3</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    a() {alert(1);},
    b() {alert(2);},
    c() {alert(3);},
  },
};
</script>

5.once：只会触发一次 例子：

once 只能点击触发一次，再次点击将无效，除非刷新

<template>
    <div @click.once="a">1</div>
</template>
<script>
export default {
  methods: {
    a() {alert(1);},
  },
};
</script>

6.sync：子组件改变父组件状态

父组件

<template>
  <div>
    <input type="button" value="我是父组件中的按钮" @click="show" />
    <!-- 演变1：<Index v-show="isShow" @upIsShow="changeIsShow" ></Index> -->
    <!-- 演变2：<Index v-show="isShow" @update:isShow="changeIsShow" ></Index> -->
    <!-- 演变3：<Index @update:isShow="(bol) => (isShow = bol)" v-show="isShow" /> -->
    <Index :customName.sync="isShow" v-show="isShow"></Index>
  </div>
</template>
<script>
import Index from "./components/index";
export default {
  data() {return {isShow: false,}},
  components: {Index,},
  methods: { 
  // changeIsShow(bol) {this.isShow = bol}对应演变1，2,
  show() {this.isShow = true;}},
};
</script>

子组件

<template>
  <div>
    <input type="button" value="sync修饰器" @click="upIsShow" />
  </div>
</template>
<script>
export default {
  methods: {
    upIsShow() {
     //this.$emit("upIsShow", false);对应父组件演变1，2
      this.$emit("update:customName", false);
    },
  },
};
</script>

7.native 组件绑定原生事件

不添加native不执行

<template>
    <Index2 @click.native="usenative"></Index2>
</template>
<script>
import Index2 from "./components/index2";
export default {
  components: {Index2},
  methods: {usenative() {alert(2);}},
};
</script>

键盘修饰符

1键盘@keydowm修饰符

enter：回车键
.tab：制表键
.delete：含delete和backspace键
.esc：返回键
.space: 空格键
.up：向上键
.down：向下键
.left：向左键
.right：向右键

2.获取键盘按键key

func(e){
    if(e.keyCode==='键盘按下键的值'){}
}

3.自定按键

<div id="app">
    <input type="text" v-on:keydown.f5="func">
</div>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
    el: '#app',
    methods: {
        func() {
              console.log('f5')
        }
    }
});

4.同时键盘按键组合

<div id="app">
    <input type="text" @keydown.alt.67=func>
</div>
let app = new Vue({
    el: '#app',
    methods: {
        func() {
              conosle.log('同时按下alt和C(67表述c)')
        }
    }
});