<!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. 页面进行ajax时 显示一个中间浮动loading

    先发效果图,加载东西的时候如果没有设计或者其它提示会降低用户体验,所以写了个简单的loading弹层. 适用于触屏和pc页面. /* 页面进行ajax时 显示一个中间浮动loading @auther ...

  2. web端自动化——Selenium Grid原理

     利用Selenium Grid可以在不同的主机上建立主节点(hub)和分支节点(node),可以使主节点上的测试用例在不同的分支节点上运行.  对不同的节点来说,可以搭建不同的测试环境(操作系统.浏 ...

  3. 【GStreamer开发】GStreamer播放教程06——可视化音频

    目标 GStreamer有一系列把音频转换成视频的element.他们可以用于科学的目的或者增加音乐播放器的趣味性.本教程展示: 如何允许音频的可视化 如何选择可视化element 介绍 在playb ...

  4. WXS-运算符

  5. qbittorrent搜索在线插件

    https://raw.githubusercontent.com/khensolomon/leyts/master/yts.py https://raw.githubusercontent.com/ ...

  6. Ubuntu下U盘文件只读的解决办法

    转自linux公社:http://www.linuxidc.com/Linux/2012-12/76130.htm Ubuntu下U盘出现文件系统只读的问题了.症状为无法删除U盘中现有文件,无法向U盘 ...

  7. Python-01-编程语言简介

    一.编程与编程语言 1. 编程的目的 计算机的发明,是为了用机器取代/解放人力,而编程的目的则是将人类的思想流程按照某种能够被计算机识别的表达方式传递给计算机,从而达到让计算机能够像人脑/电脑一样自动 ...

  8. Python3 - 随便说一下

    Ⅰ编程语言基础知识 ⅡPython 语言概述 Ⅰ编程语言基础知识 编程语言总体分以为机器语言.汇编语言.高级语言: 机器语言:计算机硬件能够直接使用的编程语言,二进制的集合,属于低级语言. 汇编语言: ...

  9. 04 IO流（二）——IO类的记忆方法、使用场景

    关于IO流以前写的PPT式笔记请跳转:https://blog.csdn.net/SCORPICAT/article/details/87975094#262___1451 IO流的主要结构 记忆方法 ...

  10. Python内存加载shellcode

    生成 首先生成一个测试的msf shellcode msfvenom -p windows/x64/exec CMD=calc.exe -f python 把其中的shellcode复制出来留待待会使 ...