前言：很多人說(shuō)jquey和vue沒(méi)有什么可比的，應(yīng)該和Angular，React來(lái)比吧，我到覺(jué)得他們倒沒(méi)有多大的可比性，都是基于mvvm思想設(shè)計(jì)的框架，無(wú)非就是實(shí)現(xiàn)的方式不一樣，在不同場(chǎng)景下性能上會(huì)有一些差異。然而從jquery到vue或者說(shuō)是到mvvm的轉(zhuǎn)變則是一個(gè)思想想的轉(zhuǎn)變，是將原有的直接操作dom的思想轉(zhuǎn)變到操作數(shù)據(jù)上去，難道不是一個(gè)根本性的改變嗎？
1.jquery介紹：想必大家都用過(guò)jquery吧，這個(gè)曾經(jīng)也是現(xiàn)在依然最流行的web前端js庫(kù)，可是現(xiàn)在無(wú)論是國(guó)內(nèi)還是國(guó)外他的使用率正在漸漸被其他的js庫(kù)所代替，隨著瀏覽器廠商對(duì)HTML5規(guī)范統(tǒng)一遵循以及ECMA6在瀏覽器端的實(shí)現(xiàn)，jquery的使用率將會(huì)越來(lái)越低
2.vue介紹：vue是一個(gè)興起的前端js庫(kù)，是一個(gè)精簡(jiǎn)的MVVM。從技術(shù)角度講，Vue.js 專(zhuān)注于 MVVM 模型的 ViewModel 層。它通過(guò)雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來(lái)，通過(guò)對(duì)數(shù)據(jù)的操作就可以完成對(duì)頁(yè)面視圖的渲染。當(dāng)然還有很多其他的mvmm框架如Angular，React都是大同小異，本質(zhì)上都是基于MVVM的理念。 然而vue以他獨(dú)特的優(yōu)勢(shì)簡(jiǎn)單，快速，組合，緊湊，強(qiáng)大而迅速崛起
3.vue和jquey對(duì)比
jQuery是使用選擇器（$）選取DOM對(duì)象，對(duì)其進(jìn)行賦值、取值、事件綁定等操作，其實(shí)和原生的HTML的區(qū)別只在于可以更方便的選取和操作DOM對(duì)象，而數(shù)據(jù)和界面是在一起的。比如需要獲取label標(biāo)簽的內(nèi)容：$("lable").val();,它還是依賴DOM元素的值。
Vue則是通過(guò)Vue對(duì)象將數(shù)據(jù)和View完全分離開(kāi)來(lái)了。對(duì)數(shù)據(jù)進(jìn)行操作不再需要引用相應(yīng)的DOM對(duì)象，可以說(shuō)數(shù)據(jù)和View是分離的，他們通過(guò)Vue對(duì)象這個(gè)vm實(shí)現(xiàn)相互的綁定。這就是傳說(shuō)中的MVVM。
4.舉例說(shuō)明
場(chǎng)景一：列表添加一個(gè)元素,下圖為vue和jquery兩種操作的代碼，我們從中可以看出vue只需要向數(shù)據(jù)message里面push一條數(shù)據(jù)即可完成添加一個(gè)li標(biāo)簽的操作，而jquery則需要獲取dom元素節(jié)點(diǎn)，并對(duì)dom進(jìn)行添加一個(gè)標(biāo)簽的操作，如果dom結(jié)構(gòu)特別復(fù)雜，或者添加的元素非常復(fù)雜，則代碼會(huì)變得非常復(fù)雜且閱讀性低
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ù)自動(dòng)渲染頁(yè)面--> <li v-for="item in message">{{item}}</li> </ul> <button @click="add">添加數(shù)據(jù)</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 }, methods:{ //向數(shù)組添加一條數(shù)據(jù)即可 add:function(){ this.i++ this.message.push("第"+this.i+"條數(shù)據(jù)") } } })</script>
新聞熱點(diǎn)
疑難解答
圖片精選
