با نحوه استفاده از اتصال داده در Vue با دستورات درون یابی، v-bind و v-model آشنا شوید.
اتصال داده ها در برنامه های وب، پیوندی بین نمونه برنامه و رابط کاربری (واسط کاربری) ایجاد می کند. نمونه برنامه داده‌ها، رفتار و اجزا را مدیریت می‌کند، در حالی که رابط کاربری نمایانگر جنبه بصری است که کاربران با آن تعامل دارند. داده های اتصال به شما امکان می دهد برنامه های وب پویا ایجاد کنید.
در اینجا، اتصالات مختلف را در Vue بررسی خواهید کرد، از جمله اتصالات یک طرفه و دو طرفه. همچنین پیاده سازی این اتصالات را با الگوهای سبیل و دستورالعمل هایی مانند v-bind و v-model خواهید آموخت.
درون یابی در Vue
درون یابی یکی از محبوب ترین انواع اتصال داده Vue است. درون یابی به شما امکان می دهد تا مقادیر داده را در برچسب های زبان نشانه گذاری فرامتن (HTML) خود با الگوی سبیل، که معمولاً با پرانتزهای دوتایی ({{ }}) نشان داده می شود، نمایش دهید.
با الگوی سبیل، می توانید محتوای پویا برنامه مانند داده ها و ویژگی های روش را در HTML خود ادغام کنید. شما می توانید با احاطه کردن نام ویژگی های داده یا روش از شی گزینه در Vue در داخل این پرانتزهای فرفری به این امر دست یابید.
در اینجا نمونه ای از یک برنامه Vue است که از الگوی سبیل برای دستیابی به درون یابی در Vue استفاده می کند:
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ text.toUpperCase() }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "Welcome",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
</body>
بلوک کد بالا از الگوی سبیل برای نمایش مقدار ویژگی عنوان در شیء داده برنامه Vue استفاده می کند. همچنین می توانید نتایج عبارت JavaScript را با درون یابی نمایش دهید. برای مثال، عبارت {{text.toUpperCase()}} در تگ p نسخه بزرگ مقدار متن را نمایش می دهد، همانطور که در تصویر زیر نشان داده شده است:
هنگامی که یک برنامه Vue را نصب می کنید، Vue عبارات موجود در قالب ها را ارزیابی می کند و مقادیر حاصل را در بدنه HTML ارائه می کند. هر گونه تغییر در ویژگی های داده، مقادیر مربوطه را در UI به روز می کند.
مثلا:
<script>
const app = Vue.createApp({
data() {
return {
title: "Hello",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
بلوک کد بالا ویژگی عنوان را به “Hello” تغییر می دهد. این تغییر به طور خودکار در UI منعکس می شود زیرا برنامه Vue ویژگی عنوان را به عنصر UI متصل می کند، همانطور که در زیر نشان داده شده است:
درون یابی تنها زمانی داده ها را خروجی می دهد که براکت های دوتایی بین باز و بسته شدن تگ های HTML باشند.
اتصال داده های یک طرفه با دستورالعمل v-bind
مانند درون یابی، اتصال داده یک طرفه، نمونه برنامه را به رابط کاربری پیوند می دهد. تفاوت این است که ویژگی هایی مانند داده ها و متدها را به ویژگی های HTML متصل می کند.
اتصال داده های یک طرفه از جریان یک طرفه داده ها پشتیبانی می کند و از ایجاد تغییراتی که بر ویژگی های داده در نمونه برنامه تأثیر می گذارد، جلوگیری می کند. این زمانی مفید است که می‌خواهید داده‌ها را به کاربر برنامه نمایش دهید اما از تغییر آن توسط کاربر جلوگیری کنید.
می‌توانید با دستور v-bind یا کاراکتر کوتاه‌نویسی آن (:) به داده‌های یک طرفه در Vue متصل شوید.
<!-- the v-bind directive -->
<input type="text" v-bind:value="text">
<!-- the : shorthand character -->
<input type="text" :value="text">
بلوک کد استفاده از دستور v-bind و مختصر آن را برای اتصال مقدار تگ HTML ورودی به یک ویژگی داده متنی نشان می دهد. در اینجا مثالی از یک برنامه Vue است که از دستور v-bind برای دستیابی به اتصال داده یک طرفه استفاده می کند:
<body>
<div id="app">
<input type="text" v-bind:value="text">
<p>{{ text }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
در بالا، یک فیلد ورودی و یک عنصر پاراگراف، مقدار ویژگی متن را نشان می دهد. ویژگی مقدار فیلد ورودی با استفاده از دستور v-bind به ویژگی text محدود می شود.
این بلوک کد یک اتصال یک طرفه ایجاد می کند، جایی که تغییرات در ویژگی متن، مقدار فیلد ورودی را به روز می کند، اما تغییرات ایجاد شده در قسمت ورودی، ویژگی متن را در نمونه برنامه Vue به روز نمی کند.
برای نشان دادن این، می‌توانیم با مقدار اولیه ویژگی متن، «Vue is awesome!» شروع کنیم:
پس از تغییر مقدار فیلد ورودی به “Hello World!”، توجه کنید که برنامه Vue به روز نشده است و متن موجود در تگ پاراگراف ثابت می ماند:
با این حال، وقتی مقدار ویژگی text را به Hello World تغییر می دهیم! در نمونه برنامه Vue به جای فیلد ورودی، فیلد ورودی به روز می شود تا مقدار جدید را منعکس کند:
این روش اتصال داده ها در سناریوهایی مفید است که می خواهید داده ها را به کاربر نمایش دهید اما از تغییر مستقیم کاربر جلوگیری می کند. با استفاده از v-bind در Vue.js، می توانید یک اتصال یک طرفه ایجاد کنید و به راحتی داده های برنامه خود را به عناصر UI متصل کنید.
اتصال داده دو طرفه با دستورالعمل مدل v
اتصال دو طرفه داده اجازه می دهد تا تغییرات در مقدار عنصر UI به طور خودکار در مدل داده زیربنایی منعکس شود و بالعکس. اکثر چارچوب‌های جاوا اسکریپت جلویی مانند Angular از اتصال دو طرفه برای اشتراک‌گذاری داده‌ها و مدیریت رویدادهای بلادرنگ استفاده می‌کنند.
Vue.js اتصال دو طرفه را با دستور v-model امکان پذیر می کند. دستور v-model یک اتصال داده دو طرفه بین یک عنصر ورودی فرم و یک ویژگی داده ایجاد می کند. هنگامی که یک عنصر ورودی را تایپ می کنید، مقدار به طور خودکار در ویژگی داده به روز می شود و هر تغییری در ویژگی داده، عنصر ورودی را نیز به روز می کند.
در اینجا یک مثال از یک برنامه Vue است که از دستور v-model برای دستیابی به اتصال دو طرفه داده استفاده می کند:
<head>
<title>Two-way data binding in Vue</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
<p>{{ text }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
بلوک کد بالا دارای یک عنصر ورودی با دستور v-model است که آن را به ویژگی داده متن متصل می کند. ویژگی متن در ابتدا روی “Vue is awesome!” تنظیم شده است.
فیلد ورودی ویژگی متن را زمانی که در آن تایپ می‌کنید به‌روزرسانی می‌کند و تغییرات در ویژگی متن در تگ p را منعکس می‌کند. Vue.js از دستور v-model و عنصر ورودی برای دستیابی به اتصال دو طرفه داده استفاده می کند.
در حالی که v-bind امکان ارتباط یک طرفه از برنامه Vue به UI را فراهم می کند، مدل v ارتباط دو طرفه را بین برنامه Vue و UI فراهم می کند. با توجه به توانایی آن در فعال کردن ارتباط دو طرفه، مدل v اغلب هنگام کار با عناصر فرم در Vue استفاده می شود.
تخصص خود را در ساخت برنامه های Vue گسترش دهید
شما در مورد اتصال داده ها در Vue، از جمله درون یابی و دستورالعمل های v-bind و v-model یاد گرفتید. این پیوندهای داده ضروری هستند، زیرا به عنوان پایه و اساس برنامه های Vue عمل می کنند.
Vue دستورالعمل‌های زیادی برای موارد استفاده دارد، مانند رندر لیست، اتصال رویداد، و رندر شرطی. درک دستورالعمل‌های Vue به شما کمک می‌کند تا یک front-end پویا و تعاملی برای برنامه‌های وب خود بسازید.