【技术积累】Vue.js中的事件【一】

Vue中的事件是什么

在Vue.js中，事件是用于处理用户交互的重要机制。Vue.js提供了一系列的事件处理方法和指令，使开发者能够方便地处理用户的各种操作。

1. 事件绑定：Vue.js通过v-on指令来绑定事件。可以在HTML标签上使用v-on指令来监听特定的事件，并在触发事件时执行相应的方法。例如，可以使用v-on:click来监听点击事件，v-on:input来监听输入事件等。

2. 事件修饰符：Vue.js提供了一些事件修饰符，用于对事件进行进一步的处理。例如，可以使用.stop修饰符来阻止事件冒泡，.prevent修饰符来阻止默认行为，.capture修饰符来将事件绑定到父元素上等。

3. 自定义事件：除了原生的DOM事件，Vue.js还支持自定义事件。可以使用Vue实例的$emit方法来触发自定义事件，并使用v-on指令来监听自定义事件。这样可以在组件之间进行通信，实现组件的解耦。

4. 事件参数：在事件处理方法中，可以通过$event参数来访问事件对象。事件对象包含了触发事件的详细信息，例如鼠标位置、键盘按键等。可以在事件处理方法中使用$event来获取这些信息。

5. 事件修饰符：Vue.js还提供了一些事件修饰符，用于对事件进行进一步的处理。例如，可以使用.stop修饰符来阻止事件冒泡，.prevent修饰符来阻止默认行为，.capture修饰符来将事件绑定到父元素上等。

6. 事件监听器：除了使用v-on指令来绑定事件，Vue.js还提供了一种更灵活的方式来监听事件，即使用事件监听器。可以使用Vue实例的$on方法来监听事件，并使用$off方法来取消监听。这样可以在任何地方监听和取消监听事件。

总之，Vue.js中的事件机制非常灵活和强大，可以满足各种用户交互的需求。开发者可以通过事件绑定、事件修饰符、自定义事件等方式来处理用户的各种操作，并实现组件之间的通信。

Vue.js中的事件修饰符

Vue.js中的事件修饰符用于在处理事件时提供额外的功能。以下是Vue.js中常用的事件修饰符：

1. .stop：阻止事件冒泡。使用该修饰符可以阻止事件向父元素传播。

2. .prevent：阻止默认事件。使用该修饰符可以阻止元素的默认行为。

3. .capture：使用事件捕获模式。默认情况下，事件是在冒泡阶段处理的，使用该修饰符可以将事件处理移动到捕获阶段。

4. .self：只在事件目标自身触发时触发事件处理程序。如果事件发生在目标元素本身而不是子元素上，则触发事件处理程序。

5. .once：只触发一次事件处理程序。使用该修饰符可以确保事件只被处理一次。

6. .passive：指示事件处理程序不会调用preventDefault()。使用该修饰符可以提高滚动性能。

7. .native：监听组件根元素的原生事件。使用该修饰符可以监听组件根元素上的原生事件。

8. .keyCode：只在特定按键被按下时触发事件处理程序。使用该修饰符可以指定只有在特定按键被按下时才触发事件处理程序。

9. .key：只在特定按键被按下时触发事件处理程序。与.keyCode类似，但可以使用键盘别名而不是键码。

10. .stopPropagation：阻止事件继续传播。与.stop类似，但不会阻止其他事件处理程序被调用。

11. .preventDefault：阻止默认事件。与.prevent类似，但不会阻止事件传播。

12. .sync：实现双向数据绑定。使用该修饰符可以将父组件的属性与子组件的属性进行双向绑定。

这些事件修饰符可以通过在事件后面添加.和修饰符名称来使用，例如@click.stop表示阻止事件冒泡。

.stop

在Vue中，.stop是一个事件修饰符，用于停止事件的传播。它可以用于任何支持事件的元素上，比如按钮、链接等。

下面是一个使用.stop的案例，代码如下：

<template>
  <div @click="outerClick">
    <button @click.stop="innerClick">内部按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log("外部点击事件");
    },
    innerClick() {
      console.log("内部点击事件");
    }
  }
}
</script>

在上面的代码中，我们有一个包含按钮的div元素。当点击按钮时，会触发内部按钮的点击事件，并输出"内部点击事件"。同时，由于使用了.stop修饰符，外部div元素的点击事件不会被触发。

如果没有使用.stop修饰符，当点击按钮时，会先触发内部按钮的点击事件，然后再触发外部div元素的点击事件，输出"内部点击事件"和"外部点击事件"。

.stop修饰符的作用是停止事件的传播，阻止事件从子元素向父元素传播。它可以用于任何支持事件的元素上，通过在事件名后面加上.stop即可生效。

.prevent

在Vue中，.prevent是一个事件修饰符，用于阻止事件的默认行为。它可以用于任何支持事件的元素上，比如按钮、链接等。

下面是一个使用.prevent的案例，代码如下：

<template>
  <div>
    <button @click.prevent="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // 执行表单提交逻辑
      console.log("表单已提交");
    }
  }
}
</script>

在上面的代码中，我们有一个按钮，当点击按钮时，会执行submitForm方法。使用.prevent修饰符可以阻止按钮的默认行为，即阻止表单的提交。

当我们点击按钮时，控制台会输出"表单已提交"，但是页面不会刷新或跳转，因为.prevent修饰符阻止了按钮的默认行为。

.prevent修饰符的作用是阻止事件的默认行为，比如表单的提交、链接的跳转等。它可以用于任何支持事件的元素上，通过在事件名后面加上.prevent即可生效。

.capture

在Vue中，.capture是一个事件修饰符，用于在事件处理期间使用事件捕获模式。它可以用于任何支持事件的元素上，比如按钮、链接等。

下面是一个使用.capture的案例，代码如下：

<template>
  <div @click.capture="outerClick">
    <button @click="innerClick">内部按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log("外部点击事件");
    },
    innerClick() {
      console.log("内部点击事件");
    }
  }
}
</script>

在上面的代码中，我们有一个包含按钮的div元素。当点击按钮时，会先触发外部div元素的点击事件，输出"外部点击事件"，然后再触发内部按钮的点击事件，输出"内部点击事件"。

如果没有使用.capture修饰符，当点击按钮时，会先触发内部按钮的点击事件，输出"内部点击事件"，然后再触发外部div元素的点击事件，输出"外部点击事件"。

.capture修饰符的作用是在事件处理期间使用事件捕获模式，即从父元素向子元素传播事件。它可以用于任何支持事件的元素上，通过在事件名前面加上.capture即可生效。

.self

在Vue中，.self是一个事件修饰符，用于限制事件只能在触发事件的元素自身上触发，而不是在其子元素上触发。它可以用于任何支持事件的元素上，比如按钮、链接等。

下面是一个使用.self的案例，代码如下：

<template>
  <div @click.self="outerClick">
    <button @click="innerClick">内部按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClick() {
      console.log("外部点击事件");
    },
    innerClick() {
      console.log("内部点击事件");
    }
  }
}
</script>

在上面的代码中，我们有一个包含按钮的div元素。当点击按钮时，不会触发外部div元素的点击事件，只会触发内部按钮的点击事件，并输出"内部点击事件"。

如果没有使用.self修饰符，当点击按钮时，会先触发内部按钮的点击事件，输出"内部点击事件"，然后再触发外部div元素的点击事件，输出"外部点击事件"。

.self修饰符的作用是限制事件只能在触发事件的元素自身上触发，而不是在其子元素上触发。它可以用于任何支持事件的元素上，通过在事件名后面加上.self即可生效。

.once

在Vue中，.once是一个事件修饰符，用于指定事件只能触发一次。它可以用于任何支持事件的元素上，比如按钮、链接等。

下面是一个使用.once的案例，代码如下：

<template>
  <div>
    <button @click.once="clickHandler">点击一次</button>
  </div>
</template>

<script>
export default {
  methods: {
    clickHandler() {
      console.log("按钮被点击了");
    }
  }
}
</script>

在上面的代码中，我们有一个按钮，当点击按钮时，会执行clickHandler方法，并输出"按钮被点击了"。使用.once修饰符可以确保该事件只能触发一次。

当我们点击按钮时，控制台会输出"按钮被点击了"，但是再次点击按钮时，不会再触发clickHandler方法。

.once修饰符的作用是指定事件只能触发一次。它可以用于任何支持事件的元素上，通过在事件名后面加上.once即可生效。这对于需要确保事件只执行一次的场景非常有用。

.passive

在Vue中，.passive是一个事件修饰符，用于指定事件监听器是被动的，即不会调用preventDefault()。它可以用于任何支持事件的元素上，比如按钮、链接等。

下面是一个使用.passive的案例，代码如下：

<template>
  <div>
    <a href="#" @click.passive="clickHandler">点击链接</a>
  </div>
</template>

<script>
export default {
  methods: {
    clickHandler(event) {
      event.preventDefault();
      console.log("链接被点击了");
    }
  }
}
</script>

在上面的代码中，我们有一个链接，当点击链接时，会执行clickHandler方法，并输出"链接被点击了"。使用.passive修饰符可以确保事件监听器是被动的，不会调用preventDefault()。

在clickHandler方法中，我们调用了event.preventDefault()来阻止链接的默认行为，即不会跳转到指定的URL。

.passive修饰符的作用是指定事件监听器是被动的，不会调用preventDefault()。它可以用于任何支持事件的元素上，通过在事件名后面加上.passive即可生效。这对于需要在事件监听器中阻止默认行为的场景非常有用。

.naive

在Vue中，.native是一个修饰符，用于监听组件根元素的原生事件。它只能用于组件上，而不能用于普通的HTML元素。

下面是一个使用.native的案例，代码如下：

<template>
  <my-component @click.native="clickHandler"></my-component>
</template>

<script>
export default {
  methods: {
    clickHandler() {
      console.log("组件根元素被点击了");
    }
  }
}
</script>

在上面的代码中，我们有一个自定义组件`my-component`，并在该组件上使用了.native修饰符来监听组件根元素的点击事件。当组件根元素被点击时，会执行clickHandler方法，并输出"组件根元素被点击了"。

.native修饰符的作用是监听组件根元素的原生事件。由于组件的根元素可能是一个自定义的HTML元素，而不是原生的HTML元素，所以默认情况下Vue会将组件上的事件绑定到组件根元素的自定义事件上。但是使用.native修饰符可以绑定到组件根元素的原生事件上。

需要注意的是，.native修饰符只能用于组件上，而不能用于普通的HTML元素。

.keyCode

在Vue中，.keyCode是一个修饰符，用于监听键盘事件的特定按键。它可以用于任何支持键盘事件的元素上，比如输入框、文本区域等。

下面是一个使用.keyCode的案例，代码如下：

<template>
  <div>
    <input type="text" @keydown.enter="enterKeyHandler">
  </div>
</template>

<script>
export default {
  methods: {
    enterKeyHandler(event) {
      console.log("按下了Enter键");
    }
  }
}
</script>

在上面的代码中，我们有一个输入框，当按下Enter键时，会执行enterKeyHandler方法，并输出"按下了Enter键"。使用.keycode修饰符可以监听特定的按键。

在enterKeyHandler方法中，我们通过event对象来获取按下的键的keyCode。在这个例子中，我们使用了.enter修饰符来监听Enter键的按下事件。

.keyCode修饰符的作用是监听键盘事件的特定按键。它可以用于任何支持键盘事件的元素上，通过在事件名后面加上.keyCode即可指定要监听的按键。这对于需要根据按键来执行不同的操作的场景非常有用。

.key

在Vue中，.key是一个修饰符，用于监听键盘事件的特定按键。它可以用于任何支持键盘事件的元素上，比如输入框、文本区域等。

下面是一个使用.key的案例，代码如下：

<template>
  <div>
    <input type="text" @keydown="keyHandler">
  </div>
</template>

<script>
export default {
  methods: {
    keyHandler(event) {
      if (event.key === 'Enter') {
        console.log("按下了Enter键");
      } else if (event.key === 'Escape') {
        console.log("按下了Escape键");
      }
    }
  }
}
</script>

在上面的代码中，我们有一个输入框，当按下键盘上的某个键时，会执行keyHandler方法，并根据按下的键来输出相应的信息。使用.key修饰符可以监听特定的按键。

在keyHandler方法中，我们通过event对象来获取按下的键的key属性。在这个例子中，我们根据按下的键是Enter还是Escape来输出不同的信息。

.key修饰符的作用是监听键盘事件的特定按键。它可以用于任何支持键盘事件的元素上，通过在事件名后面加上.key即可指定要监听的按键。这对于需要根据按键来执行不同的操作的场景非常有用。

.stopPropagation

在Vue中，.stopPropagation是一个事件修饰符，用于阻止事件冒泡。它可以用于任何支持事件的元素上，比如按钮、链接等。

下面是一个使用.stopPropagation的案例，代码如下：

<template>
  <div @click="outerClickHandler">
    <button @click.stop="innerClickHandler">点击按钮</button>
  </div>
</template>

<script>
export default {
  methods: {
    outerClickHandler() {
      console.log("外层div被点击了");
    },
    innerClickHandler(event) {
      event.stopPropagation();
      console.log("内层按钮被点击了");
    }
  }
}
</script>

在上面的代码中，我们有一个外层div和一个内层按钮。当点击按钮时，会执行innerClickHandler方法，并输出"内层按钮被点击了"。同时，由于使用了.stopPropagation修饰符，事件不会继续向外层div冒泡，所以不会执行outerClickHandler方法。

在innerClickHandler方法中，我们调用了event.stopPropagation()来阻止事件冒泡。这意味着点击按钮时，只会执行按钮自身的事件处理逻辑，而不会触发外层div的点击事件。

.stopPropagation修饰符的作用是阻止事件冒泡。它可以用于任何支持事件的元素上，通过在事件名后面加上.stopPropagation即可生效。这对于需要阻止事件冒泡的场景非常有用，可以避免事件在DOM树中向上传播。

.preventDefault

在Vue中，.preventDefault是一个事件修饰符，用于阻止事件的默认行为。它可以用于任何支持事件的元素上，比如表单提交、链接点击等。

下面是一个使用.preventDefault的案例，代码如下：

<template>
  <form @submit.prevent="submitHandler">
    <input type="text">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitHandler() {
      console.log("表单提交");
    }
  }
}
</script>

在上面的代码中，我们有一个表单，当点击提交按钮时，会执行submitHandler方法，并输出"表单提交"。同时，由于使用了.preventDefault修饰符，事件不会触发表单的默认提交行为，即页面不会刷新。

在submitHandler方法中，我们可以执行自定义的表单提交逻辑，而不受默认的表单提交行为影响。

.preventDefault修饰符的作用是阻止事件的默认行为。它可以用于任何支持事件的元素上，通过在事件名后面加上.preventDefault即可生效。这对于需要阻止事件的默认行为的场景非常有用，可以自定义事件的处理逻辑，而不受默认行为的干扰。

.sync

在Vue中，.sync是一个修饰符，用于实现父子组件之间的双向数据绑定。它可以用于任何支持数据绑定的元素或组件上。

下面是一个使用.sync的案例，代码如下：

<template>
  <div>
    <input type="text" :value="message" @input="updateMessage">
    <button @click="resetMessage">重置</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(event) {
      this.message = event.target.value;
    },
    resetMessage() {
      this.message = '';
    }
  }
}
</script>

在上面的代码中，我们有一个输入框和一个重置按钮。输入框的值通过:value绑定到message属性上，同时监听输入事件(@input)来更新message的值。重置按钮点击时，会将message的值重置为空字符串。

.sync

.sync修饰符的作用是实现父子组件之间的双向数据绑定。在父组件中，可以使用v-bind.sync指令将子组件的属性与父组件的数据进行双向绑定。在子组件中，可以使用$emit方法触发一个名为update:属性名的事件，从而更新父组件的数据。

例如，如果我们将上面的代码作为子组件，并在父组件中使用.sync修饰符来绑定message属性，那么父组件可以像这样使用子组件：

<template>
  <div>
    <my-component :message.sync="parentMessage"></my-component>
    <p>父组件的message值为：{{ parentMessage }}</p>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      parentMessage: ''
    }
  }
}
</script>

在父组件中，我们使用:message.sync="parentMessage"来将子组件的message属性与父组件的parentMessage数据进行双向绑定。这样，当子组件中的message值发生变化时，父组件的parentMessage也会相应地更新。反之，当父组件的parentMessage值发生变化时，子组件的message也会相应地更新。

.sync修饰符的作用是简化父子组件之间的双向数据绑定的语法，使代码更加简洁和易读。