<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <input type="text" name="" id="txt-title"/>
    <button id="btn-submit">submit</button>
  </div>
  <div>
    <ul id="ul-list"></ul>
  </div>   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script>
    var $txtTitle = $('#txt-title');
    var $ulList = $('#ul-list');
    var $btnSubmit = $('#btn-submit');     $btnSubmit.click(function(){
      var title = $txtTitle.val();
      var $li = $('<li>'+ title +'</li>')
      $ulList.append($li);
      $txtTitle.val('');
    })
  </script>
</body>
</html>

这是jquery实现一个todolist的过程,通过点击事件,初始化一个新的li标签,append进去的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input v-model='title'/>
    <button v-on:click='add'>submit</button>
    <ul v-for='item in list'>
      {{item}}
    </ul>
  </div>   <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script>
    var data = {
      title: '',
      list: []
    }
    var vm = new Vue({
      el: '#app',
      data: data,
      methods: {
        add: function(){
          this.list.push(this.title);
          this.title = ''
        }
      }
    })
  </script>
</body>
</html>

这是vue实现todolist的过程。不管里面的变量还是函数都跟vue对象里面有对应关系。在点击按钮的时候只需要操作里面的数据就行了。

两者的区别:
1、数据和视图的分离
所谓视图就是dom,jquery的视图在html里面,也有在js里面,上面的例子比如li。他把视图和数据混在一块了,所以jquery,数据和视图没有分离。混在一块的坏处1,不符合开放封闭原则,对扩展开放,对修改封闭。所有这种混在一块的,都违背了扩展封闭原则。
vue中找数据和dom非常方便,数据是哪块,dom是哪块。数据和视图是分离的,数据就是data,vue中的列表不是空壳是有内容的。
2、以数据驱动视图
意思是我只改数据,jquery就违背了这点,li标签是生生append到list中。这种清空value是直接以底层到api来操作的。所以jquery中以数据驱动视图是完全没有的,不存在的。以数据驱动视图是通过数据的修改,由框架自动的把视图改了,我们不用管dom元素是怎么样的。jquery是干预了视图的修改。
vue中以数据驱动视图更明显了,在点击按钮的时候,只是把数据push到list,没有操作dom,只是关心数据到变化,数据到清空也是只关心数据到变化。
这种是不是更符合我们到开发模式,我们希望把数据模型改了就好,不需要管dom,dom的渲染其实跟业务流程关系不大。我们只需要关心数据的变化。数据和视图的分离,问题主要是解耦(开放封闭原则)。

使用jquery和使用框架的区别的更多相关文章

  1. jQuery与Vue的区别、从jQuery到Vue框架优点总结

    一.两者的区别 1.数据与视图分离 2.数据驱动视图 二.从jQuery到Vue框架的总结 1.数据与视图分离,解耦 2.数据驱动视图,只关心数据,DOM操作已经被框架封装

  2. Vue与React两个框架的区别对比

    简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

  3. ZF、TP、CI等各种框架的区别

    (原标题:面试常见问题之ZF.TP.CI等框架的区别 http://blog.163.com/m13341159039_1/blog/static/245953061201522092212820/) ...

  4. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  5. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  6. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  7. 【转】jquery validate验证框架与kindeditor使用需二次提交的问题

    原文:http://blog.csdn.net/wlsyn/article/details/11536399在使用jquery的验证框架对kindeditor富文本编辑器进行验证的过程中,发现提 交时 ...

  8. mvc设计模式和mvc框架的区别

    Spring中的新名称也太多了吧!IOC/DI/MVC/AOP/DAO/ORM... 对于刚刚接触spring的我来说确实晕了头!可是一但你完全掌握了一个概念,那么它就会死心塌地的为你服务了.这可比女 ...

  9. 使用Jquery+EasyUI 进行框架项目开发案例讲解之五 模块(菜单)管理源码分享

    http://www.cnblogs.com/huyong/p/3454012.html 使用Jquery+EasyUI 进行框架项目开发案例讲解之五  模块(菜单)管理源码分享    在上四篇文章 ...

随机推荐

  1. 记录一下vue slot

    使用步骤: 1.在组件(panda)当中建立一个slot,定义好name.(<slot name='myname'></slot>)    2.引用组件的时候如果需要补充内容, ...

  2. iOS 13 DeviceToken获取发生变化

    问题描述: iOS 13 通过[deviceToken description]获取到的内容已经变了,这段代码运行在 iOS 13 上已经无法获取到准确的DeviceToken字符串了, NSStri ...

  3. __init__调用之二

    class Bar: def __init__(self,name,age): self.suibian = name #self后的名字是啥,对象就可以调用啥,而不是 __init__ 后括号形参 ...

  4. nightwatch对前端做自动化测试

    记录node环境使用nightwatch.selenium-server.chromedriver对部署后的前端页面进行自动化测试的项目搭建过程. 1.目标 能对部署后的前端项目进行自动化测试,能自动 ...

  5. Linux查看库依赖方法

    1.查看依赖的库:objdump -x xxx.so | grep NEEDED 2.查看可执行程序依赖的库:objdump -x 可执行程序名 | grep NEEDED 3.查看缺少的库: ldd ...

  6. 原生js 实现better-scroll效果,饿了么菜单内容联动,即粘即用

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. [转帖]亚马逊彻底去掉 Oracle 数据库:迁移完成

    亚马逊彻底去掉 Oracle 数据库:迁移完成 https://mp.weixin.qq.com/s/KFonq8efDZ5K6x4YzIVbbg 云头条的信息挺不错的.. 2019 年 10 月 1 ...

  8. 《Mysql - 幻读》

    一:准备 - 为了深入了解幻读,准备数据. CREATE TABLE `t` ( `id` ) NOT NULL, `c` ) DEFAULT NULL, `d` ) DEFAULT NULL, PR ...

  9. ~ubuntu1804安装禅道

    一.解压禅道安装包 二.启动禅道 # 开启Apache和Mysql服务 /opt/zbox/zbox start # 停止Apache和Mysql服务 /opt/zbox/zbox stop # 命令 ...

  10. 使用 react 的 hooks 进行全局的状态管理

    使用 react 的 hooks 进行全局的状态管理 React 最新正式版已经支持了 Hooks API,先快速过一下新的 API 和大概的用法. // useState,简单粗暴,setState ...