درکی ساده از Tamplateها در Vue

Understanding Templates in Vue

توسط

25 شهریور 1399

Vue.JS 2: درکی ساده از tamplate ها در Vue

برای شروع این جلسه کد ساده زیر را داشته باشید (چه در jsfiddle و چه در محیط محلی خودتان). برای قسمت HTML:

<!-- Put this in the HTML section in JSFiddle! -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <p>{{ title }}</p>
</div>

<p>{{ title }}</p>

</div>

برای قسمت جاوا اسکریپت:

new Vue({
    el: '#app',
    data: {
        title: 'Hello World!'
    }
})

new Vue({

el: '#app',

data: {

title: 'Hello World!'

}

})

اگر یادتان باشد این مثال، همان مثال جلسه قبل است و فقط event آن را حذف کرده ام. در کد بالا syntax خاصی به حالت {{title}} داریم که به آن string interpolation می گوییم (این یک template در Vue است). سوالی که اینجا مطرح می شود این است که چطور می توانیم از چنین syntax ای در کد HTML استفاده کنیم و اینکه چرا علامت های { و } درون کد HTML ما دیده نمی شود؟

برای پاسخ دادن به این سوال باید نحوه کار template ها را درک کنید. اولین چیزی که باید به یاد داشته باشید این است که هنگام نوشتن کدهای HTML ما هیچ کد HTML ای نمی نویسیم! یعنی چه؟ یعنی کدهایی که در فایل HTML خود قرار می دهیم (در اصل آن قسمتی که با el به یک نمونه Vue متصل شده باشند) توسط Vue دریافت شده و در پشت پرده پردازش می شود. این پردازش بر اساس template engine فریم ورک Vue انجام می شود که فعلا با آن کاری نداریم. نکته مهم این است که Vue کدهای HTML شما را گرفته و درون حافظه خود آن ها را پردازش می کند. سپس یک فایل نهایی HTML می سازد و آن کدهای نهایی را به کاربر می دهد.

برای تست این موضوع می توانید کدهای بالا یا مثال قبل را باز کرده و روی تگ <p> کلیک راست و inspect کنید. با این کار کدهای HTML صفحه را می بینید و بین آن ها اثری از کدهای Vue نیست. این مسئله به شما کمک می کند که نحوه کار Vue را بهتر درک کنید. همچنین اگر با فریم ورک هایی مانند React کار کرده باشید می دانید که آن ها هم چنین چیزی را دارند و معمولا با نام Virtual DOM به آن اشاره می شود.

نکته بعدی که به درک ما از template فریم ورک Vue کمک می کند بحث دسترسی به خصوصیات data است. در قسمت قبل مشاهده کردیم که ما می توانیم بدون ذکر هیچ پیشوندی، به طور مستقیم به این خصوصیات دسترسی داشته باشیم:

    <p>{{ title }}</p>

1	<p>{{ title }}</p>

کد بالا صحیح است اما کد زیر غلط است:

    <p>{{ data.title }}</p>

1	<p>{{ data.title }}</p>

همین مسئله در مورد متد های موجود در قسمت methods نیز صادق است. به طور مثال من کد خودم را به شکل زیر ویرایش کنم:

new Vue({
    el: '#app',
    data: {
        title: 'Hello World!'
    },
    methods: {
        sayHello: function () {
            return 'Hello!';
        }
    }
})

new Vue({

el: '#app',

data: {

title: 'Hello World!'

methods: {

sayHello: function () {

return 'Hello!';

}

})

در اینجا متدی به نام sayHello داریم که تنها کار آن برگرداندن رشته Hello است. حالا می توانم در قسمت HTML خود بدین صورت از آن استفاده کنم:

<div id="app">
    <p>{{ sayHello() }}</p>
</div>

<p>{{ sayHello() }}</p>

</div>

همانطور که می بینید نیازی به گفتن methods.sayHello نیست و فقط sayHello کفایت می کند. حواستان باشد که پرانتزها را در جلوی نام تابع قرار دهید تا اجرا شود. اگر کد بالا را اجرا کنید عبارت Hello! را در مرورگر و درون تگ <p> مشاهده خواهید کرد. دقت کنید که مقدار وارد شده بین {{ }} باید مقداری باشد که توانایی تبدیل شدن به رشته (string) را دارا باشد.

توجه کنید که تمام این موارد مربوط به زمانی است که در حال کدنویسی در HTML باشیم. زمانی که درون خود جاوا اسکریپت در حال کدنویسی هستیم باید به شکل دیگری رفتار کنیم. به طور مثال اگر بخواهیم تابع sayHello به جای رشته Hello مقدار title را برگرداند نمی توانیم آن را به شکل زیر بنویسیم:

new Vue({
    el: '#app',
    data: {
        title: 'Hello World!'
    },
    methods: {
        sayHello: function () {
            return title;
        }
    }
})

new Vue({

el: '#app',

data: {

title: 'Hello World!'

methods: {

sayHello: function () {

return title;

}

})

روش صحیح انجام این کار به شکل زیر خواهد بود:

new Vue({
    el: '#app',
    data: {
        title: 'Hello World!'
    },
    methods: {
        sayHello: function () {
            return this.title;
        }
    }
})

new Vue({

el: '#app',

data: {

title: 'Hello World!'

methods: {

sayHello: function () {

return this.title;

}

})

همانطور که می دانید در جاوا اسکریپت عادی نمی توانیم چنین کاری انجام بدهیم چرا که کلیدواژه this در اینجا به data.title اشاره نمی کند بلکه به Scope خود تابع SayHello اشاره خواهد داشت. خوشبختانه Vue برای اینکه کار کدنویسی ما را راحت تر کند به ما اجازه می دهد که از this.title استفاده کنیم.

حالا بیایید کمی پیشرفته تر عمل کنیم. اگر در data خصوصیتی به نام link داشته باشیم که لینکی را در خودش داشته باشد:

new Vue({
    el: '#app',
    data: {
        title: 'Hello World!',
        link: 'http://google.com'
    },
    methods: {
        sayHello: function () {
            return this.title;
        }
    }
})

new Vue({

el: '#app',

data: {

title: 'Hello World!',

link: 'http://google.com'

methods: {

sayHello: function () {

return this.title;

}

})

حالا اگر بخواهیم این لینک را درون HTML خود نمایش بدهیم می گوییم:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
    <p>{{ sayHello() }} - <a href="{{link}}">Google</a></p>
</div>

<p>{{ sayHello() }} - <a href="{{link}}">Google</a></p>

</div>

با این کار خروجی زیر را می گیریم:

Hello World! – Google

البته Google به صورت یک لینک خواهد بود. حالا اگر روی این لینک کلیک کنیم مشکل ما حل می شود؟ خیر! با کلیک روی Google می بینید که آدرس آن یک آدرس عجیب و غریب است. مثلا لینکی که در jsfiddle به من داده می شود به صورت زیر است:

https://fiddle.jshell.net/_display/%7B%7Blink%7D%7D

اگر با URL ها آشنا باشید می دانید که 7B برابر با } است بنابراین آدرس بالا در ادامه سایت فعلی و به صورت encode شده برای URL ها خواهد بود. یعنی سعی دارد دقیقا به لینکی با آدرس زیر برود:

مسئله این است که ما نمی توانیم از {{}} برای هر چیزی در HTML استفاده کنیم. قبلا هم گفتم که زمانی می توانید از {{}} استفاده کنید که مقدار مورد نظر شما یک متن و رشته عادی باشد نه لینک و نه چیز دیگر. برای حل مشکل بالا باید از یکی از directive های Vue استفاده کنیم:

<div id="app">
    <p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p>
</div>

<p>{{ sayHello() }} - <a v-bind:href="link">Google</a></p>

</div>

v-bind به Vue می گوید که آرگومان پاس داده شده را به جای استفاده مستقیم، به مقدار مورد نظرش bind کن (بچسبان). آرگومان پاس داده شده href و مقدار آن خصوصیت link است (بدون علامت های { }) بنابراین Vue مقدار درون link را به خصوصیت href می چسباند و آن را در نهایت درون HTML نمایش می دهد. حالا اگر روی Google کلیک کنید واقعا به آدرس Google برده می شوید:

Hello World! – Google

نکته مهم: شما می توانید از این روش برای bind کردن تمام attribute های HTML استفاده کنید

دسترسی به کد این جلسه

ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند: