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. Spring boot 自定义拦截器

    1.新建一个类实现HandlerInterceptor接口,重写接口的方法 package com.zpark.interceptor; import com.zpark.tools.Constant ...

  2. !!常用HTML5代码

    HTML5提供的新特性 2016-2-16 Web Socket 定义了一套API, 允许网页能够使用Web Socket协议来和远程主机进行双工通信. Web Storage 定义了一套API, 能 ...

  3. 初次安装Ubuntu后的若干配置步骤

    第一步,安装VMware-tools 按照如下提示安装 首先将压缩包,复制到/home 目录下,将其解压,执行./vmware-install.pl即可 第二步,配置使linux能上网 首先将ubun ...

  4. python源码探秘：用户函数的执行过程

    脚本函数编译后如何执行?脚本编译后是pyc码,pycodeobject对象的串行化.import时是对pyc文件反系列化.函数编译后会生成函数对象,函数对象的TP_call对应的是function_c ...

  5. idea搭建ssm框架

    1.file-->new-->project-->maven.... 2.建立后的目录: 3.pom.xml依赖建立: <?xml version="1.0" ...

  6. Linux 内核的 Makefile

    Linux内核的配置系统的基本结构 Linux内核的配置系统由三个部分组成,分别是: 1.Makefile:分布在 Linux 内核源代码根目录及各层目录中,定义 Linux 内核的编译规则: 2.配 ...

  7. 通过crt修改数据库中的存储过程

    mysql -u idc_user -pidc_user123 通过crt修改数据库中的存储过程PRO_RET_HD_TZXW STEP1:在crt中查看数据库中的存储过程PRO_RET_HD_TZX ...

  8. ubuntu环境下安装docker遇到的坑

    ubuntu安装docker的前提条件是: 1. Linux 的内核版本在 3.10 或以上: 2. linux 内核要开启 cgroup 和 namespace 功能 可以执行命令:uname –a ...

  9. Calico搭建配置

    Calico 是一个纯三层的协议,为 OpenStack 虚机和 Docker 容器提供多主机间通信.Calico 不使用重叠网络比如 flannel 和 libnetwork 重叠网络驱动, Cal ...

  10. 【题解】洛谷 P1014 【Cantor表】

    1. 我们先引入三角形数的概念: >定数目的点或圆在等距离的排列下可以形成一个等边三角形,这样的数被称为三角形数. >古希腊著名科学家毕达哥拉斯把数1,3,6,10,15,21……这些数量 ...