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 的数据驱动方式更高效。