کمی در مورد Vue.js

در چند سال اخیر مخصوصا با اوج گرفتن رقابت‌های شدید لایبرری‌ها و فریم‌ورک‌های جاوااسکریپتی سمت کاربر، نام سه رقیب بیش از پیش به‌چشم میخورد. انگولار که یک فریم‌ورک است و سنگین و البته سازمانی است. ری‌اکت که همچنان محبوب‌ترین است و البته Vue.js. طبق پیش‌بینی‌ها و با توجه به مجموع جوانب vue اگرچه از دو رقیب دیگر از نظر میزان استفاده و بزرگی جامعه عقب است اما میزان نسبی رشدش بیش از دو مورد دیگر است. همچنانکه منحنی یادگیری کوچکتری دارد و در هر پروژه‌ای امکان استفاده دارد، از این رو بهتر است راجع به vue بیشتر بدانیم. بهترین مکان یادگیری Vue.js، قسمت گاید خود سایت رسمی است. Introduction — Vue.js منظور از Progresive که Vue به خودش میگه این است که لازم نیست از همه‌ی قابلیت‌های آن در برنامه استفاده کرد. ملزم به استفاده‌ی از امکانات vue نیستیم. مثلا میتوانیم بجای ajax آن از jquery ajax استفاده کرد / میتوان به سادگی اعتبارسنجی یک فیلد از Vue استفاده کرد یا میتوانیم بصورت کامل اپلیکیشن تک‌صفحه‌ای داشتخوبیش اینکه vue میتونه هر صفحه‌ای اضافه شود. (مثل jquery) خود vue یک هسته‌ی مرکزی دارد به‌اضافه‌ی چند تا فریم‌ورک که ممکنه خیلی استفاده شود. ما بقی را بخاطر سبکتر شدنش جدا کردههر اپلیکیشنی که میتوانیم با Angular پیاده کنیم با Vue هم میتوانیم و همینطور برای React هم هرکاری توش میکنیم میتونیم در Vue هم بکنیمدیتابایندینگ عمل کپی کردن داده‌های جاوااسکریپت به تگ‌های html است <div id="app">{{message}}</div>@section Scripts{ var app = new Vue({ el: "#app", data: { message: "Test Message form Vue!" } }); }در زیر نحوه استفاده از دایرکتیو v-model <div id="app"> <input type="text" v-model="message" /> {{message}}</div>در اینجا متغییر message را بعنوان مدل در نظر میگیرد و چون در input است با تغییر آن مدل نیز تغییر میکند. این حالت اعمال دو طرفه را tow-way binding میگند.چاپ اسم و فامیل به روش بایندینگ دو طرفه<div id="app"> <input type="text" v-model="first" /> <input type="text" v-model="last" />{{first}} {{last}} </div>@section Scripts{ var app = new Vue({ el: "#app", data: { first:"", last:"" } }); }جهت استفاده از هاید/شو از دایرکتیو v-show استفاده میکنیم <div id="app"> <div v-show="isShow"> {{message}} </div></div>@section Scripts{ var app = new Vue({ el: "#app", data: { message:"this is a test",isShow:false } }); }شو هاید کردن به‌روش کنترل روی رخدادها <div id="app"> <input type="checkbox" id="canShowCheck" v-on:click="ShowHide" /> <div v-show="isShow"> {{message}} </div></div>@section Scripts{ var app = new Vue({ el: "#app", data: { message: "this is a test", isShow: false }, methods: { ShowHide: function () { this.isShow = !this.isShow; } } }); روی چک‌باکس رخداد کلیک را تعریف کرده‌ایم که موقع کلیک متدی اجرا شود که مقدار isShow که در دایرکتیو v-show مسئول شو هاید است را مقدار دهدهر موقعی که میخاهیم مقدار attributeهای تگ html را مقداردهی کنیم از دایرکتیو v-bind استفاده میکنیم. <div id="app" > <input type="text" v-model="messageStyle" /> <input type="checkbox" id="canShowCheck" v-on:click="ShowHide" /> <div v-show="isShow" v-bind:style="messageStyle"> {{message}} </div></div>@section Scripts{ var app = new Vue({ el: "#app", data: { message: "this is a test", isShow: false,messageStyle:"color:blue" }, methods: { ShowHide: function () { this.isShow = !this.isShow; } } }); }برای گشتن در یک مجموعه جهت نمایش آن مثلا در یک لیست یا جدول از دایرکتور v-for استفاده میکنیم <div id="app" > <ul v-for="lang in langs"> <li>{{lang}}</li> </ul> <input type="text" v-model="messageStyle" /> <input type="checkbox" id="canShowCheck" v-on:click="ShowHide" /> <div v-show="isShow" v-bind:style="messageStyle"> {{message}} </div></div>@section Scripts{ var app = new Vue({ el: "#app", data: { message: "this is a test", isShow: false, messageStyle: "color:blue",langs:["1","2","3"] }, methods: { ShowHide: function () { this.isShow = !this.isShow; } } }); }مثلا برای پر کردن یک فرم میتونیم اطلاعات را در مدل ذخیره کنیم و بعد با ajax به سرور بفرستیم. <div id="app" > <ul v-for="lang in langs"> <li>{{lang}}</li> </ul> <select v-model="SelectedLang"> <option v-for="lang in langs" v-bind:value="{{lang}}">{{lang}}</option> </select> <input type="text" v-model="messageStyle" /> <input type="checkbox" id="canShowCheck" v-on:click="ShowHide" /> <div v-show="isShow" v-bind:style="messageStyle"> {{message}} </div> <div> {{SelectedLang}} </div></div>@section Scripts{ var app = new Vue({ el: "#app", data: { message: "this is a test", isShow: false, messageStyle: "color:blue", langs: ["Reza", "Hadis", "Hassan", "Badri"],SelectedLang:null }, methods: { ShowHide: function () { this.isShow = !this.isShow; } } }); }معمولا از vuejs بصورت جزیره‌ای استفاده میشود (مثلا برای ولیدیشن)در واقع صفحات مختلف دارای اپلیکیشن‌های مجزایی از اپلیکیشن هستن. در واقع مولتی‌اپلیکیشن مولتی پیج داریم بجای سینگل پیج اپلیکیشن.برای صفحاتی که کاربر خیلی با UI ارتباط برقرار میکند از vue استفاده میکنیم. ولی برای صفحاتی که قرار است فقط کاربر اطلاعاتی را ببیند یا صحفات ادمین که کاربر خاصی ندارد ضرورتی ندارد و از همان امکانات سمت سروری استفاده شود. کتابخانه‌ی Axios جهت صدا زدن http کاربرد داره و جایگزین خیلی سبک‌تری هست نسبت به jquery ajax