vue 实现$(id)
在 Vue 中实现类似 jQuery 的 $(id) 功能可以通过以下几种方式完成，无需直接操作 DOM，而是利用 Vue 的响应式特性或内置方法：
使用模板引用（ref）
通过 ref 属性在模板中标记元素，然后在组件实例中通过 this.$refs 访问。
<template>
<div ref="myElement">需要操作的元素</div>
</template>
<script>
export default {
mounted() {
const element = this.$refs.myElement;
console.log(element); // 获取对应的 DOM 元素
}
}
</script>使用 document.getElementById
虽然不推荐直接操作 DOM，但在某些场景下仍可通过原生方法实现。
mounted() {
const element = document.getElementById('myId');
console.log(element);
}结合 Vue 指令
通过自定义指令实现类似功能，增强封装性。
Vue.directive('jquery-selector', {
inserted(el) {
console.log(el); // 获取绑定的 DOM 元素
}
});注意事项
- 优先使用
ref而非直接 DOM 操作，以保持响应式特性。 - 避免在
created生命周期钩子中访问 DOM，此时元素尚未渲染。 - 对于动态生成的元素，确保在
updated或nextTick中处理。
以上方法可根据具体需求选择，推荐使用 ref 以符合 Vue 的设计模式。
