vue +jquery 配置及问题

vue项目同时使用jquery

步骤一:首先安装jquery
    $npm install jquery --save
步骤二:在vue.config.js中添加代码
image.png
步骤三:在main.js中引用$
  $import $ from 'jquery'

此时会有问题编译时报 is not defined,没使用一个,就会有这样一个错误,这个是因为在VS Code编写Vue代码时使用ESLint编译js,$不符合eslint检测的环境导致的,所以我们需要进行一下环境配置。

步骤四:
方式1.修改ESLint的检查环境,增加jquery即可
image.png
方式2.设ESLint规则,忽略指定错误,例如no-console可见上图

问题1:同时使用vue 和 jquery, jquery事件绑定失效

原因是:

vue会重新渲染dom,加上是异步实例vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素.

解决办法:

先加载vue.js,让页面渲染完成后加载jq,给jq绑定ready事件

<script type="text/javascript">
$(document).ready(function(){

    // jq事件
});
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,973评论 1 4
  • javascript功能插件大集合,写前端的亲们记得收藏 包管理器管理着 javascript 库,并提供读取和打...
    狗狗嗖阅读 813评论 0 1
  • 如何清除浮动,有哪几种方法,区别是什么 1、移动端你遇到过什么兼容问题? 1、如果在input设置边框颜色在ios...
    崽崽不哭阅读 796评论 0 1
  • 1、移动端你遇到过什么兼容问题? 1、如果在input设置边框颜色在ios系统里会出现兼容性问题,需要在外面加一个...
    青青菜鸟阅读 4,431评论 0 28
  • 1、移动端你遇到过什么兼容问题?1、如果在input设置边框颜色在ios系统里会出现兼容性问题,需要在外面加一个d...
    阿帕奇哟阅读 827评论 0 8