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

版权声明：本文为wzndkj原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wzndkj/p/11037711.html