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. 71.纯 CSS 创作一个跳 8 字型舞的 loader

    原文地址:https://segmentfault.com/a/1190000015534639#articleHeader0 感想:rotateX() 和rotateZ()一起使用好懵呀. HTML ...

  2. CentOS安装Python模块cx_Oracle

    在线安装 $ wget https://bootstrap.pypa.io/get-pip.py$ python get-pip.py$ pip -V #查看pip版本 或者将网页中的代码复制到get ...

  3. 这就涉及到ABAQUS历史输出中各能量变量的意义

    ABAQUS中,对于很多动态问题,尤其像高速冲击模拟中,对结果评价很重要的一点就是要保证模型能量守恒,这就涉及到ABAQUS历史输出中各能量变量的意义,下面最各简单整理: ALLAE:人工伪应变能,六 ...

  4. DEPLOY YOUR WEBSITE TO GITHUB PAGES

    DEPLOY YOUR WEBSITE TO GITHUB PAGES Review Fantastic! You now have your site published on the public ...

  5. Golang源码探索(三) GC的实现原理（转）

    Golang从1.5开始引入了三色GC, 经过多次改进, 当前的1.9版本的GC停顿时间已经可以做到极短.停顿时间的减少意味着"最大响应时间"的缩短, 这也让go更适合编写网络服务 ...

  6. 二、http request：消息结构

    1.request结构分为三部分: 抽象的东西,难以理解,老感觉是虚的, 所谓眼见为实, 实际见到的东西,我们才能理解和记忆,下面我们用fiddler打开一个博客园的地址,在Inspectors ta ...

  7. vue项目tips

    在main.js引入了封装好的各组件,包括echarts.自定义组件等

  8. 我的vimrc设置

    vim一个文件 :e version :editor version 查看.vimrc所在的系统和用户文件 vim ~/.vimrc " 行号 set number " 语法高亮( ...

  9. Spring再接触 生命周期

    Userservice.java package com.bjsxt.service; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.Use ...

  10. Linux 基本使用

    1.mkdir 创建文件夹 mkdir filename; 2.touch 创建文件 touch file.txt; 3.chmod 变更文件或目录的权限 chmod -R u+x ./;