vue 实现$(id)
在 Vue 中实现类似 jQuery 的 $(id) 功能，可以通过以下几种方式完成：
使用模板引用（ref）
Vue 提供了 ref 属性来直接访问 DOM 元素或组件实例。这是最推荐的方式，符合 Vue 的设计理念。
<template>
<div ref="myElement">Hello World</div>
</template>
<script>
export default {
mounted() {
const element = this.$refs.myElement
console.log(element) // 获取到 DOM 元素
element.style.color = 'red'
}
}
</script>使用 document.getElementById
虽然不推荐，但在某些情况下可以直接使用原生 DOM API：
<template>
<div id="myElement">Hello World</div>
</template>
<script>
export default {
mounted() {
const element = document.getElementById('myElement')
console.log(element)
element.style.color = 'blue'
}
}
</script>创建全局方法
如果需要在整个应用中像 jQuery 那样使用 $，可以创建一个全局方法：
// main.js
import Vue from 'vue'
Vue.prototype.$ = function(id) {
return document.getElementById(id)
}
// 组件中使用
this.$('myElement').style.color = 'green'注意事项
- 模板引用（ref）是 Vue 推荐的方式，因为它与 Vue 的响应式系统更好地集成
- 直接操作 DOM 可能会与 Vue 的虚拟 DOM 产生冲突，应谨慎使用
- 在组件销毁时，应清理任何 DOM 操作或事件监听，避免内存泄漏
选择哪种方式取决于具体需求，但在 Vue 生态中，优先考虑使用 ref 而不是直接操作 DOM。
