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

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

<html>
    <head>
        <title>a simple Vue.js project</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)برای داده ها و اطلاعات ورودی است که ما به نام متغیر از آن ها یاد کرده و هرکدام برای هدف مشخصی کاربرد دارند.

el: در این script از یک property به اسم el استفاده شده است. این property برای شناسایی المانی به کار برده شده که کدهای Vue باید در آنجا اجرا شوند. برای شناسایی یک المان از id استفاده می ‌شود همانطور که در اینجا برای id، مقدار "myApp" در نظر گرفته شده است.
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>simple Vue.js project</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 در اینجا به پایان می‌رسد. سایر روش ها نیز در بخش‌ های بعدی این فصل بررسی شده اند.

راه اندازی پروژه Vuejs با CDN