<!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的渲染其实跟业务流程关系不大。我们只需要关心数据的变化。数据和视图的分离，问题主要是解耦（开放封闭原则）。