آموزش راه اندازی اولین پروژه ی VueJS


یاد گیری یک فریمورک جدید می‌تواند برای هر برنامه‌نویسی سخت باشد.، به خصوص برای شخصی که هنوز در حال یادگیری زبان پایه ای است که خود vue از آن ساخته شده است. (که در اینجا زبان Javascript است). به همین دلیل تصمیم گرفتیم که مجموعه ‌ای از آموزش‌ های مقدماتی فریمورک Vue.js، به طوری که برای همه تازه ‌کارها قابل‌فهم باشد، را ارائه دهیم.

ما فرض می‌کنیم شما هنوز در حال یادگیری هستید و برای شروع کار با Vue.js نیازی نیست که حتماً یک برنامه‌نویس با تجربه باشید اما باید حداقل آشنایی را با HTML، CSS و Javascript داشته باشید.

هدف از این مقاله، آشنایی جزئی با فریمورک Vue است. در این مقاله می آموزید که چگونه یک پروژه جدید را با فریمورک Vue راه‌اندازی کنید.

استفاده از Vue به عنوان یک کتابخانه

Vue یک فریمورک است اما گاهی اوقات لازم است که از آن به عنوان یک کتابخانه به کار برده شود، همان‌طور که در مثال ها استفاده خواهیم کرد.

برای راه ‌اندازی یک پروژه مبتنی بر Vue راه‌ های مختلفی وجود دارد. این راه‌ ها به سه دسته کلی تقسیم می‌ شوند:

· استفاده از script به صورت مستقیم (CDN)

· استفاده از NPM

· استفاده از CLI

در این مقاله تنها از ساده ‌ترین حالت یعنی CDN استفاده می ‌شود و راه‌ های دیگر که در پرژه ‌های عملی و بزرگ بیشتر کاربرد دارند در مقاله های بعدی بررسی خواهند شد.

برای شروع کافی است که یک فایل index.html بسازید و محتویات آن را مانند کد زیر تغییر دهید.

<html>
    <head>
        <title>SokanAcademy.com VueJS Course</title>
    </head>
    <body>
        <h1>Hello Vue.js!</h1
        <div id="myApp"></div>
    </body>
</html>

 در حال حاضر شما یک فایل HTML دارید که هنوز کتابخانه Vue را در آن به کار نبرده اید. برای استفاده از کتابخانه Vue کافی است که CDN مربوط به آن را درست قبل از بسته شدن تگ body (یعنی قبل از <body/>) به فایل HTML اضافه کنید.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

با انجام این کار شما به کتابخانه Vue دسترسی دارید و می ‌توانید از آن بهره ببرید. برای استفاده از کتابخانه Vue باید یک script دیگر (مانند script پایین) را ایجاد کرده و می‌توانید با ساختن یک نمونه از  Vue،  کدهای مربوط به Vue را در این قسمت بنویسید.

<script>
    const app = new Vue({
        el: '#myApp',
        data: {
            myLocalProperty: 'Im a local property value'
        }
    });
</script>

از آنجا که ممکن است در قسمت‌های مختلفی از Vue استفاده شود، برای هر کدام از آن‌ ها می ‌توان یک اسم خاص در نظر گرفت که در اینجا از اسم app برای این اِلِمان استفاده شده است، که به صورت یک متغیر غیرقابل تغییر تعریف می‌شود.

پس از اضافه کردن کتابخانه Vue، توسط دستور

New Vue()

می‌توانیم از این کتابخانه استفاده کنیم. به عبارت دیگر، با تعریف یک نمونه جدید از این کتابخانه می‌توانیم همانند یک تابع با Vue برخورد کنیم و با وارد کردن داده‌ها به عنوان ورودی این تابع، خروجی را در متغیر  appو همچنین در قسمت myApp ببینیم .

ورودی‌های vue به شکلی که در مثال بالا دیده ایم تعریف می‌شود و به صورت دو آبجکت که یکی (el) برای محل نشان دادن خروجی ها و دیگری  (data)برای داده‌ها و اطلاعات ورودی است که ما به نام متغیر از آن‌ها یاد کرده و هرکدام برای هدف مشخصی کاربرد دارند.

1. el: در این script از یک property به اسم el استفاده شده است. این property برای شناسایی اِلِمانی به کار برده شده که کدهای Vue باید در آنجا اجرا شوند. برای شناسایی یک اِلِمان از id استفاده می ‌شود همان‌طور که در اینجا برای مقدار "myApp" در نظر گرفته شده است.

2. data :data یک آبجکت جاواسکریپتی است. هر نمونه (instance) Vue دارای یک حافظه محلی (local storage) است که مجموعه‌ ای از متغیرها و property ها را در خود جای می‌ دهد و در زمان کدنویسی می‌ توان از آن‌ها استفاده کرد. در این پروژه یک متغیر به اسم myLocalProperty  تعریف شده که درون آبجکت data قرار گرفته است. اسم آن myLocalProperty است و مقدار آن که در سمت راست آن نوشته شده یک رشته به صورت "I am a local property value" است.

نمایش property ها در برنامه

اگر فایل index.html را در مرورگر باز کنید صفحه زیر را خواهید دید که در عمل از داده ‌هایی که در script دوم نوشته شد، استفاده‌ نشده است.

 

برای استفاده از متغیر موجود در قسمت data کافی است آن‌ را مطابق کد زیر در اِلِمان موردنظر از فایل HTML به کار برد.

<html>
    <head>
        <title>SokanAcademy.com Vue.js course</title>
    </head>
    <body>
        <h1>Hello Vue.js!</h1>
        <div id="myApp">
            <p>My local property: {{ myLocalProperty }}</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#myApp',
                data: {
                    myLocalProperty: 'Im a local property value'
                }
            });
        </script>
    </body>
</html>

تغییرات جدید مطابق کد پایین است که با قرار دادن متغیر myLocalProperty درون یک اِلِمان p انجام شده است.

<div id="myApp">
<p>My local property: {{ myLocalProperty }}</p>
</div>

در این کد متغیر myLocalProperty  تعریف شده است به عبارتی به جای این که از رشته “I am a local property value” درون اِلِمان p از myApp استفاده شود، از معادل آن که متغیر myLocalProperty است، استفاده شد. احتمالاً تا حالا متوجه شده‌ اید برای این که یک متغیر را بخواهید به طور مستقیم درون یک اِلِمان به کار ببرید باید آن را درون {{ }} قرار دهید.

پیشنهاد می ‌شود برای یادگیری بیشتر این مقاله، متغیرهای جدیدی از انواع مختلف تعریف کرده و از آن‌ها در کدی که نوشته‌ اید، استفاده کنید.

واکنش ‌پذیری

شاید تا به حال شنیده باشید که Vue یک فریمورک واکنش ‌پذیر است؛ اما دلیل آن چیست؟

برای درک این موضوع، در یک صفحه‌ از مرورگر که پروژه‌ را در آن راه ‌اندازی کرده‌اید پس از باز کردن کنسول، مقدار متغیر myLocalProperty را مانند پایین تغییر دهید:

app.myLocalProperty = 'Vue is reactive';

فقط کافی ست که این عبارت را در کنسول وارد کنید و سپس کلید enter را بزنید. حالا اگر دقت کنید مقدار رشته “I am a local property value” که قبلاً نوشته بودید به رشته "Vue is reactive" تغییر پیدا کرده و در مرورگر هم به‌روزرسانی شده است. دقت کنید که حتماً قبل از اسم متغیر باید از کلمه app (همان اسمی است که در ابتدای پروژه تعریف شد) استفاده کنید، زیرا این متغیر تنها در این قسمت استفاده شده و Vue این متغیر را تنها در app می‌شناسد.

پس احتمالاً تا حالا متوجه شده‌ اید که منظور از واکنش‌ پذیری Vue این است که با ایجاد یک تغییر در نمونه Vue، در همان لحظه تغییرهای موردنظر روی اِلِمان‌ ها اِعمال می ‌شوند و به‌روزرسانی پروژه انجام می ‌شود.

قسمت اول آموزش Vue در اینجا به پایان می‌رسد. منتظر بخش‌ های بعدی این آموزش باشید تا با این آموزش‌ های گام‌به‌گام بتوانید Vue را آسان‌ تر یاد بگیرید.


لیست نظرات
کاربر میهمان
دیدگاه شما چیست؟
کاربر میهمان
کاربر میهمان
کاربر میهمانمن یک کاربر مهمان هستم
۱۴۰۰/۰۱/۲۲
چه برنامه‌ای رو باید نصب کنیم‌تا باهاش کار کنیم؟
amirbarca
amirbarca
۱۴۰۰/۰۱/۱۶
عالی بود ممنون
پویا فردوسی
پویا فردوسیبرنامه نویسی پایتون و تقریبا پی ایچ پی
۱۳۹۹/۱۲/۲۶
از این دوره خوشحالم ولی
می‌توانیم از این کتابخانه استفاده کنیم. به عبارت دیگ، با تعریف یک نمونه جدید از این کتابخانه می‌توانیم همانند یک تابع با Vue برخورد کنیم و با وارد کردن داده‌ها به عنوان ورودی این تابع، خروجی را در متغیر appو همچنین در قسمت myApp ببینیم .
با دقت بیشتر
می‌توانیم از این کتابخانه استفاده کنیم. به عبارت دیگ،
و با دقت بیشتر
به عبارت دیگ،
متوجه می شویم ر جا مانده