2020-12-29

Vue修饰符和事件

Vue修饰符：用来修饰事件的操作
例如：

@click.stop='add'  //阻止默认事件冒泡，并执行add方法
@click.prevent='add'//阻止默认事件，并执行add方法
@click.stop.prevent='add'//t同时阻止默认动作和冒泡，并执行add方法

代码举例：阻止默认动作

new Vue({
    template: `
    <div>
        <a @click.prevent="add" href='https://www.baidu.com/'>百度</a>
    </div>
    `,
    methods: {
        add() {
            console.log('hi')
        }
    }
}).$mount('#apple')

1、v-on和其他支持的修饰符(挑重点)

• v-on.{keycode | keyAlias}
• v-on.stop.prevent
• v-bind.prop
• v-bind.camel
• v-bind.sync
• v-model.lazy
• v-model.number
• v-model.trim

2、input输入事件

new Vue({
    template: `
    <div>
        <input @keypress="y" /> //键盘事件
    </div>
    `,
    methods: {
        y(e) {
          if (e.keyCode === 13)
                console.log('用户打了回车')
        //走如果e.keyCode=13，则往下执行的逻辑
        }
    }
}).$mount('#apple')

等价于

new Vue({
    template: `
    <div>
        <input @keypress.13="y" /> //键盘事件，按回车（13），就执行y方法
    </div>
      //走用户点击e.keyCode=13往下执行y的逻辑
    `,
    methods: {
        y(e) {
            console.log('用户打了回车')
        }
    }
}).$mount('#apple')

由于按键码不好记，Vue提供了案件码的别名，例：

• .enter -----13
• .tab
• .delete
• .space
• up | down | left | right (上下左右)

3、.Sync(同步)修饰符

Vue规则：组件不能修改props外部数据

this.$emit可以触发事件并传参

$event可以获取￥emit的参数

Sync修饰符官方文档，.sync 修饰符是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。

例如

<Child :money.sync="total" />

会被扩展为

<Child :money="total" v-on:update:money="total = $event" /> 
 <!-- 尤雨溪将$emit后的值获取到了$evnet上 'update:money'事件名一个字符串-->

当子组件需要更新money时，会显式触发一个更新事件

    <button @click="$emit('update:money', money - 100)">
<!--vue内置了eventBus，当前实例继承了eventBus，可以$emit触发一个事件，更新money并放到$event上-->

举个真实例子

<template>
  <div class="app1">
    {{ `我现在有${total}` }}
    <hr />
    <!-- <Child :money="total" v-on:update:money="total = $event" /> -->
    <Child :money.sync="total" />
    <!-- 尤雨溪将$emit后的值获取到了$evnet上 'update:money'事件名一个字符串-->
  </div>
</template>
<script>
import Child from "./child.vue";
export default {
  components: { Child },
  data() {
    return {
      total: 10000,
    };
  },
};
</script>

<style  scoped>
.app1 {
  border: 3px solid red;
  padding: 10px;
}
</style>

<template>
  <div class="child">
    {{ money }}
    <button @click="$emit('update:money', money - 100)">
      <!--vue内置了eventBus，当前实例继承了eventBus，可以$emit触发一个事件-->
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"],
};
</script>

<style scoped>
.child {
  border: 1px solid red;
  padding: 4px;
}
</style>