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. Jmeter分布式部署- linux

    https://www.cnblogs.com/beginner-boy/p/7836276.html https://www.cnblogs.com/wuhenyan/p/6419368.html ...

  2. [SQL]删除约束

    来源:http://www.archonsystems.com/devblog/2012/05/25/how-to-drop-a-column-with-a-default-value-constra ...

  3. 'Settings' object has no attribute 'FYFQ_URL_test'

    读取django settings内容时报错: 'Settings' object has no attribute 'FYFQ_URL_test' 原因:settings中的变量,必须都是大写

  4. c++多态及实现原理

    https://www.cnblogs.com/cxq0017/p/6074247.html 通过虚函数实现,普通函数在编译过程中即确定了函数的地址,虚函数的函数地址是在程序运行的时候确定的,有虚函数 ...

  5. 批处理BAT运行不显示DOS窗口的方法

    新建记事本,写入下面内容 set ws=wscript.createobject("wscript.shell") ws.run "D:\scripts\svn-upda ...

  6. ExtJS4.2下将表单元素放在菜单时不能进行拷贝的问题解决办法

    通过浏览器F12我们发现,在菜单对应的dom元素上面,有几个系统附加的事件处理函数,只要我们将它去掉就可以了.示意代码如下: { xtype: "button", scope: z ...

  7. SQL 字段修改

    1.修改字段名: alter table 表名 rename column A to B 2.修改字段类型: alter table 表名 alter column 字段名 type not null ...

  8. 【练习】Python第一，二次

    练习一 1,执行Python脚本的两种方式 a,Python解释器 b,Python  1.py 2,简述位和字节的关系 一个字节等于8位 3,简述ascii,unicode,utf-8,gbk的关系 ...

  9. Oracel递归查询start with ...connect by prior在Mysql中的实现

    Oracle是一个强大的数据库,有很多的函数和语法可以带来很多便利,有些函数和语法在Mysql中有代替的,但是有些没有现成可用的方法,比如Oracle的递归,在Mysql中怎么实现呢? 例子: Ora ...

  10. SecureCRT连接开发板 串口传输、tftp传输

    1.串口传输 使用命令:rx  r是service, x是X-model模式 ①.rx 文件名 再按Enter键 ②.将需要传到板子上的文件 拖到SecureCRT里面,选择发送X-model选项 注 ...