jQuery和Vue對比

時間 2019-11-09

標籤 jquery vue 對比欄目 JQuery 简体版

原文原文鏈接

一、vue和jquey對比

jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操做，其實和原生的HTML的區別只在於能夠更方便的選取和操做DOM對象，而數據和界面是在一塊兒的。好比須要獲取label標籤的內容：$("lable").val();,它仍是依賴DOM元素的值。 Vue則是經過Vue對象將數據和View徹底分離開來了。對數據進行操做再也不須要引用相應的DOM對象，能夠說數據和View是分離的，他們經過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。css

二、舉例

場景一：

列表添加一個元素,下圖爲vue和jquery兩種操做的代碼，咱們從中能夠看出vue只須要向數據message裏面push一條數據便可完成添加一個li標籤的操做，而jquery則須要獲取dom元素節點，並對dom進行添加一個標籤的操做，若是dom結構特別複雜，或者添加的元素很是複雜，則代碼會變得很是複雜且閱讀性低。
vue:html

<!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>

jQuey：vue

<!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：html5

<!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：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>