vue中native的用法

在Vue中使用原生的JavaScript代码，可以通过以下几种方式：

1. 在Vue组件中使用$refs属性获取DOM元素，并直接使用原生JavaScript API进行操作：

<template>
  <div>
    <button ref="myButton">Click Me!</button>
  </div>
</template>

<script>
export default {
  mounted() {
    const button = this.$refs.myButton
    button.addEventListener('click', () => {
      alert('Button clicked!')
    })
  }
}
</script>

2. 在Vue组件中使用render函数，直接使用原生JavaScript API进行DOM操作：

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    const div = this.$refs.myDiv
    const p = document.createElement('p')
    p.textContent = 'Hello, world!'
    div.appendChild(p)
  },
  render(h) {
    return h('div', { ref: 'myDiv' })
  }
}
</script>

3. 在Vue组件中使用插件或第三方库，如使用jQuery等库进行DOM操作：

<template>
  <div>
    <button ref="myButton">Click Me!</button>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  mounted() {
    const button = this.$refs.myButton
    $(button).on('click', () => {
      alert('Button clicked!')
    })
  }
}
</script>

需要注意的是，在Vue中使用原生JavaScript进行DOM操作时，需要确保这些操作不会影响Vue的响应式系统，否则可能会导致一些意想不到的问题。