Vue3.0中如何引入jQuery并使用

简介: Vue3.0中如何引入jQuery并使用

在使用vue框架开发的时候 ,是非常的方便的,但是在工作中 ,还是会有遇到对接jq的部分的接口,这个时候就需要在vue的界面里面引入jQuery并使用了

1:在项目里面安装

npm install jquery --save

2:在项目里面找到.eslintrc.js文件打开并进行配置

我们在env中配置 jQuery:true

3.打开项目的根目录vue.config.js文件

4:在main.js文件中导入jquery

//引入jquery

import jquery from 'jquery'

5:使用案例

使用jquery写一个点击事件

test.vue

<template>
  <div class="test">
    <div class="click">点我</div>
  </div>
</template>
<script>
export default {
  name: "test",
  date() {
    return {};
  },
  mounted() {
    this.text();
  },
  methods: {
    text() {
      $(".click").click(function () {
        alert(1);
      });
    },
  },
};
</script>
<style >
</style>

点击按钮出现alert弹框

相关文章
|
4月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
28 0
|
4月前
|
JavaScript 前端开发 开发者
用 React/Vue 不如用 jQuery
用 React/Vue 不如用 jQuery
|
5月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
33 1
|
5月前
|
JavaScript 前端开发 开发者
vue和jQuery有什么区别
vue和jQuery有什么区别
80 0
|
5月前
|
JavaScript 前端开发 API
Vue、jquery和angular之间区别
Vue、jquery和angular之间区别
38 2
|
9月前
|
JavaScript 前端开发
Vue 和 jQuery 两者之间的区别是什么?
Vue 和 jQuery 两者之间的区别是什么?
54 0
|
9月前
|
移动开发 JavaScript 前端开发
vue和Jquery的区别
vue和Jquery的区别
|
12月前
|
JavaScript 前端开发 开发者
解决Vue项目中使用原生/jquery插件无法获取DOM的问题
解决Vue项目中使用原生/jquery插件无法获取DOM的问题记录。
228 1
|
12月前
|
XML 存储 监控
【前端架构】从 JQuery 到 React、Vue、Angular——前端框架的演变及其差异
【前端架构】从 JQuery 到 React、Vue、Angular——前端框架的演变及其差异
|
JavaScript 前端开发 Java
Java 后端学习路线;程序员是否一定要参与开源;为什么好多大网站用了 vue/react 还在用 jQuery |极客观点
Java 后端学习路线;程序员是否一定要参与开源;为什么好多大网站用了 vue/react 还在用 jQuery |极客观点
119 0