• آموزش آسان فریم ورک محبوب Vue.js – قسمت اول
• آموزش آسان فریم ورک محبوب Vue.js – قسمت دوم
• آموزش آسان فریم ورک محبوب Vue.js – قسمت سوم

استفاده از دستورهای استاندارد

اجازه دهید کامپوننت Hello را درست کنیم تا با دستورات Vue.js بیشتر آشنا شویم.

v-for

دستور v-for در واقع یک حلقه است که اجازه می دهد تا عناصری را به صورت چند باره با توجه به داده های منبع، تکرار کنیم.مثلا با استفاده از آن می توانید محتویات یک آرایه را نمایش دهید. اول یک آرایه را به آبجکتی که توسط متد data کامپوننت برگشت داده می شود، اضافه کنید:

users: [
{firstname: 'Sebastian', lastname: 'Eschweiler'},
{firstname: 'Bill', lastname: 'Smith'},
{firstname: 'John', lastname: 'Porter'}
],

بعد از دستور v-for استفاده می کنیم تا هر بار یک ردیف از داده های آرایه که شامل firstname و lastname می شود را نمایش دهد:

<div>
<ul>
<li v-for="user in users">
{{user.firstname}} {{user.lastname}}
</li>
</ul>
</div>

v-model

دستور v-model یک اتصال 2 طرفه روی یک input یا کامپوننت ایجاد می کند. فقط باید یک property در آبجکت برگشتی data ایجاد کنید:

input_val: ''

حالا از دستور استفاده کنید تا مقدار input را به این property متصل کند.

<div>
<input type="text" v-model="input_val">
</div>

با استفاده از دستور فوق ما 2 تغییر خواهیم داشت:

• هر موقع کاربر چیزی را در فیلد Input تایپ کند، آن مقدار بلافاصله داخل property مربوط یعنی input_val قرار می گیرد.
• اگر ما مقدار property فوق را در برنامه عوض کنیم، هم بلافاصله مقداری فیلد Input عوض خواهد شد.

v-text

وقتی از دستور فوق استفاده می کنید در واقع محتوای متنی یک تگ یا بخش را مشخص می کنید.می توانید از آن به عنوان یک جایگزین برای ساختار {{ … }} استفاده کنید وقتی که محتوای متنی کامل باید ست شود.مثلا می توانیم از این دستور برای نمایش مقدار input_val به کاربر استفاده کنیم:

Input Value: <span v-text="input_val"></span>

نتیجه گیری

کد کامل کامپوننت Hello که در بالا پیاده سازی کردیم این کد خواهد بود:

<template>
<div class="hello">
<h1>{{ msg }}</h1>
<hr />
<div>
<ul>
<li v-for="user in users">
{{user.firstname}} {{user.lastname}}
</li>
</ul>
</div>
<hr />
<div>
<input type="text" v-model="input_val">
</div>
<div>
Input Value: <span v-text="input_val"></span>
</div>
<hr />
<div>
<button class="btn btn-primary" v-on:click="counter++">You've clicked this button {{counter}} times!</button>
</div>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App',
users: [
{firstname: 'Sebastian', lastname: 'Eschweiler'},
{firstname: 'Bill', lastname: 'Smith'},
{firstname: 'John', lastname: 'Porter'}
],
input_val: '',
counter: 0
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-position: inside;
}
a {
color: #42b983;
}
</style>

نتیجه نمایش کامپوننت فوق به این شکل خواهد بود:

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

منبع