داده ها (data)
اینجا با «گزینه data ویو» آشنا می شویم. «گزینه» یعنی تنظیمات نمونه. مثل دفترچه نمرات است که اطلاعات پایه را نگه می دارد.
تعریف و کاربرد گزینه data
گزینه «data» یک تابع است. این تابع یک شیء برمی گرداند. داخل آن، ویژگی های داده قرار می گیرد.
می توانی کل شیء را با this.$data ببینی. همچنین هر ویژگی را با this.count یا this.$data.count بخوان.
اگر نام داده با «$» یا «_» شروع شود، فقط از this.$data قابل دسترسی است. راه دیگری ندارد.
نمونه کد
<template>
<div>
<h2>پیام: {{ msg }}</h2>
<p>شمارنده: {{ count }}</p>
<button @click="inc">افزایش</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello World!';
count: 0;
$secret: 'only via $data';
_hidden: true;
};
},
methods: {
inc() {
this.count = this.count + 1;
}
}
};
<\/script>
گام های عملی
- لیست داده هایت را مشخص کن.
- آن ها را در تابع data برگردان.
- از this برای خواندن و تغییر استفاده کن.
نکته: داده های مشتق را در computed نگهدار. سبک تر است.
هشدار: افزودن ویژگی جدید بعد از اجرا ممکن است گیج کننده باشد. بهتر است از اول تعریف شود.
جمع بندی سریع
- data یک تابع بازگرداننده شیء است.
- this.$data کل داده ها را نشان می دهد.
- $ و _ فقط با this.$data در دسترس اند.
- تعریف اولیه، از سردرگمی جلوگیری می کند.
برای مرور کلی، به گزینه های نمونه برو. همچنین درباره متدها در methods ادامه بده. و اینجا با لنگر گزینه data ویو دوباره مراجعه کن.