vue和jQuery一起使用

最新推荐文章于 2024-06-04 13:02:21 发布
最新推荐文章于 2024-06-04 13:02:21 发布
阅读量2.8w 收藏 26
点赞数 11
分类专栏： VUE 文章标签： vue jQuery vue实例中使用jQuery jQuery操作vue渲染的DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39692256/article/details/82835096
版权

vue使用了虚拟DOM，它的功能就是不需要开发者直接做dom操作，所以不建议使用vue同时还使用jQuery。

然后说正题，当vue组件被创建时，它会把组件渲染到页面中，而jQuery通过绑定DOM才能进行操作

jQuery代码在Mounted周期内进行，此时vue已经渲染完毕，jQuery才可以找到对应的DOM

如果需要JQuery更新DOM，则在Mounted周期内不被允许，需要通过Updated进行操作

----------------------------------------------------------------------------------------------------------

附上vue生命周期讲解：

vue生命周期
vue生命周期

 

收手吧阿zu
关注
  • 11
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
为什么越来越多的人使用vue开发，不用jq了
yuxinaibiancheng的博客
08-23 5421
很多使用惯了jq的朋友们，不喜欢使用vue去开发，因为两种开发差距很多。 我曾经使用jq开发了十几年，我是这两年才开始使用vue和react进行开发的，使用了之后，简直是太爽了，用了vue之后，就不想再使用jq了。 因为是因为它的模块化开发能力，以前使用jq开发，代码写的很臃肿，假如增删查改都写在一个页面上，代码会很臃肿，假如写在不同的页面，那么要写很多页面，而且还涉及到页面之间参数的传参这些，而使用了vue之后，就完全没有这个问题了。vue的父子组件之间都是无刷新更新的，不会涉及子页面返回父页面还要将
Vue CLI3.0中使用jQuery和Bootstrap的方法
10-17
主要介绍了Vue CLI3.0中使用jQuery和Bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
在 vue 中使用 jquery 方法
sywdebug的博客
05-31 6608
在 vue.config.js 中配置。使用以下命令安装 jquery。在需要使用的页面中引入即可使用。
在HTML中 vue和jquery混合使用，相互调数据
qq_34925033的博客
04-27 4386
1:创建VUE实例 <script type="text/javascript"> var vm = new Vue({ el:'#app', //实例化对象 data:{　　 newArry:[] //空数组 }, methods:{ //实例方法编辑区 } }) </script> jquery和vue之间互相调用(模拟接口拿到数据) &lt
【前端Vue3】——JQuery知识点总结（超详细）
最新发布
shsjssnn的博客
06-04 5686
总之，jQuery作为一个广泛使用的JavaScript库，它极大地简化了开发者的工作流程，允许以更少的代码完成更多的工作。通过提供丰富的选择器、便捷的事件处理方法、流畅的动画效果以及简化的Ajax交互等，jQuery帮助开发者高效地构建互动性强、兼容性好的网页应用。
使用vue.js + jQuery开发组件
左直拳的马桶_日用桶
01-22 2134
本模式有3个要点： 1）利用vue.js实现html封装进组件，让复用可以落地； 2）jquery负责操作dom； 3）js函数模拟面向对象中的类，运行时通过new方式创建对象，将dom标识符和业务数据作为参数传递，提高组件独立性，实现与调用页面解耦，且能够动态渲染。 近期做的一个项目，使用的框架十分古怪。spring boot，但没有使用默认的thymeleaf，而是前后端分离，同时前后端代码却又放在同一个项目工程里。前端使用了vue.js，但与我之前接触到的vue项目很不一样。一般vue项目，除了一个首
VUE和jquery一起使用的问题讨论
qlin_11的博客
08-13 1771
背景 关于vue和jquery一起使用，我是因为新的公司团队里面用的是jquery，或者说是由后端的人使用jsp来写东西。现在需要我们把很老的项目重用vue来写一遍。这就是意味着有很多jquery来操作DOM，而且VUE里面的代码要求抽到js里面，通过import和export来调用js里面的方法。不准放在methods里面。这就是让动态数据进不去组件里面，只能进一个初始状态（import的不足）...
vue和jquery混用注意事项
qq_34514388的博客
06-08 8468
拿起html的时候，在数据处理上，疯狂怀念数据双向绑定，vue又成了我的必选项，但是有些业务场景其实并不适用vue，所以最终技术选型为vue+jquery混合使用，结合两边的优点，大大提高开发效率。 vue和jquery同时引入的时候，jquery操作一定要放在vue后面，要等DOM渲染完成，jquery才能进行DOM事件操作。 那么vue+jquery应该如何使用呢？ 一、首先引入vue文件（cdn或者下载到本地都行），参考vue官方连接 https://cn.vuejs.org/v2/guide/ins
vue和jQuery混合着用
极客神殿
09-18 2551
效果功能描述： 1，一堆数据，渲染成列表； 2，每个子项有一个操作； 3，点每个子项的操作显示一个弹窗; 4, 弹窗有一个提交按钮，提交修改后的数据； 5，列表中对应的子项需实时变化； 页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>vue和j...
Vue3中如何使用jQuery配合使用
m0_61973028的博客
10-28 4690
步骤二：在 vue.fonfig.js中配置jQuery 步骤三：在package中配置jQuery 步骤四：在min.js中映入jQuery 完成上述步骤之后，就可以在组件内正常使用jQuery了
vue3.x项目中使用jquery（最简单的方式）
卫可冬的博客
09-09 6537
因为最近的项目需求，要把vue从2.x升级到3.x。项目中用到了jquery，网上搜索出来的使用方法都是vue2.x的方式：修改webpack.base.conf.js文件，或者修改vue.config.js。然而vue3.x的版本中根本就没有这两个文件。这种方式已经不再适用了。没必要再去新建一个文件。 具体的引入方式如下： 安装jquery npm install jquery -S 在项目的main.js中声明 const $ = require('jquery'); window.$ = $
Vue中正确使用jQuery的方法
11-27
题主Vue小白，入门demo时想在其中使用jQuery（当然可能是不推荐的做法哈，毕竟俩儿的风格不一样，但万一你就需要呢 _^ ^_），结果遇到问题，最终倒腾解决。 编译报错：$ is undefined or no-undef ‘$’ is not ...
如何解决vue与传统jquery插件冲突
10-20
本篇文章主要介绍了如何解决vue与传统jquery插件冲突，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解jquery和vue对比
10-17
主要介绍了jquery和vue对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue单页应用中如何使用jquery的方法示例
12-02
本文给大家介绍的是关于在vue单页应用中使用jquery的相关内容，主要记录一个今天用到的vue-cli建立的应用中引入jquery的方式。下面话不多说，来一起看看详细的介绍吧。 方法如下： 1.首选通过npm安装jquery npm ...
集成vue到jquery/bootstrap项目的方法
10-18
下面小编就为大家分享一篇集成vue到jquery/bootstrap项目的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于vue和jquery混着使用的情况，我真是踩了大坑
weixin_44246413的博客
08-10 2446
本身我对vue不是太熟悉，也就是使用过几次。但是对jquery更是没使用过，因为觉得它没有vue方便。但是我并不知道vue和jquery的关系。只是知道vue相当于在jquery的基础上又做了一层的封装而已。但是最近一次的使用中，莫名的踩了大坑。该项目中大多数采用的是jquery并且是各种的jsp。而我却没有在意。使用的vue，并且没有将页面拆分，而是加了个弹窗。我需要在这个弹窗中加个附件上传的功能，由于该项目中已经存在附件上传的jsp。已经写好了。我只需要引入进来就可以的。这时候问题就出现了。vue的弹窗
记录Vue和Jquery混合开发中关于点击事件的一个bug
weixin_33816300的博客
01-04 1048
最近比较急的接手了公司的微信服务号项目，采用的技术栈主要是jq和vue。在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用，只能写在vue实例中的methods中，然后用@click去监测。 一直困惑的是这个BUG在不同的页面中有时有，有时没有，而且出现的情况很少。今天工作闲了一点，于是乎专心去琢磨这个问题。 网上百度到的解决方案是这样的，如下图...
Vue3.0中如何引入jQuery并使用
热门推荐
qq_45904018的博客
09-19 1万+
vue3中使用jquery与配置
jquery和vue能一起使用吗
06-12
由于jQuery和Vue都有可能使用"$"符号，可能会发生命名冲突的问题，因此需要在引入jQuery之后，使用`jQuery.noConflict()`方法将"$"符号交还给jQuery，避免与Vue发生冲突。例如： ```html <!-- 引入 jQuery --> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值