vue2的dom原生事件写法

在 Vue2 中，可以使用 `v-on` 或 `@` 符号来绑定 DOM 原生事件。

例如，绑定点击事件可以这样写：

<button v-on:click="handleClick">点击我</button>

或者使用缩写：

<button @click="handleClick">点击我</button>

其中，`handleClick` 是一个在 Vue 实例中定义的方法，用来处理点击事件。

你也可以传递参数给方法：

<button @click="handleClick('参数')">点击我</button>

在方法中可以接收这个参数：

methods: {
  handleClick(param) {
    console.log(param);
  }
}

这样就可以输出 `'参数'`。

相关问题

document.querySelector是VUE写法吗

document.querySelector并不是Vue的写法，它是JavaScript原生的DOM操作方法，用于从HTML文档中获取元素。Vue是一种JavaScript框架，它提供了一种声明式的模板语法，用于将数据渲染为DOM。在Vue中，可以使用ref属性或者$refs对象来获取DOM元素。所以，虽然document.querySelector可以在Vue项目中使用，但它并不是Vue的专属写法。

vue2与vue3区别

Vue2与Vue3的区别主要体现在以下几个方面：

1. TypeScript支持：Vue3相对于Vue2有更好的TypeScript支持。Vue2的Options API是一个简单的对象，而TypeScript是一种类型系统，面向对象的语法，两者不太匹配。因此，Vue2需要借助vue-class-component来增强原生组件，并且需要vue-property-decorator来增加更多与Vue特性结合的装饰器，写法相对繁琐。而Vue3由TypeScript重写，对TypeScript的支持更加友好。

2. Composition API：Vue3引入了Composition API，与Vue2的Options API相比，Composition API提供了更灵活、更可组合的方式来组织和重用代码。Composition API将组件的逻辑按照功能进行组织，而不是按照选项进行组织，使得代码更加清晰、易于维护。

3. 虚拟DOM优化：Vue3在虚拟DOM上增加了patchFlag字段，用于标记组件的更新类型，从而提高渲染性能。通过patchFlag的标记，Vue3可以更精确地知道哪些组件需要更新，避免不必要的DOM操作，提高了性能。

下面是一个示例，展示了Vue2和Vue3的区别：

<!-- Vue2 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue2',
      message: 'Hello Vue2!'
    }
  }
}
</script>

<!-- Vue3 -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const data = reactive({
      title: 'Vue3',
      message: 'Hello Vue3!'
    })

    return {
      ...data
    }
  }
}
</script>