vue和jquery對比
前段時間面試,有一個面試官問我vue和JQuery的區(qū)別.看了很多文章,也看了很多評論.很多人都說vue和JQuery沒有可比性.但是也看了很多講解,還是覺得很有收獲的.我簡單的歸為以下幾點:
- jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，其實和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對象，而數(shù)據(jù)和界面是在一起的。
- Vue則是通過Vue對象將數(shù)據(jù)和View完全分離開來了。對數(shù)據(jù)進行操作不再需要引用相應的DOM對象，可以說數(shù)據(jù)和View是分離的，他們通過Vue對象這個vm實現(xiàn)相互的綁定。
舉個例子:
場景一：控制按鈕的顯示隱藏，下圖為vue和jquery兩種操作的代碼，我們從中可以看出vue只需要控制屬性isShow的值為true和false即可，而jquery則還是需要操作dom元素控制按鈕的顯示和隱藏
vue:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul>
<!--根據(jù)數(shù)組數(shù)據(jù)自動渲染頁面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add" v-show="isShow">添加數(shù)據(jù)</button>
<button @click="showButton">隱藏按鈕</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: ["第1條數(shù)據(jù)","第2條數(shù)據(jù)"],
i:2,
isShow:true
},
methods:{
//向數(shù)組添加一條數(shù)據(jù)即可
add:function(){
this.i++
this.message.push("第"+this.i+"條數(shù)據(jù)")
},
//控制isShow的值即可
showButton:function(){
this.isShow=false;
}
}
})
</script>
JQuery:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul id="list">
<li>第1條數(shù)據(jù)</li>
<li>第2條數(shù)據(jù)</li>
</ul>
<button id="add">添加數(shù)據(jù)</button>
<button id="showButton">隱藏按鈕</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
var i=2;
$('#add').click(function() {
i++;
//通過dom操作在最后一個li元素后手動添加一個標簽
$("#list").children("li").last().append("<li>第"+i+"條數(shù)據(jù)</li>")
});
//需要手動隱藏dom元素
$("#showButton").click(function(){
$("#add").hide()
})
});
</script>
浙公網(wǎng)安備 33010602011771號