很多人說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:
nbsp;html>
<meta>
<p>
</p>
登入後複製
登入後複製
登入後複製
登入後複製
<script></script><script>
new Vue({
el: '#app',
data: {
message: ["第1条数据","第2条数据"],
i:2
},
methods:{ //向数组添加一条数据即可 add:function(){ this.i++
this.message.push("第"+this.i+"条数据")
}
}
})</script>
jquery:
nbsp;html>
<meta>
<p>
</p>
登入後複製
登入後複製
登入後複製
登入後複製
<script></script><script>
$(document).ready(function() {
var i=2;
$('#add').click(function() {
i++;
//通过dom操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("<li>第"+i+"条数据")
});
});
</script>
#
場景二：控制按鈕的顯示隱藏，下圖為vue和jquery兩種操作的程式碼，我們從中可以看出vue只需要控制屬性isShow的值為true和false即可，而jquery則還是需要操作dom元素控制按鈕的顯示和隱藏
vue :
nbsp;html>
<meta>
<p>
</p>
登入後複製
登入後複製
登入後複製
登入後複製
<script></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：
nbsp;html>
<meta>
<p>
</p>
登入後複製
登入後複製
登入後複製
登入後複製
<script></script><script>
$(document).ready(function() {
var i=2;
$('#add').click(function() {
i++;
//通过dom操作在最后一个li元素后手动添加一个标签 $("#list").children("li").last().append("<li>第"+i+"条数据")
});
//需要手动隐藏dom元素 $("#showButton").click(function(){
$("#add").hide()
})
});
</script>
輸出結果：
##
#4.總結：內容講的比較淺，主要就是分析一下vue和jquey對比的區別，上面兩個例子只是做了一個簡單的說明，然而vue能解決的問題遠比這些要多的多，複雜的多。
vue適用的場景：複雜資料操作的後台頁面，表單填寫頁面
jquery適用的場景：例如一些html5的動畫頁面，一些需要一些需要操作頁面樣式的頁面#js來操作頁面樣式的頁面#js
## 然而二者也是可以結合起來一起使用的，vue側重數據綁定，jquery側重樣式操作，動畫效果等，則會更加高效率的完成業務需求
#5. 附上公司前端目錄結構，有興趣的可以分享程式碼給大家看
#
src代码目录包含assets静态文件，components vue组件文件，plugins 插件文件（包含登录操作，http请求操作，过滤器，加解密操作，公共方法等），router 路由文件，store vuex文件，app.js vue相关配置，index.html主页面
build目录为webpack打包文件，dist目录为打包后生成的文件，node_modules 引用的外部组件
补充阅读：
1.jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
2.Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
3.可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对
象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
4.这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的
值的变化而变化就叫做双向数据绑定
用一个简单的例子来说明编写Jquery和Vue上的不同
修改文字
点击按钮后：
改为
(1)jQuery代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
<p>
<p>大家好，我是<span id="name">张三<span>!</p>
<p>我是一名<span id="jop">医生</span>.</p>
<button id = "modifyBtn">修改</button>
</p>
<script type="text/javascript">
$("#modifyBtn").click(function(){
$("#name").text("李四");
$("#jop").text("老师");
});
</script>
</body>
</html>登入後複製
(2)Vue代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>大家好，我是<span>{{name}}<span>!</p>
<p>我是一名<span>{{jop}}</span>.</p>
<button v-on:click="modifyInfo">修改</button>
</p>
<script>
new Vue({
el: '#app',
data:{
name:"张三",
jop:"医生"
},
methods:{
modifyInfo:function(){
this.name = "李四";
this.jop = "老师";
}
}
})
</script>
</body>
</html>登入後複製
相关推荐：
vue与jquery实时监听用户输入状态代码分享
jQuery表单元素选择器实例讲解
jQuery基础语法使用方法
以上是jquery和vue對比實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
