با این Vue.js چیست؟ فرقش با jQuery در چیه؟ بعد از اینکه Vue.js یاد گرفتم باید jQuery رو فراموش کنم؟ می تونم بیرون لاراول ازش استفاده کنم؟ اگر تازه کار باشید یا جدیدا سراغ یاد گرفتن Vue.js رفته باشید، احتمالا همین سوالات را از خودتان می پرسید یا شاید سردرگم و متعجب هستید که دقیقا چه کارهایی می توان با آن انجام داد و کجاها می شود از آن استفاده کرد. در این مقاله سعی می کنیم برای حل همین مسائل به شما کمک کنیم.
بعد از خواندن این مقاله شما باید ایده اصلی فریم ورک ترند دنیا را فهمیده باشید، و اینکه کی باید از آن استفاده کرد و تصمیم بگیرید به خاطرش حاضرید jQuery را ترک کنید یا خیر.
jQuery چیست؟
اگر واقعا نمی دانید jQuery چیست صادقانه بگم که تقریبا غیر ممکنه و باورش سخت خواهد بود چون جی کوئری بیشتر از ۱۰ سال عمر دارد و تقریبا همه از آن استفاده می کنند منظورم از همه از پروژه های شخصی و تفریحی بگیرید تا شرکت های چند ملیتی با میلیاردها درآمد ماهانه.
جی کوئری یک کتابخانه سریع، کوچک و پر از امکانات JavaScript می باشد که با اکثر مرورگرهای وب کار می کند و ساخته شده تا مشکلات کار کردن با جاوا اسکریپت خام را کمتر و حتی رفع کند.با jQuery می توان تغییر DOM/CSS ، مدیریت رویدادها (Event Handling) ، انیمیشن و درخواست های Ajax را انجام داد.
کی باید از jQuery استفاده کرد؟
از جی کوئری می توان در خیلی جاها استفاده کرد.خیلی از کتابخانه ها و پلاگین ها بدون آن کار نمی کنند.با جی کوئری می توانید کارهای ساده ای مثل تغییر مقدار یک فیلد یا گرفتن محتویات یک div تا کارهای پیچیده تر مثل ایجاد اسلایدر های تصاویر یا گالری و انیمیشن های جذاب را ایجاد کنید.
وقتی شما با نوشتن کدهای jQuery راحت باشید تقریبا همه کدهای جاوااسکریپت تان را می توانید با آن بنویسید.چند مثال در ادامه ذکر می کنیم تا ببینید جی کوئری چقدر ساده است:
شما می خواهید مقدار یک فیلد فرم را بگیرید:
$(‘#input-id’).val();
نکته: حتما نیاز نیست از انتخابگر id استفاده کنید. می توانید از همه انتخابگرهای CSS در اینجا هم استفاده کنید.
شما می خواهید به یک تگ، خصیصه class اضافه کنید:
$(‘#element-id’).addClass(‘some-class’);
شما می خواهید یک درخواست از نوع get به یک API بفرستید:
$.get(‘http://your-site.com/api/endpoint’, function(data){
console.log(data);
});همانطور که می بینید کاملا مشخص است که تغییر دادن DOM یا فرستادن درخواست Ajax با استفاده از جی کوئری نسبت به جاوااسکریپت خام چقدر ساده تر است.
انقدر ساده که خیلی از طراحان وب نوشتن کدهای ساده جاوااسکریپت را هم فراموش کرده اند. این تصویر فان به خوبی وضعیت را تشریح می کند:
نصب
شما می توانید برای نصب جی کوئری ، به سادگی از لینک CDN استفاده کنید و آن را به بخش <head> صفحه یا قبل از </body> اضافه کنید:
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
یا با npm نصبش کنید:
$ npm install jquery
Vue.js چیست؟
بر خلاف جی کوئری، Vue.js یک فریم ورک MVC است که از Angular الهام گرفته است. در واقع موسس آن Evan You کار روی این پروژه را بعد از کار کردن در گوگل روی آنگولار شروع کرد. او تصمیم گرفت قسمت های جذاب انگولار را جدا کند و یک فریم ورک جدید بسازد که هم سبک باشد و هم یادگیری سریع تر و راحت تری داشته باشد. Vue در فوریه ۲۰۱۴ منتشر شد و محبوبیت خود را در جامعه لاراول کسب کرد.در هنگام نوشتن این مقاله ویو ۴,۹۳۳,۷۷۹ بار از NPM دانلود شده است و حدود ۶۶.۰۰۰ ستاره در Github گرفته است و هشتمین پروژه محبوب گیت هاب به شمار می رود.
کی باید از Vue.js استفاده کرد؟
Vue بیشتر برای پروژه های کوچک مناسب است که فقط مقداری واکنش پذیری(Reactivity)، ارسال فرم با Ajax، نمایش modal، نمایش همزمان متن تایپی کاربر در عنصری دیگر، یا خیلی از موارد ساده مثل این نیاز دارید.البته برای مقیاس پذیر(Scalable) بوده و برای پروژه های بزرگ هم می توان از آن استفاده کرد.به همین خاطر است که یک فریم ورک Progressive نامیده می شود.
می توانید کدهای نمونه مواردی که گفته شد را در سایت اصلی اش هم پیدا کنید:
و مثال های بیشتر را می توانید اینجا ببینید.
Vue همچنین به لطف کامپوننت های Router و Vuex اش، به خوبی برای برنامه های تک صفحه ای (SPA) بزرگ طراحی شده است. اگر علاقه مند به دیدن کدهای دیگران برای یادگیری هستید حتما به این پروژه نمونه Vue سر بزنید.
نصب
مثل جی کوئری می توانید Vue را هم از CDN به سایت اضافه کنید:
<script src="https://unpkg.com/vue"></script>
یا با NPM نصبش کنید:
npm install vue
پیشنهاد می کنیم : آموزش ساده Vue.js
مثال ها
در این بخش مثال های مختلفی را با Vue.js و jQuery نشان انجام خواهیم داد:
رویدادها(Events):
۱.گوش دادن به رویداد کلیک(وقتی روی یک بخش از صفحه کلیک می شود):
با jQuery: پیش نمایش
<button id="button">Click me!</button>
(function() {
$('#button').click(function() {
alert('Clicked!');
});
})();با Vue.js : پیش نمایش
<div id="app"> <button @click="doSomething">Click me!</button> </div>
new Vue({
el: '#app',
methods: {
doSomething() {
alert('Clicked!');
}
}
});۲.گوش دادن به رویداد تغییر محتوای فیلد input:
با jQuery: پیش نمایش
<input id="input" type="text" placeholder="Enter your name">
(function() {
$('#input').change(function() {
alert('Hello '+ $(this).val());
});
})();با Vue.js: پیش نمایش
<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);
}
}
});اضافه کردن Class:
با jQuery: پیش نمایش
<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.js: پیش نمایش
<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'
}
});تغییر محتوای یک عنصر:
با jQuery: پیش نمایش
<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: ''
}
});نمایان/مخفی کردن یک عنصر:
با jQuery: پیش نمایش
<div id="content"> BooHoo! </div> <button id="button">Toogle</button>
(function() {
$('#button').click(function() {
$('#content').toggle();
});
})();با Vue.js: پیش نمایش
<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
}
});مقداردهی یک Select از آرایه:
با jQuery: پیش نمایش
<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.js: پیش نمایش
<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']
}
});ارسال درخواست Ajax:
با jQuery: پیش نمایش
<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.js: پیش نمایش
شما نمی توانید با خود Vue درخواست Ajax بفرستید، ولی تیم یک بسته مخصوص این کار منتشر کرده است: 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;
});
}
});و در نهایت
همانطور که گفته شد Vue.js یک فریم ورک Progressive نسبتا کامل جاوا اسکریپت به حساب می آید که می توان برنامه های کوچک و بزرگ SPA را با آن توسعه داد و jQuery نیز یک کتابخانه مشهور و بسیار پراستفاده جاوا اسکریپت است که در سایت های معمول برای مواردی که گفته شد کاربرد دارد ولی به سختی می توان یک سایت تک صفحه ای بزرگ را با آن گسترش داد. در ضمن یکی از این دو را باید انتخاب کنید و اگر Vue.js را انتخاب کردید همه بخش های مورد نظرتان را باید با جاوااسکریپت خام بنویسید و یا پلاگین های مناسب را بیابید.
قالب نظرات رو تغییر دادید؟!🤔😯
بله مدتی قبل کمی تغییر دادیم سعی کردیم بهتر بشه 🙂
من هم به همین نتیجه رسیدم که جی کوئری خیلی برام بهتره. یه بار یکی توی یک کنفرانسی میگفت:
توی ۱ سال آینده حتما، یک نفر یک فریم ورک جدید JavaScript منتشر خواهد کرد. و شاید شما این سخنرانی را با لبخند به یاد آورید.
اسم سخنرانی being a developer after 40 بود – که به فارسی هم ترجمه شده:برنامه نویس بودن بعد از ۴۰ سالگی – و خیلی جذاب هست.
درسته البته از جذابیت فریم ورک هایی مثل Vue و React نمیشه گذشت.
جالب بود .ممنون از معرفی این سخنرانی علی آقا
با خوندن این متن مطمئن شدم که به کارم با جی‌کوئری ادامه بدم.
ولی این نکته خوبی بود که گفتید: با جی‌کوئری سایت تک‌صفحه‌ای درست کردن سخته.
از کامپوننت jEasyui جی‌کوئری میشه برای اپ تک‌صفحه‌ای استفاده کرد ولی برای Route Control هنوز مورد مناسبی پیدا نکردم.
ممنون آقای خرازی. بله البته اینم باید اضافه کرد که Vue کامپوننت داره که جی کوئری نداره . البته مقایسه کامل اینها با هم شاید زیاد درست نباشه