مقایسه Vue.js و JQuery

vue js چیست؟ چه تفاوتی با jquery دارد؟ اگر vuejs را یاد بگیرم میتوانم jquery را کنار بگذارم؟ اینکه می شود vue js را بدون لارول هم استفاده کرد یا اینکه حتما باید با پروژه های لاراولی vue js را به کار برد؟

اگر شما هم به تازگی آموزش vue js را شروع کرده اید و این سوالات برای شما پیش آمده است مطمئنا خواندن این مقاله باعث می شود تا بسیاری از ابهامات برای شما روشن شود. در این مقاله به مقایسه Vue.js و JQuery خواهیم پرداخت.

JQuery چیست؟

jquery

جی کوئری یک کتابخانه جاوا اسکریپتی است که برای ساده کردن برنامه های سمت کاربر (client side programming) مورد استفاده قرار می گیرد.

استفاده از این کتابخانه رایگان می باشد. علاوه بر آن به صورت اپن سورس (open source) است به این معنی که کدهای آن در دسترس عموم قرار گرفته است.

سینتکس jquery طوری طراحی شده تا به راحتی یک سند وب راهبری شود و المان های داخل آن برای ایجاد انیمیشن ها، مدیریت رخدادها و همچنین برای توسعه برنامه های غیر همزمانی وب (ajax) به راحتی انتخاب شوند.

شعار خود jquery این است: write less do more به این معنی که کمتر بنویس و بیشتر انجام بده.

بنابراین استفاده از jquery باعث می شود مقدار کد کمتری نسبت به جاوا اسکریپت نوشته شود و همچنین با استفاده از پلاگین هایی که داخل jquery گنجانده شده است کار طراحی صفحات وب به آسانی قابل انجام است.

به طور نمونه برای گرفتن مقدار داخل یک input میتوانیم از کد زیر استفاده کنیم :

$('#input-id').val();

با استفاده از کد بالا می توان مقدار داخل یک input را که دارای id به نام input-id هست را بدست آورد.

اضافه کردن یک کلاس به یک المان صفحه وب به صورت زیر انجام می شود:

$('#element-id').addClass('some-class');

با استفاده از کد بالا می توان به یک المان صفحه وب با آیدی element-id کلاس some-class را اضافه کرد.

و یا اینکه ارسال درخواست به یک API با کد زیر قابل انجام است:

$.get('http://your-site.com/api/endpoint', function(data){
    console.log(data);
});

نصب جی کوئری

به راحتی می توان با قرار دادن cdn جی کوئری داخل صفحه وب از دستورات جی کوئری استفاده کرد

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

و یا میتوان cdn را به صورت یک فایل جاوا اسکریپت ذخیره کرد و این فایل جاوا اسکریپ را فراخوانی کرد . کافی است آدرس جی کوئری را داخل مرورگر باز کرده و صفحه باز شده را به صورت js. ذخیره کرد.

روش دوم نصب جی کوئری با استفاده از NPM) node package module) است. کافی است دستور زیر را در کامند ویندوز تایپ کرده تا پکیج جی کوئری نصب گردد.

npm install jquery

با زدن این دستور داخل cmd پوشه ای به نام node_modules ایجا می شود که داخل این پوشه پکیج jquery قرار دارد.

تا به اینجای کار به معرفی و نحوه ی نصب و راه اندازی و نوشتن کدهای جی کوئری پرداختیم. حالا نوبت به معرفی vue js رسیده است.

Vue.js چیست؟

ویو جی اس چیست؟

vue js یک فریمورک جاوا اسکریپتی است که برای طراحی واسط کاربری (user interface) یا همان بخش frontend مورد استفاده قرار می گیرد.

این فریمورک به صورت اپن سورس ارائه شده و از الگوی MVVM استفاده می کند.

بعضی از ویژگی های این فریمورک عبارتند از : تمپلیت ها(templates)، کامپوننت ها (components)، ترانزیشن ها (transitions) و مسیر یابی (routings)

نصب ویو جی اس

نصب vue js به دو صورت قابل انجام است:

با استفاده از cdn و قرار دادن لینک مورد نظر داخل فایل داکیومنت. به صورت زیر:

<script src="https://unpkg.com/vue"></script>

با استفاده از npm و تایپ دستور زیر داخل cmd

npm install vue

با تایپ دستور بالا پوشه ای به نام node_modules ایجاد می شود که داخل آن پکیج vue js نصب شده است.

چون در این مقاله قصد داریم به مقایسه vuejs و jquery بپردازیم و اینکه میتوان vue js را به جای jquery استفاده کرد یا نه درنتیجه با استفاده از خود فایل js مربوطه اینکار را انجام می دهیم:

توجه داشته باشید که jquery یک کتابخانه سمت کاربر است و vuejs یه فریمورک سمت کاربر

در مرحله اول وارد سایت جی کوئری(jquery.com) شده آخرین نسخه جی کوئری را دانلود می کنیم. حجم این نسخه برابر 88 کیلوبایت است.

سپس وارد سایت vuejs.org شده فایل جاوا اسکریپتی مربوطه را دانلود می کنیم. vue js هم فایلی برابر با حجم 88 کیلو بایت است.

با استفاده از مثال هایی قصد داریم به مقایسه vuejs و jquery بپردازیم:

چند مثال

در این جا به چند نمونه از نحوه انجام وظایف مختلف با jQuery و Vue.js ا خواهیم پرداخت.

1 - گوش دادن زمانی که یک المان کلیک می شود

jquery :https://jsfiddle.net/4x445r2r

<button id="button">Click me!</button>

(function() {
    $('#button').click(function() {
        alert('Clicked!');
    });
})();

vue js :https://jsfiddle.net/jwfqtutc

<div id="app">
  <button @click="doSomething">Click me!</button>
</div>

new Vue({
    el: '#app',

    methods: {
        doSomething() {
            alert('Clicked!');
        }
    }
});

2- گوش دادن زمانی که یک ورودی تغییر می کند

jQuery: https://jsfiddle.net/5zdcLdLy

input id="input" type="text" placeholder="Enter your name"

(function() {
    $('#input').change(function() {
        alert('Hello '+ $(this).val());
    });
})();

Vue: https://jsfiddle.net/as65e4nt

<div id="app">
  <input @change="doSomething" v-model="name" type="text" placeholder="Enter your name">
</div>

new Vue({
    el: '#app',

    data: {
        name: ''
    },

    methods: {
        doSomething() {
        alert('Hello '+ this.name);
    }
    }
});

3- اتصال به یک کلاس خاص

jQuery: https://jsfiddle.net/o65nvke2

<div id="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, modi. Similique amet aliquam magni obcaecati placeat, iusto ipsum enim, perferendis earum modi debitis praesentium, consequatur dolor soluta deserunt. Saepe, laborum.
</div>

(function() {
    var className = 'red-text';

    $('#content').addClass(className);
})();

Vue: https://jsfiddle.net/a203pyqf

<div id="app">
  <div id="content" :class="className">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, modi. Similique amet aliquam magni obcaecati placeat, iusto ipsum enim, perferendis earum modi debitis praesentium, consequatur dolor soluta deserunt. Saepe, laborum.
  </div>
</div>

new Vue({
    el: '#app',

    data: {
        className: 'red-text'
    }
});

4 - بروز رسانی محتوای یک المان خاص

jQuery: https://jsfiddle.net/ccLffhot

<div id="content"></div>

<input type="text" id="text" placeholder="Enter your text">

(function() {

    $('#text').keyup(function() {
          $('#content').html($(this).val());
    });

})();

vue js:

<div id="app">
  <div v-html="content"></div>
  <input type="text" placeholder="Enter your text" v-model="content">
</div>

new Vue({
    el: '#app',

    data: {
        content: ''
    }

});

5 - تغییر وضعیت نمایش یک المان

jQuery: https://jsfiddle.net/4LcL5pco

<div id="content">
  BooHoo!
</div>

<button id="button">Toogle</button>

(function() {

    $('#button').click(function() {
        $('#content').toggle();
    });

})();

Vue: https://jsfiddle.net/a8xoaoqy

div id="app">
  <div id="content" v-if="visible">
    BooHoo!
  </div>

  <button @click="visible = !visible">Toogle</button>
</div>

new Vue({

    el: '#app',

    data: {
        visible: true
    }

});

6 - ساخت یک select input از یک آرایه

jQuery: https://jsfiddle.net/9f4pcakt

<span>Social Networks:</span>

<select id="networks"></select>

(function() {

    var socialNetworks = ['Facebook', 'Twitter', 'YouTube', 'Instagram', 'LinkedIn'];
    var list;

    $.each(socialNetworks, function (index, value) {
        list += `<option value="${index}">${value}</option>`;
    });

    $('#networks').html(list);

})();

Vue: https://jsfiddle.net/gktr062m

<div id="app">
  <span>Social Networks:</span>

  <select id="networks">
    <option v-for="(network, index) in socialNetworks" :value="index">{{ network }}</option>
  </select>
</div>

new Vue({

    el: '#app',

    data: {
        socialNetworks: ['Facebook', 'Twitter', 'YouTube', 'Instagram', 'LinkedIn']
    }

});

7 - ایجاد درخواست های AJAX

jQuery: https://jsfiddle.net/t3qef00y

<span>List of users:</span>

<ul id="users"></ul>

(function() {

  var list = '';

    $.get('https://reqres.in/api/users', function(response) {

        $.each(response.data, function (index, user) {
            list += `<li>${user.first_name}</li>`;
        });

        $('#users').html(list);

  });

})();

Vue: https://jsfiddle.net/gbjthb3q

نمی توان به تنهایی درخواست های AJAX از طریق vue ارسال کرد ولی تیم توسعه دهنده یک پکیجی به نام vue-resource برای اینکار اختصاص داده است :GitHub - pagekit/vue-resource: The HTTP client for Vue.js

div id="app">
<span>List of users:</span>

  <ul id="users">
    <li v-for="user in users">{{ user.first_name }}</li>
  </ul>
</div>

new Vue({

    el: '#app',

    data: {
        users: null
    },

    mounted: function() {
        this.$http.get('https://reqres.in/api/users').then(response => {
            this.users = response.body.data;
        });
    }

});

نتیجه : اکنون که شما این مقاله را خوانده اید، تفاوت بین jQuery و vuejs را می بینید و مزیت هایی که با استفاده از هر یک بدست می آید را درک می کنید.

میتوان فهمید که vue js می تواند جایگزینی برای jQuery باشد البته در پروژه هایی که پیچیدگی های خاصی نداشته باشد.

هنوز هم میتوان از jQuery استفاده کرد. در نهایت همه چیز به خود شما به عنوان توسعه دهنده و ابزار هایی که با آن راحت هستید، برمی گردد.