對比jQuery和Vue.js實現導航板塊方法的區別
阿新 • • 發佈：2021-01-03
網頁中經常會有類似這種的版塊：
它的功能需求是：
上方一行導航，下方的內容會根據上方導航變化。
上方導航會高亮顯示當前是第幾頁。
我們先用原生JS來實現它：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Test</title> <style type = "text/css"> #wrapper{ width: 500px; heightvarsectionList=document.getElementById("nav").getElementsByTagName("div"); varpageList=document.getElementsByClassName("contents"); console.log(sectionList); for(leti=0;i<sectionList.length;i++){ sectionList[i].addEventListener("click",function(){: 400px; background: #00ff0022; position: relative; } #nav{ width: 100%; height: 72px; } #nav>div{ float: left; background-color: #00ff0022; padding:29px; cursor: pointer; transition: background-color 0.3s; } #nav>div.active{ background-color: #00ff0066; } .contents{ width: 480px; height: 300px; margin:0px auto; background: #00ff0022; display: none; } .contents.active{ display: block; } </style> </head> <body> <div id = "wrapper"> <div id = "nav"> <div index = "0" class = "active">Section1</div> <div index = "1">Section2</div> <div index = "2">Section3</div> <div index = "3">Section4</div> </div> <div class = "contents active"><h3>Page1</h3>voluptatibus qui dolorem</div> <div class = "contents"><h3>Page2</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div> <div class = "contents"><h3>Page3</h3>consectetur earum id aut harum facere?</div> <div class = "contents"><h3>Page4</h3>Sunt et quas rerum nostrum nisi atque consequuntur ea magni officiis impedit illo</div> </div> <script type = "text/javascript" src = "jquery-3.5.1.js"></script> <script type = "text/javascript">
for(letj=0;j<sectionList.length;j++){ sectionList[j].removeAttribute("class"); } this.setAttribute("class","active");
for(letj=0;j<pageList.length;j++){ pageList[j].setAttribute("class","contents"); } pageList[parseInt(this.getAttribute("index"))].setAttribute("class","contentsactive"); }); }
</script> </body> </html>
可以發現原生JS操作DOM比較麻煩。
jQuery可以直接用選擇器找DOM元素，並且如果找到的是一組元素組成的陣列，也無需遍歷這個陣列，直接就可以給他們每個設定事件監聽。還有addClass和removeClass這樣的方法。
所以，相同的功能，jQuery只需以下幾行程式碼：
$("#nav div").click(function(){
$("#nav div").removeClass("active");
$(this).addClass("active");
$(".contents").removeClass("active");
$(".contents").eq(parseInt($(this).attr("index"))).addClass("active");
});
如果用Vue實現，思路如下：
<body> <div id = "wrapper"> <div id = "nav"> <div v-bind:class="isActive1?'active':''" v-on:click="click1">Section1</div> <div v-bind:class="isActive2?'active':''" @click="click2">Section2</div><!-- v-on可以簡寫為@ --> <div :class="isActive3?'active':''" @click="click3">Section3</div> <!-- v-bind 可以簡寫為一個冒號 --> <div :class="{active:isActive4}" @click="click4">Section4</div><!-- 也可以將屬性值設定為一個物件 類名：bool變數 --> </div> <div class = "contents" :class = "{active:isActive1}"><h3>Page1</h3>voluptatibus qui dolorem</div> <div class = "contents" :class = "{active:isActive2}"><h3>Page2</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div> <div class = "contents" :class = "{active:isActive3}"><h3>Page3</h3>consectetur earum id aut harum facere?</div> <div class = "contents" :class = "{active:isActive4}"><h3>Page4</h3>Sunt et quas rerum nostrum nisi atque consequuntur ea magni officiis impedit illo</div> </div> <script type = "text/javascript" src = "vue.js"></script> <script type = "text/javascript"> var vue1 = new Vue({ el:"#wrapper", data:{ isActive1:true, isActive2:false, isActive3:false, isActive4:false }, methods:{ clearHighLight:function(){ this.isActive1 = false; this.isActive2 = false; this.isActive3 = false; this.isActive4 = false; }, click1:function(){ this.clearHighLight(); this.isActive1 = true; }, click2:function(){ this.clearHighLight(); this.isActive2 = true; }, click3:function(){ this.clearHighLight(); this.isActive3 = true; }, click4:function(){ this.clearHighLight(); this.isActive4 = true; } } }); </script> </body>
這樣看起來比較麻煩，但是如果用v-for指令來實現:
<body> <div id = "wrapper"> <div id = "nav"> <div v-for="(navContent,index) in navContents" @click="change(index)" :class="{active:index==activeIndex}"> {{navContent}} </div> </div> <div v-for = "(content,index) in contents" v-html="content" class = "contents" :class="{active:index==activeIndex}"></div> </div> <script type = "text/javascript" src = "vue.js"></script> <script type = "text/javascript"> var vue1 = new Vue({ el:"#wrapper", data:{ navContents:["Section1","Section2","Section3","Section4"], contents:["<h3>Page1</h3>voluptatibus qui dolorem", "<h3>Page2</h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit.", "<h3>Page3</h3>consectetur earum id aut harum facere?", "<h3>Page4</h3>Sunt et quas rerum nostrum nisi atque consequuntur ea magni officiis impedit illo" ], activeIndex:0 }, methods:{ change:function(input){ this.activeIndex = input; } } }); </script> </body>
由此可見，vue做重複性的類列表元素比較方便