从jquery到vue或者说是到mvvm的转变是一个思想的转变,是将原有的直接操作dom的思想转变到操作数据上去

vue和jquey对比

  • jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。比如需要获取label标签的内容:$("lable").val();,它还是依赖DOM元素的值。
  • Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

  vue适用的场景:复杂数据操作的后台页面,表单填写页面

  jquery适用的场景:比如说一些html5的动画页面,一些需要js来操作页面样式的页面

  然而二者也是可以结合起来一起使用的,vue侧重数据绑定,jquery侧重样式操作,动画效果等,则会更加高效率的完成业务需求

vue和jQuery的区别的更多相关文章

  1. angular和vue还有jquery的区别

    angularjs简单介绍和特点 首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每 ...

  2. 浅析angular,react,vue.js jQuery使用区别

    前端越来越混乱了,当然也可以美其名曰:繁荣.当新启动一个前端项目,第一件事就是纠结:使用什么框架,重造什么轮子? PS:大牛留言讨论那么,希望看完此篇,能够给你一个清晰的认识,或者让你更加地纠结和无所 ...

  3. jQuery方法区别:click() bind() live() delegate()区别

    今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...

  4. vue和jQuery嵌套实现异步ajax通信

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  5. vue引入jQuery、bootstrap

    vue引入jQuery.bootstrap 1.使用vue-cli构建的vue项目 2.npm安装jquery.bootstrap npm install jquery 3.修改build/webpa ...

  6. jQuery (js 和 jQuery 的区别)

    js 和 jQuery 的区别  主要体现在Dom操作 (jq代表我找到的元素对象)找元素:    js:document.get...    jquery: $(选择器)设定:jq 是jquery对 ...

  7. JS和jQuery用法区别

    目录 JS和jQuery用法区别 外观区别 查找元素 操作标签 操作内容 操作属性 操作位置 操作样式 事件 JS和jQuery用法区别 外观区别 jQuery与JS最直观的区别就是外观上jQuery ...

  8. 什么是AngularJs?特点是什么?和JQuery什么区别和联系

    什么是AngularJs? AngularJs是js框架,集中操作数据,不关注Dom操作,适用于以数据操作为主的的SPA(单页应用). 它的特点 采用MVC模型 双向数据绑定 依赖注入 模块化 与jQ ...

  9. vue 和 jquery混合使用

    有时候只要想到要用的 vue.js 的时候就会惯性的想起用vue-cli手脚架搭建一个项目,但是有时候的业务场景并不适合用vue-cli手脚架,这个时候使用vue+jquery混合使用,把他们的优点结 ...

随机推荐

  1. elasticsearch must和should组合查询

    {"query": { "bool": { "should": [ {"bool": { "must" ...

  2. 如何提高web页面的性能

    1.浏览器渲染原理解析 想要提高网页的性能,首要的便是要理解浏览器渲染原理,下面关于浏览器的原理解析,我们以chrome内核webkit为例,其他内核的浏览器原理也基本大同小异,可触类旁通. 如上图所 ...

  3. sax解析xml文件,封装到对象中

    创建User.java类 public class User { private String id; private String name; private String age; private ...

  4. Unity牛逼的2D纹理功能

    [Unity牛逼的2D纹理功能] 1.可直接将贴图生成成为Cubemap. 2.自动生成Mipmap. 3.查看纹理被当前场景哪些对象引用.在Project窗口中,右击图像,选择 参考:file:// ...

  5. Scala基础:数组(Array)、映射(Map)、元组(Tuple)、集合(List)

    数组 package com.zy.scala object ArrayDemo { def main(args: Array[String]): Unit = { //定长数组 val arr1 = ...

  6. C语言中static修饰符的意义

    在C语言中,static通常有2种含义:1)定义变量的生命周期:2)定义变量或者函数的作用域. 变量的生命周期是指,相对于程序运行的进程生命周期,变量存在的时间段.变量的生命周期由变量的存储类型(位置 ...

  7. spring4-3-AOP-AspectJ注解-01-简单使用

    1.引入类库 <dependency> <groupId>org.springframework</groupId> <artifactId>sprin ...

  8. nginx相关教程

    1.nginx简易的教程 http://www.cnblogs.com/jingmoxukong/p/5945200.html#%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3 ...

  9. Django中的元类-乾颐堂

    看Django(1.6)的Form相关源代码时比较迷惑,于是节选了django.forms.forms.py中的几个代码片段来分析Django中是怎么使用元类的: 1 2 3 4 5 6 7 8 9 ...

  10. [SoapUI] 按照 Test Step Type 获取所有满足条件的 Test Step

    获取当前测试用例下所有Groovy Script类型的测试步骤 def testStepList = testRunner.testCase.getTestStepsOfType(com.eviwar ...