vue 实现$(id)
在 Vue 中实现类似 jQuery 的 $(id) 功能，可以通过以下几种方式完成：
使用 document.getElementById
直接调用原生 DOM API 获取元素，适用于简单场景：
const element = document.getElementById('yourId');使用 Vue 的 ref 属性
Vue 推荐使用 ref 来获取 DOM 元素或组件实例，避免直接操作 DOM：
<template>
<div ref="myElement">Hello Vue</div>
</template>
<script>
export default {
mounted() {
const element = this.$refs.myElement;
console.log(element); // 获取到 DOM 元素
}
};
</script>封装为全局方法
如果需要全局使用类似 $(id) 的功能，可以在 Vue 原型上添加方法：
// main.js 或入口文件
Vue.prototype.$ = function(id) {
return document.getElementById(id);
};
// 组件中使用
this.$('yourId');使用第三方库
如果需要更复杂的选择器功能，可以集成 querySelector 或第三方库（如 cash-dom）：
// 安装 cash-dom
npm install cash-dom
// 封装为全局方法
import $ from 'cash-dom';
Vue.prototype.$ = $;
// 组件中使用
this.$('#yourId');注意事项
- Vue 推荐优先使用
ref而非直接操作 DOM，以保持数据驱动的特性。 - 全局方法需谨慎使用，避免污染原型或命名冲突。
- 如果项目已依赖 jQuery，可通过
window.$直接调用，但不推荐混合使用。
