vue使用jquery
Vue 中使用 jQuery 的方法
在 Vue 项目中集成 jQuery 可以通过以下方式实现：
安装 jQuery
通过 npm 或 yarn 安装 jQuery：
npm install jquery
# 或
yarn add jquery全局引入 jQuery
在 Vue 项目的入口文件（如 main.js）中全局引入 jQuery：
import $ from 'jquery'
window.$ = window.jQuery = $在 Vue 组件中使用 jQuery
在单文件组件（.vue 文件）中直接使用 $：
export default {
mounted() {
$(this.$el).find('.example').css('color', 'red')
}
}通过 Vue 插件形式封装
创建一个 Vue 插件来封装 jQuery 的功能：
// jquery-plugin.js
import $ from 'jquery'
export default {
install(Vue) {
Vue.prototype.$jQuery = $
}
}
// main.js
import jQueryPlugin from './jquery-plugin'
Vue.use(jQueryPlugin)
// 组件中使用
this.$jQuery('.selector').hide()注意事项
- 避免直接操作 DOM，优先使用 Vue 的数据驱动方式
- jQuery 的 DOM 操作可能干扰 Vue 的虚拟 DOM 机制
- 大型项目建议逐步替换 jQuery 功能为 Vue 原生实现
替代方案
对于需要 DOM 操作的场景，可以考虑：
- 使用 Vue 的
ref属性 - 原生 JavaScript 方法
- 专门为 Vue 设计的库如
vue-dompurify
