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与jQuery的比较
Kr.Chen的博客
03-13 787
vue跟jQuery的区别， vue是通过Vue对象把数据和View分离了，不需要操作DOM，只需要对数据进行操作。 jQuery是使用选择器对DOM对象进行操作，对DOM对象进行一些比如删除，添加，事件绑定等操作，跟Vue直接操作数据不一样，jQuery操作数据还是得操作相关的DOM对象。 这两者可以结合起来用，虽然有些时候不推荐，Vue侧重数据绑定，jQuery侧重样式操作，动画效果。 ...
在HTML中 vue和jquery混合使用，相互调数据
qq_34925033的博客
04-27 4408
1:创建VUE实例 <script type="text/javascript"> var vm = new Vue({ el:'#app', //实例化对象 data:{　　 newArry:[] //空数组 }, methods:{ //实例方法编辑区 } }) </script> jquery和vue之间互相调用(模拟接口拿到数据) &lt
VUE和jquery一起使用的问题讨论
qlin_11的博客
08-13 1778
背景 关于vue和jquery一起使用，我是因为新的公司团队里面用的是jquery，或者说是由后端的人使用jsp来写东西。现在需要我们把很老的项目重用vue来写一遍。这就是意味着有很多jquery来操作DOM，而且VUE里面的代码要求抽到js里面，通过import和export来调用js里面的方法。不准放在methods里面。这就是让动态数据进不去组件里面，只能进一个初始状态（import的不足）...
【前端Vue3】——JQuery知识点总结（超详细）
最新发布
shsjssnn的博客
06-04 6694
总之，jQuery作为一个广泛使用的JavaScript库，它极大地简化了开发者的工作流程，允许以更少的代码完成更多的工作。通过提供丰富的选择器、便捷的事件处理方法、流畅的动画效果以及简化的Ajax交互等，jQuery帮助开发者高效地构建互动性强、兼容性好的网页应用。
如何解决vue与传统jquery插件冲突
10-20
本篇文章主要介绍了如何解决vue与传统jquery插件冲突，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue和jquery混用注意事项
qq_34514388的博客
06-08 8517
拿起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.js是否可以取代jquery
weixin_41786712的博客
02-16 5255
原创地址：添加链接描述 1.在vuejs中是否还需要jquery         如果你作为前端有一段时间的话一定会很熟悉jquery，作为前端的开发神器我们无法想象没有jquery将会写多少繁琐的原生js。在angularjs,react,vue当道的年代里，或许你不在需要jquery了。&n
vue和jQuery混合着用
极客神殿
09-18 2562
效果功能描述： 1，一堆数据，渲染成列表； 2，每个子项有一个操作； 3，点每个子项的操作显示一个弹窗; 4, 弹窗有一个提交按钮，提交修改后的数据； 5，列表中对应的子项需实时变化； 页面 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>vue和j...
Vue3中如何使用jQuery配合使用
m0_61973028的博客
10-28 4708
步骤二：在 vue.fonfig.js中配置jQuery 步骤三：在package中配置jQuery 步骤四：在min.js中映入jQuery 完成上述步骤之后，就可以在组件内正常使用jQuery了
Vue中正确使用jQuery的方法
11-27
在Vue.js应用中使用jQuery可能并不总是最佳实践，因为Vue.js提供了一套强大的响应式数据绑定和组件化机制，这与jQuery的直接DOM操作方式有所不同。然而，有时出于历史原因或者特定需求，开发者可能需要在Vue项目中...
Vue CLI3.0中使用jQuery和Bootstrap的方法
10-17
主要介绍了Vue CLI3.0中使用jQuery和Bootstrap的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
详解jquery和vue对比
10-17
主要介绍了jquery和vue对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
集成vue到jquery/bootstrap项目的方法
11-27
当Vue和jQuery一起使用时，需要注意避免两者之间的冲突。通常，Vue会接管DOM操作，但你仍然可以在Vue实例外使用jQuery，或者通过`Vue.$`访问jQuery。不过，推荐尽量使用Vue提供的功能，以充分发挥其响应式系统的...
为什么越来越多的人使用vue开发，不用jq了
yuxinaibiancheng的博客
08-23 5444
很多使用惯了jq的朋友们，不喜欢使用vue去开发，因为两种开发差距很多。 我曾经使用jq开发了十几年，我是这两年才开始使用vue和react进行开发的，使用了之后，简直是太爽了，用了vue之后，就不想再使用jq了。 因为是因为它的模块化开发能力，以前使用jq开发，代码写的很臃肿，假如增删查改都写在一个页面上，代码会很臃肿，假如写在不同的页面，那么要写很多页面，而且还涉及到页面之间参数的传参这些，而使用了vue之后，就完全没有这个问题了。vue的父子组件之间都是无刷新更新的，不会涉及子页面返回父页面还要将
关于vue和jquery混着使用的情况，我真是踩了大坑
weixin_44246413的博客
08-10 2452
本身我对vue不是太熟悉，也就是使用过几次。但是对jquery更是没使用过，因为觉得它没有vue方便。但是我并不知道vue和jquery的关系。只是知道vue相当于在jquery的基础上又做了一层的封装而已。但是最近一次的使用中，莫名的踩了大坑。该项目中大多数采用的是jquery并且是各种的jsp。而我却没有在意。使用的vue，并且没有将页面拆分，而是加了个弹窗。我需要在这个弹窗中加个附件上传的功能，由于该项目中已经存在附件上传的jsp。已经写好了。我只需要引入进来就可以的。这时候问题就出现了。vue的弹窗
vue3.x项目中使用jquery（最简单的方式）
卫可冬的博客
09-09 6717
因为最近的项目需求，要把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.js一起使用
小焊猪 - web前端
07-03 8524
1、下载并引入jquery框架下载可以去官网进行下载，我这里使用的版本是3.1.1，下载好后在需要的页面引入就可以了。当然你还有很多其它的方法引入jquery，只要可以顺利引入就可以了。1&lt;script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;试着作一个案例，在DOM被挂载...
Vue.js - Vue 项目引入 JQuery 框架
牧码的博客
10-19 1374
既然写项目，那么少不了用 JQ，那我们就引入进来吧~ 1、因为已经安装了 Vue 脚手架，所以需要在 Webpack 中全局引入 JQuery 打开 package.json 文件，在里面加入这行代码，jquery 后面的是版本，根据你自己需求更改。 dependencies:{ 　　"jquery":"^2.2.1" } 2、然后在命令行中 cnpm install......
jquery和vue能一起使用吗
06-12
可以同时使用jQuery和Vue，但是需要注意一些问题。由于jQuery和Vue都有可能使用"$"符号，可能会发生命名冲突的问题，因此需要在引入jQuery之后，使用`jQuery.noConflict()`方法将"$"符号交还给jQuery，避免与Vue发生冲突。例如： ```html <!-- 引入 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> // 将"$"符号交还给 jQuery $.noConflict(); </script> <!-- 引入 Vue --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> ``` 在上面的例子中，我们先引入了jQuery，并使用`$.noConflict()`方法将"$"符号交还给jQuery。然后再引入Vue，这样就可以避免jQuery和Vue之间的命名冲突问题。 另外，由于Vue已经提供了很多jQuery的功能，因此在使用Vue时，可以尽量避免使用jQuery，以免增加代码的复杂度和维护难度。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值