Jquery和vue對比
前言：很多人說jquey和vue沒有什么可比的，應該和Angular，React來比吧，我到覺得他們倒沒有多大的可比性，都是基于mvvm思想設計的框架，無非就是實作的方式不一樣，在不同場景下性能上會有一些差異，然而從jquery到vue或者說是到mvvm的轉變則是一個思想想的轉變，是將原有的直接操作dom的思想轉變到操作資料上去，難道不是一個根本性的改變嗎？
1.jquery介紹：想必大家都用過jquery吧，這個曾經也是現在依然最流行的web前端js庫，可是現在無論是國內還是國外他的使用率正在漸漸被其他的js庫所代替，隨著瀏覽器廠商對HTML5規范統一遵循以及ECMA6在瀏覽器端的實作，jquery的使用率將會越來越低
2.vue介紹：vue是一個興起的前端js庫，是一個精簡的MVVM，從技術角度講，Vue.js 專注于 MVVM 模型的 ViewModel 層，它通過雙向資料系結把 View 層和 Model 層連接了起來，通過對資料的操作就可以完成對頁面視圖的渲染，當然還有很多其他的mvmm框架如Angular，React都是大同小異，本質上都是基于MVVM的理念， 然而vue以他獨特的優勢簡單，快速，組合，緊湊，強大而迅速崛起
3.vue和jquey對比
jQuery是使用選擇器（$）選取DOM物件，對其進行賦值、取值、事件系結等操作，其實和原生的HTML的區別只在于可以更方便的選取和操作DOM物件，而資料和界面是在一起的，比如需要獲取label標簽的內容：$("lable").val();,它還是依賴DOM元素的值，
Vue則是通過Vue物件將資料和View完全分離開來了，對資料進行操作不再需要參考相應的DOM物件，可以說資料和View是分離的，他們通過Vue物件這個vm實作相互的系結，這就是傳說中的MVVM，
4.舉例說明
場景一：串列添加一個元素,下圖為vue和jquery兩種操作的代碼，我們從中可以看出vue只需要向資料message里面push一條資料即可完成添加一個li標簽的操作，而jquery則需要獲取dom元素節點，并對dom進行添加一個標簽的操作，如果dom結構特別復雜，或者添加的元素非常復雜，則代碼會變得非常復雜且閱讀性低
vue:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="app">
<ul>
<!--根據陣列資料自動渲染頁面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add">添加資料</button>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: ["第1條資料","第2條資料"],
i:2
},
methods:{
//向陣列添加一條資料即可
add:function(){
this.i++
this.message.push("第"+this.i+"條資料")
}
}
})
</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條資料</li>
<li>第2條資料</li>
</ul>
<button id="add">添加資料</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+"條資料</li>")
});
});
</script>
場景二：控制按鈕的顯示隱藏，下圖為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>
<!--根據陣列資料自動渲染頁面-->
<li v-for="item in message">{{item}}</li>
</ul>
<button @click="add" v-show="isShow">添加資料</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條資料","第2條資料"],
i:2,
isShow:true
},
methods:{
//向陣列添加一條資料即可
add:function(){
this.i++
this.message.push("第"+this.i+"條資料")
},
//控制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條資料</li>
<li>第2條資料</li>
</ul>
<button id="add">添加資料</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+"條資料</li>")
});
//需要手動隱藏dom元素
$("#showButton").click(function(){
$("#add").hide()
})
});
</script>
輸出結果：
4.總結：內容講的比較淺，主要就是分析一下vue和jquey對比的區別，上面兩個例子只是做了一個簡單的說明，然而vue能解決的問題遠比這些要多的多，復雜的多，
vue適用的場景：復雜資料操作的后臺頁面，表單填寫頁面
jquery適用的場景：比如說一些html5的影片頁面，一些需要js來操作頁面樣式的頁面
然而二者也是可以結合起來一起使用的，vue側重資料系結，jquery側重樣式操作，影片效果等，則會更加高效率的完成業務需求
5. 附上公司前端目錄結構，感興趣的可以分享代碼給大家看看
src代碼目錄包含assets靜態檔案，components vue組件檔案，plugins 插件檔案（包含登錄操作，http請求操作，過濾器，加解密操作，公共方法等），router 路由檔案，store vuex檔案，app.js vue相關配置，index.html主頁面
build目錄為webpack打包檔案，dist目錄為打包后生成的檔案，node_modules 參考的外部組件
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/174075.html
標籤：JavaScript