شروع کار با Vue.js به طرز شگفت‌انگیزی ساده است؛ زیرا Vue.js بسیاری امکانات را به همراه دارد و کارایی بسیار خوبی را فراهم می‌کند. در اینجا میتوانید حقایق، آرگومان‌ها و قطعه کدهای بیشتری از Vue.js بخوانید.
انتخاب یک فریم‌وورک JavaScript سخت است؛ زیرا تعداد زیادی از آن‌ها وجود دارد و تفاوت‌های آن‌ها واضح نیستند. اگر قبول دارید که تولید (مدت زمانی که طول می‌کشد محصول را تولید کنید) و کارایی (سرعتی که وبسایت شما خواهد داشت) مهم‌ترین موارد هستند، بگذارید به شما نشان دهم که چرا Vue.js یک فریم‌وورک عالی برای ساخت وبسایت‌ها و برنامه‌های تک صفحه‌ای است.
1) یک کتابخانه کامپوننت بر پایه HTML، CSS و JS باعث می‌شود که شروع کار ساده شود.
اولین کاری که باید انجام دهید، راه‌اندازی محیط است. شروع کار با Vue.js بسیار ساده است و هیچ ابزار ساختی مانند Webpack را نیاز ندارد. تنها کاری که باید انجام دهید، یک import ساده در یک تگ script است:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
در ابتدا، یک کامپوننت پایه می‌سازیم که ببینید الگو و کد JavaScript ما چگونه به هم مربوط هستند.
چگونه اولین کامپوننت خود را بسازیم؟
دو راه برای ساخت یک کامپوننت وجود دارد. بیایید با روش ساده‌تر شروع کنیم، که فقط ترکیبی از JavaScript و HTML است:
app.js:
var app = new Vue({
el: '#app',
data: {
name: 'James'
}
})
app.html:
<div id="app">
Hello <input type="text" value={{ name }} />
</div>
app.css:
#app input {
padding: 10px;
color: #121212;
font-size: 12px;
}
این تمام چیزی است که برای ساخت یک چیز خوب نیاز دارید.
همانطور که میتوانید ببینید، با تشکر از id، تناظر میان الگو و JavaScript را حفظ می‌کنیم، و داده‌هایی را فراهم کرده‌ایم که بتوانیم آن را به صورت دینامیک به HTML خود اتصال دهیم.
چگونه داده‌ها را به الگویشان اتصال دهیم؟
Vue.js یک سیستم اتصال دو طرفه دارد، که یعنی شما میتوانید داده‌ها ها را از طریق JavaScript یا از طریق الگو تغییر دهید. بیایید قطعه کد بالا را در نظر بگیریم: اگر متن ورودی را تغییر دهید، این متن به طور خودکار متغیر شما را در سمت JavaScript بروزرسانی خواهد کرد. در سمت دیگر، اگر داده‌ها را بر روی فایل JavaScript تغییر دهید، فایل JavaScript الگوی شما را با مقدار جدید در ورودی رندر خواهد کرد.
یک روش دیگر با استفاده از کامپوننت‌های وب (Web Components)
Vue.js خیلی به مدل‌های اعلامی تکیه می‌کند، و باعث می‌شود که خواندن کد شما ساده‌تر شود و با یک بار خواندن، کاملا درک شود.
2) امکانات ضروری مانند routing و مدیریت داده‌ها توسط کتابخانه‌های رسمی پوشش داده شده‌اند.
Vue.js شامل ماژول هسته‌ای که شما را قادر می‌سازد تا کامپوننت‌ها را بسازید می‌شود، اما برخی کتابخانه‌های اختیاری دیگر را نیز دارد که توسط خود گروه Vue.js ساخته شده‌اند. مثلا vue-router برای route کردن بخش‌های مختلف، Vuex برای مدیریت داده‌های شما و vue-cli برای bootstrap کردن یک پروژه جدید.
چگونه یک router بسازیم؟
یک نقطه مهم در هر وب‌اپلیکیشینی، سیستم routing است و برای این هدف، میتوانید به vue-router تکیه کنید. میتوانید تمام routeهای خود را به روشی مختصر تعریف کنید و با تنها چند خط کد، از پارامترهای routing دینامیک در کامپوننت خود بهره‌برداری کنید.
import Page from './components/page';
export default new VueRouter({
[
{ path: '/page/:uid', component: Page }
]
});
چگونه بین کامپوننت‌های مختلف در ارتباط باشیم؟
یک بعد اساسی دیگر در هر توسعه وب پیچیده‌ای، ارتباط میان کامپوننت‌های مختلف، و نحوه مدیریت داده‌ها است.
Vuex ماژولی است که از معماری Redux و Elm الهام گرفته شده است. این ماژول یک راه بسیار خوب برای مدیریت actionها در کامپوننت‌ها و اعزام داده‌ها به هر کامپوننتی است.
const store = new Vuex.Store({
state: {
doc: null
},
mutations: {
setDocument(state, doc) {
state.doc = doc
}
},
actions: {
async queryDocument({ commit }, { customType, uid }) {
commit('setDocument', await Prismic.getByUID(customType, uid))
}
}
})
چگونه با ترکیب Vuex و vue-router یک کامپوننت بسازیم؟
حال وقت آن رسیده است که از همه آن‌ها در کنار یکدیگر، در یک کامپوننت ساده استفاده کنیم:
var app = new Vue({
el: '#page,
beforeRouteUpdate(to, from, next) {
store.dispatch('queryDocument', { customType: 'homepage', uid: to.params.uid })
.then(next)
})
beforeRouteUpdate فقط یک کامپوننت برای این است که نشان دهیم، کد شما در هنگام تعویص routeها، چه زمانی باید اجرا شود.
با استفاده از vue-cli، سریعا یک پروژه را bootstrap کنید
vue-cli یک خط دستوری است که به شما در bootstrap کردن یک پروژه ساده با یک ابزار ساخت از پیش پیکربندی شده کمک می‌کند.
این خط دستوری می‌تواند برای ساخت یک کامپوننت در یک فایل به همراه افزونه «.vue» بسیار پر کاربرد باشد، که شما را قادر می‌سازد تا HTML، CSS و JavaScript را به درستی داخل کامپوننت خود قرار دهید.
همچنین این خط دستوری از این نظر پر کاربرد است که شما میتوانید از helperهای خوبی مانند babel برای مدیریت سینتکس‌های جدید در JavaScript مانند async / await استفاده کنید.
3) رندر سریع که توسط DOM مجازی تضمین شده است، و حداقل زمان بارگذاری.
30 کیلوبایت!
Vue.js به همراه ماژول هسته‌ای، router و Vuex در حالت gzip شده فقط 30 کیلوبایت حجم دارد.
DOM مجازی!
Vue.js همچنین با پیاده‌سازی DOM مجازی در نسخه 2.0 به بعد، از ReactJS الهام گرفت. DOM مجازی اساسا راهی برای این است که هر زمان یک state را تغییر میدهید، نسخه‌ای از DOM داخل رم بسازید، تا بتوانید به جای رندر مجدد همه چیز، فقط بخشی که باید را بروزرسانی کنید.
به این صورت، سه علت معقول را دیدید که Vue.js می‌تواند انتخاب برتر شما باشد. امیدوارم این مقاله برای شما پر کاربرد بوده باشد و بتوانید قدمی دیگر در توسعه JavaScript بردارید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید