Vue 的官方是不建议直接操作 DOM 的，Vue 的用途在于视图和数据的绑定。如果通过JQuery 直接操作 DOM 的话，势必会造成视图数据和模型数据的不匹配，这样 Vue 就失去它存在的意义了。

JQuery 和 VueJS 合理使用并不会造成冲突，因为他们的侧重点不同，VueJS 侧重数据绑定和视图组件，JQuery 侧重异步请求和动画效果。如果使用JQuery + VueJS 开发，一定要在 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理，而使用 JQuery 时应避免直接操作 DOM ，但是应用动画是允许的。

JQuery 与 VueJS 相互配合可以非常高效的完成异步任务，首先通过 JQuery 发出 Ajax 请求，接受到服务端传递的 JSON 数据后，再通过 Vue 将数据绑定到组件上，最后由 JQuery 进行动画处理，整个过程就如行云流水般自然。

说句题外话，Vue 的目的不是取代 JQuery，它是为了解决前后端分离而出现的。如果没有数据变化，只是单纯的样式变化，则没有必要去大费周章进行视图模型的绑定，并且还不利于 SEO 优化。

引用:

https://www.imooc.com/wenda/detail/336993?t=216354

vue与js混用的更多相关文章

  1. vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined

    我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...

  2. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  3. 在线jquery.min.js、vue.min.js引用

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...

  4. vue.eslintrc.js常用配置

    vue.eslintrc.js module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/esse ...

  5. vue3.0 vue.config.js 配置实战

    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...

  6. vue cli3.3 以上版本配置vue.config.js

    // vue.config.js 配置说明//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions// 这里只 ...

  7. vue.config.js常用配置

    使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹. vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建 ...

  8. vue+hammer.js完美实现长按、左滑，右滑等触控事件

    移动端使用手指直接操作的方式大受用户欢迎,这其中就包括了单点.多点.长按.双击等方式. 这么多触控事件,如果开发者自己实现,会浪费大量的时间和精力,快来看看 hammer.js 让我们轻松了多少吧. ...

  9. vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法

     <div id="main" > <button id='but1' type="button" v-on:click="save ...

随机推荐

  1. Hive随机取某几行数据

    order by rand() limit 100 1. 可用于普通随机筛选 2. 也可用于row_number() 等函数的排序里作为随机排序.

  2. 转载：消息队列MQ

    本文大概围绕如下几点进行阐述: 为什么使用消息队列? 使用消息队列有什么缺点? 消息队列如何选型? 如何保证消息队列是高可用的? 如何保证消息不被重复消费? 如何保证消费的可靠性传输? 如何保证消息的 ...

  3. oracle出现sga导致ORA-00821 ORA-00093报错解决办法

    本问题在linux环境下,windows环境下类似. 问题描述: 在数据库操作时不小心修改了share_pool的大小,导致重启数据库无法正常启动,报错为: SQL>startup; ORA-: ...

  4. python目录结构

    import sys,os #__file__取得当前文件名,pycharm会自动加上完整路径 #os.path.dirname取得上一级目录 #os.path.abspath取得绝对路径 BASE_ ...

  5. 使用 nodeJs 开发微信公众号（上传图片）

    在给用户发送消息中涉及到的素材(图片.视频.音频.文章等)需要事先传到微信服务器,然后获得媒体id(media_id),然后把 media_id 传递给用户 上传分上传临时素材(只保存三天)和上传永久 ...

  6. samba实现CentOS和window上的数据同步

    前言 之前做了一个项目,需要写python脚本来修改组件的安装方式,脚本是在windows下面的pycharm下面进行编写,但是编译要在linux上面进行分模块的maven编译,虽然之前也写了pych ...

  7. autolayout原理

    Autolayout Engine根据视图间的约束关系得到一个线性方程组,求这个线性方程组的解即得到每个视图的位置信息.(x,y,width,height) 参考: https://www.jians ...

  8. Json、JavaBean、Map、XML之间的互转

    思路是JavaBean.Map.XML都可以用工具类很简单的转换为Json,进而实现互相转换 1.Map.XML与Json互转 mvn依赖 <dependency> <groupId ...

  9. Redis的Errorlog或者启动日志（错误日志）的配置

    Errorlog或者是运行日志是任何一个软件的运行中异常诊断必看的文件之一,折腾Redis的过程中以为有默认的错误日志(或启动日志),不过一直没有发现类似的日志文件,在看了默认的配置文件之后,发现Re ...

  10. MySQL Tips

    MySQL中的一些Tips,个人总结或者整理自网络 不明白为什么MySQL的很多材料中总是喜欢把联合(复合)索引和覆盖索引放在一块说事? 1,联合索引是一种索引的类型,指创建索引的时候包含了多个字段. ...