1.jquery 数据视图在一起
vue数据视图分离，解耦(开放封闭原则：对拓展开放，对修改封闭）
2.jquery直接操作dom修改
vue以数据驱动视图（只关心数据变化，DOM操作被封装）
代码实例
<!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>to-do-list jquery</title>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
<div>
<input type="text" id="txt-title">
<button id="btn-submit">submit</button>
</div>
<div>
<ul id="ul-list"></ul>
</div>
</body>
<script>
var $txtTitle=$('#txt-title');
var $btnSubmit=$('#btn-submit');
var $ulList=$('#ul-list');
$btnSubmit.click(function(){
var title=$txtTitle.val();
if(!title){
return
}
var $li=$('<li>'+title+'</li>');
$ulList.append($li);
$txtTitle.val('')
})
</script>
</html>
<!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>to-dol-list vue</title>
</head>
<body>
<div id="app">
<div>
<input v-model="title">
<button v-on:click="add">submit</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
title:'',
list:[]
},
methods:{
add:function(){
this.list.push(this.title);
this.title=''
}
}
})
</script>
</html>
网友评论