جلسه ۱۰ – ایجاد component در ویو جی اس

ما در این آموزش کاربردی می خوایم در مورد ایجاد ویو کامپوننت ها توضیح بدیم ویو کامپوننت ها در واقع template هایی هست که که میتونیم به وسیله اون تگ های کد اچ تی ام ال رو با توجه به کاربرد خودمون بازنویسی کنیم و به نامی که میخوایم بنویسیم که کد هامون هم قابلیت خوانایی بهتر میده و مهمتر اینکه یک کامپوننت میتونیم در چندین بار صدا بزنیم بدون اینکه نیاز باشه دوباره نویسی کنیم خب برای شرو مثالی رو در جلسه حلقه گفتیم رو در نظر بگیرید که کدشو یکبار دیگه براتون میارم
<div id=”app”>
<ul>
<li v-for=”todo in todos”>
{{ todo.text }}
</li>
</ul>
</div>
الان ما قصد داریم ایتم های لیست ها رو برای دوباره استفاده کردن به صورت کامپوننت ویو جی اس تبدیل کنیم و به شکل زیر تبدیل کنیم
<div id=”app”>
<ul>
<todo-item v-for=”todo in todos”></todo-item>
</ul>
</div>

مانند کدی که در حلقه داشتیم

var app = new Vue({
el: ‘#app’,
data: {
todos: [
{ task: ‘Learn JavaScript’},
{ task: ‘Learn VueJS’},
{ task: ‘Build awesome stuff’}
]
}
})

شی ویو جی اسمون رو میسازیم حالا برای ایجاد کامپوننت ویو جی اس خودمون بر اساس اچ تی ام ال از کد زیر استفاده می کنیم
Vue.component(‘todo-item’, {
template: ‘<li>{{ todo.task }}</li>’
})

زمانی که طبق کد بالا میخوای حلقه رو نمایش بدی می بینی که متن های todo نمایش داده نمی شوند چرا؟ چون هر ویو جی اس کامپوننت دامنه یا حوزه تعریف داده ای خودشو داره و ماباید با دستور props داده هایی که میخوایم بهش انقیاد بشه رو از قبل تعریف کنیم مانند کد زیر
Vue.component(‘todo-item’, {
props: [‘todo’],
template: ‘<li>{{ todo.task }}</li>’
})
وباید کد حلقمون هم متغییر رو که با props وابسته یا انقیادش کردیم رو بیاریم
<div id=”app”>
<ul>
<todo-item v-for=”todo in todos” v-bind:todo=”todo”></todo-item>
</ul>
</div>

با ما همراه باشید
موفق باشید

local_offerevent_note خرداد ۸, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *