تغییر property های استفاده شده

تغییر property های استفاده شده

در قسمت قبلی از این آموزش، شیوه ی استفاده از فریمورک Vue در پروژه به صورت اسکریپت مستقیم توضیح دادیم وهمچنین به بحث واکنش پذیری Vue، اشاره کردیم.
در این قسمت از آموزش، تغییر property های استفاده شده در پروژه را بررسی می‌کنیم.

کدی که قبلاً نوشته شد به صورت زیر است:

<html>
    <head>
        <title>a simple Vue.js project</title>
    </head>
    <body>
        <h1>Hello Vue.js!</h1>
        <div id="myApp">My local property: {{ myLocalProperty }}</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: 'I am a local property value'
                }
            });
        </script>
    </body>
</html>

تعریف یک رویداد (event)


برای درک بهتر واکنش‌ پذیری Vue و این که در پروژه چه‌طور می‌ توان یک property را به صورت dynamic تغییر داد، یک دکمه (button) ایجاد کرده و با استفاده از آن سعی می‌کنیم که متغیر، myLocalProperty را تغییر دهیم.
برای ایجاد یک دکمه کافی است که به خط بعد از تعریف شدن متغیر myLocalProperty رفته (البته مکان تعریف شدن این دکمه زیاد مهم نیست و تأثیری در عملکرد آن ندارد اما این دکمه باید درون اِلِمان <div id=”app”></div> تعریف شود) و مانند کد زیر یک دکمه به پروژه اضافه کنیم.

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

حالا چه‌طور باید از این دکمه در تغییر دادن property استفاده کرد؟
برای دکمه ‌ای که ساخته شد باید یک اجرا کننده رویداد (event handler) مطابق کد زیر تعریف کنیم.

<button v-on:click="myLocalProperty = 'The button has been clicked'">
Click me
</button> 

””=v-on:click در Vue به نام “Directive” شناخته می‌شود که برای کلیک کردن روی هر tag تعریف می ‌شود. دقت کنید که در ابتدای هر “Directive” از ‘ v- ’، که نشان ‌دهنده Vue است، استفاده می ‌شود.

مانند v-on:keyup, v-on:submit و ...
حالا اگر روی دکمه کلیک کنید، خواهید دید که مقدار رشته “I am a local property value” به “The button has been clicked ” تغییر پیدا می‌ کند. در واقع این دکمه و Event، آن را تعریف می‌کنند، متغیر myLocalProperty به صورت واکنش گرا (Reactive) به "The button has been clicked" تغییر داده شد.
Vue بدون توجه به پیچیدگی جزئیات بخش‌های ایجاد شده در پروژه، یک نسخه از HTML (که در اینجا فقط تگی است که از کتابخانه Vue استفاده می‌ کند یعنی <div id=”app”></div> ) را در خود ذخیره کرده و به محض اِعمال تغییرات در این قسمت از کد، فقط آن تگی که دچار تغییر شده (در اینجا تگ <p></p> است) را به‌روزرسانی می‌ کند و <tag> ‌های دیگر را دست نخورده باقی می‌ گذارد. این درحالی است که اگر به صورت مستقیم DOM با استفاده از JavaScript تغییر داده شود به دلیل این که از تغییرات جدید آگاهی ندارد، کل آن قسمت از کد Vue را به ‌روزرسانی می ‌کند. این کار برای این پروژه که بسیار کوچک است چندان تأثیری در سرعت عملکرد پروژه ندارد اما با بزرگ‌ تر شدن پروژه، سبب تضعیف عملکرد آن می ‌شود.


syntax جایگزین


اگر تا به حال به پروژه ‌های Vue دقت کرده باشید، مشاهده کرده‌اید که syntax، با کد v-on:[eventname] به دلیل طولانی بودن، چندان استفاده نمی ‌شود. برای رفع این مشکل از مدل ساده شده و کوتاه ‌تر این syntax که به صورت [eventname]@ است، استفاده می‌شود. بنابراین پیشنهاد می‌کنیم که شما هم از syntax جدید مانند کد زیر استفاده کنید:

<button @click="myLocalProperty = 'The button has been clicked'">
Click me
</button> 

توابع (متد ها)


در بیشتر اوقات زمانی که یک رویداد مانند کلیک کردن روی یک دکمه، اتفاق می ‌افتد، نیاز داریم که اتفاقاتی بیش از تغییر دادن فقط یک متغیر رخ دهد. در این صورت در پروژه خود به متدها نیاز پیدا می‌ کنیم. برای درک بهتر این موضوع، رویداد قبلی را طوری تعریف کرده که در آن علاوه بر تغییر دادن مقدار رشته قبلی، یک متن شامل یک رشته به علاوه یک عدد تصادفی نیز در خط بعد نشان دهد.
برای این کار ابتدا باید کد قبلی را مطابق کد زیر تغییر دهیم:

<button @click="buttonClicked">Click me</button>

دقت داشته باشیم که در Vue نیازی به قرار دادن () در انتهای تابع تعریف شده نیست (منظور buttonClicked است). وقتی که هیچ آرگومانی به عنوان ورودی تابع وجود ندارد نیازی به قرار دادن () نیست البته گاهی اوقات که نیاز به ورودی است باید آن را مانند ”click=”changeName(‘ali’)@ جلوی تابع نوشت.

حالا درون کد جدیدی که نوشتیم یک تابع با عنوان buttonClicked وجود دارد که باید آن را در قسمت متدها تعریف کنیم. Vue یک مکان خاص به نام methods برای تعریف کردن چنین توابعی در داخل ({})newVue اختصاص داده است. باید یک قسمت جدید به صورت {} : methods  در کنار data ایجاد کنیم تا بتوان تابع موردنظر را در آن تعریف کرد.

const app = new Vue({
                el: '#myApp',
                data: {
                    myLocalProperty: 'Im a local property value',
			 newText: ''
                },
                methods: { 
                    buttonClicked() { 
                        this.myLocalProperty = 'The button has been clicked';

                        this.newText = 'The new value is: ' + Math.floor( Math.random() * 100); 
                    }
                }
            });

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

        <div id="myApp">
            <p>My local property: {{ myLocalProperty }}</p>
            <p>{{ newText }}</p>
            <button @click="buttonClicked">Click me</button>
        </div>

مراحل کارکرد این متد به صورت زیر است:


• خاصیت methods درون Vue تعریف شد. همان‌طور که گفتیم می‌ توان توابع یا متدهای مختلف را در اینجا تعریف کرد.
• در methods تابع ()buttonClicked تعریف شد. ()buttonClicked در واقع تابعی است که با استفاده از رویداد click@ صدا زده می‌شود. در این تابع از هیچ ورودی استفاده نشده است.

• برای دست یابی به یک عدد تصادفی از ()Math.random استفاده کردیم. از آنجا که عدد به دست آمده بین 0 و 1 است، آن را در عدد 100 ضرب کرده تا عدد نهایی بین 0 تا 100 به دست آوریم.

• از آنجا که عدد به دست آمده در مرحله قبل دارای قسمت اعشاری است برای گرد کردن و یا به عبارتی حذف قسمت اعشاری عدد به دست آمده در نتایج، از ()Math.floor استفاده کردیم.

• یک متغیر جدید (newText) تعریف کردیم که مقدار آن در ابتدا خالی است اما در تابع ()buttonClicked، مقدار آن به حاصل جمع یک رشته و یک عدد، تغییر پیدا کرد. از آنجا که متغیرهای اولیه قبلاً در داخل data تعریف شدند برای دسترسی به آن‌ها کافی است از this.[prop-name] استفاده کرد. بنابراین این متغیرها به صورت زیر تعریف می‌شوند:

this.myLocalProperty = 'The button has been clicked';

this.newText = 'The new value is: ' + Math.floor( Math.random() * 100); 

هر گاه در متدها به کلمه ی this برخورد کردید، بدانید که این متد به نمونه Vue که در داخل آن کار می ‌کنیم اشاره دارد و متد یا داده ‌ای که بعد از آن می ‌آید به یقین در قسمت‌ ({})new Vue، تعریف شده است.

حالا با اجرای دوباره پروژه در مرورگر و همچنین کلیک کردن روی دکمه ی Click me تابع buttonClicked صدا زده شده و رشته "I am a local property value" به “The button has been clicked” تغییر کرده و در خط بعدی متغیر جدید که ترکیبی از یک رشته "The new value is :" و یک عدد تصادفی بین 0 تا 100 است، ایجاد شده است.

نتایج به دست آمده مانند شکل زیر است:

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

نظرات
اگر login نکردی برامون ایمیلت رو بنویس: