原生dom事件vue发生什么

在Vue中使用原生DOM事件，是指在Vue的模板中直接使用原生的DOM事件，而不是使用Vue提供的事件绑定方式。

Vue使用了Virtual DOM来优化渲染性能，它会尽量减少对实际的DOM操作，通过在内存中创建虚拟的DOM树来代替直接操作实际的DOM。这样做的好处是可以提高渲染效率，减少了不必要的DOM操作，但同时也带来了一些限制。

在某些情况下，需要使用原生的DOM事件来处理特定的需求，例如需要监听浏览器的滚动事件、键盘事件等。在这种情况下，可以使用Vue提供的v-on指令或@符号来绑定原生DOM事件。

当发生原生DOM事件时，Vue会自动将事件对象传递给绑定的事件处理函数。在事件处理函数中，可以直接访问事件对象的属性和方法，如event.target、event.preventDefault()等。同时也可以在事件处理函数中访问Vue实例的属性和方法。

需要注意的是，使用原生DOM事件时，需要注意遵循Vue的组件化和数据驱动的原则，不要直接操作实际的DOM，而是通过修改Vue实例的数据来改变DOM的状态。这样可以保证数据和DOM的一致性，避免出现意外的bug。

总结起来，当在Vue中使用原生DOM事件时，Vue会将事件对象传递给事件处理函数，可以直接访问事件对象的属性和方法。同时需要保持数据和DOM的一致性，遵循Vue的组件化和数据驱动的原则。

当在Vue应用中使用原生DOM事件时，发生了以下几点：

1.绑定事件处理程序：通过v-on或简写的@指令将原生DOM事件绑定到Vue实例的方法上。例如，可以通过@click绑定click事件，或通过@input绑定input事件。

2.事件冒泡和捕获：在原生DOM事件中，事件会沿着DOM树从父元素传播到子元素，这称为事件冒泡。Vue中的事件处理程序默认会在冒泡阶段触发，可以通过添加@click.stop来阻止冒泡。此外，Vue还提供了一种捕获模式，可以通过在事件名称前加上.capture来使用，例如@click.capture。

3.事件修饰符：Vue还提供了一些修饰符，用于修改事件的行为。常用的修饰符有.prevent（阻止默认行为）、.stop（阻止事件冒泡）、.once（事件只触发一次）、.self（只有事件发生在绑定元素本身才触发）等。通过在绑定事件后添加修饰符，可以改变事件的默认行为。

4.访问事件对象：在原生DOM事件中，可以通过event参数访问事件对象，其中包含了关于事件的相关信息，如事件类型、目标元素、鼠标位置等。在Vue中，可以通过在事件处理方法中添加一个参数来访问事件对象，例如@click="handleClick($event)"。

5.自定义事件：除了绑定原生DOM事件，Vue还支持自定义事件。可以通过$emit方法在组件内触发一个自定义事件，并通过$on方法在其他组件中监听该事件。这种机制使得组件之间可以进行灵活的通信。

综上所述，原生DOM事件在Vue中发生了上述几点，包括绑定事件处理程序、事件冒泡和捕获、事件修饰符、访问事件对象以及自定义事件等。这些机制使得开发者能够方便地处理和管理事件，并实现组件之间的通信。

原生 DOM 事件是指在浏览器中原生支持的事件，如点击、键盘按下、鼠标移动等。而 Vue 是一种 JavaScript 框架，它提供了一种用于构建用户界面的渐进式解决方案。

当在 Vue 中使用原生 DOM 事件时，Vue 会对这些事件进行一些封装和处理，以满足 Vue 的特定需求。

具体来说，当使用原生 DOM 事件时，Vue 将会进行以下操作：

1. 添加事件监听器：在组件的模板中，使用 @ 或 v-on 来绑定原生事件监听器。Vue 将会自动通过 addEventListener 方法向 DOM 元素添加事件监听器。

2. 事件修饰符：Vue 提供了一些修饰符，用于对事件进行处理。常见的修饰符包括 .stop（阻止事件冒泡）、.prevent（阻止默认事件）、.capture（添加事件捕获阶段监听器）等。

 <button @click.stop.prevent="handleClick">Click me</button>

3. 事件参数：在事件处理函数中，Vue 提供了事件参数对象，它包含了原生事件的所有属性和方法。可以通过在事件处理函数中使用 $event 来访问事件参数对象。

   <input type="text" @input="handleInput($event)">
   

4. 事件修饰符与按键修饰符的结合使用：可以使用事件修饰符和按键修饰符一起使用，以处理特定事件和按键的情况。

   <input type="text" @keyup.enter="handleSubmit">
   

总而言之，Vue 在处理原生 DOM 事件时提供了方便的语法糖和额外的功能，使得开发者能够更加高效地使用和管理事件。这样，我们既可以利用原生 DOM 事件的能力，又能够享受 Vue 框架带来的便利。