vue 实现$(id)
在 Vue 中实现类似 jQuery 的 $(id) 功能，可以通过以下几种方式操作 DOM 元素：
使用 ref 属性
Vue 推荐使用 ref 属性来直接访问 DOM 元素或组件实例。在模板中为元素添加 ref 属性，通过 this.$refs 访问。
<template>
<div ref="myElement">Hello Vue</div>
</template>
<script>
export default {
mounted() {
const element = this.$refs.myElement;
console.log(element); // 输出 DOM 元素
}
};
</script>使用原生 document.getElementById
如果需要直接通过 ID 获取元素，可以使用原生 JavaScript 方法。
<template>
<div id="myElement">Hello Vue</div>
</template>
<script>
export default {
mounted() {
const element = document.getElementById('myElement');
console.log(element); // 输出 DOM 元素
}
};
</script>封装为全局方法
若需全局使用类似 $(id) 的功能，可在 Vue 原型上挂载方法。
// main.js
import Vue from 'vue';
Vue.prototype.$ = function(id) {
return document.getElementById(id);
};
// 组件中使用
this.$('myElement');使用第三方库
若项目中已引入 jQuery，可直接在 Vue 中混合使用，但不推荐。
<template>
<div id="myElement">Hello Vue</div>
</template>
<script>
export default {
mounted() {
const element = $('#myElement');
console.log(element); // jQuery 对象
}
};
</script>注意事项
- 优先使用 Vue 的
ref机制，避免直接操作 DOM。 - 在
mounted生命周期钩子中确保 DOM 已渲染完成。 - 避免过度依赖 jQuery，Vue 的数据驱动方式更高效。
