متدها (Methods)
«متد (Method)» یعنی تابع مخصوص یک کامپوننت. در «متدهای Vue» کد پیچیده را جدا می نویسیم. سپس با رویدادها اجرا می کنیم. این کار کد را تمیز و قابل فهم می کند.
خاصیت methods در Vue
در شیء اپ، کنار «داده (Data)»، بخشی به نام methods داریم. آن جا توابع را می گذاریم و با this به داده ها دسترسی می گیریم.
const app = Vue.createApp({
data() {
return {
text: ''
};
},
methods: {
writeText() {
this.text = 'Hello World!';
}
}
});
فراخوانی متد با v-on
با «رویداد (Event)» مثل کلیک، متد را صدا می زنیم. متن روی جعبه تغییر می کند.
<div id="app">
<p>Click on the box below:</p>
<div v-on:click="writeText">
{{ text }}
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: ''
};
},
methods: {
writeText() {
this.text = 'Hello World!';
}
}
});
app.mount('#app');
<\/script>
نکته: داخل متدها برای دسترسی به data از پیشوند this. استفاده کن.
دریافت شیء رویداد (Event Object)
وقتی رویداد رخ می دهد، شیء «event» خودکار می آید. با آن به اطلاعات کلیک و ماوس دسترسی داری.
<div id="app">
<p>Move the mouse pointer over the box below:</p>
<div v-on:mousemove="mousePos"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
xPos: 0,
yPos: 0
};
},
methods: {
mousePos(event) {
this.xPos = event.offsetX;
this.yPos = event.offsetY;
}
}
});
app.mount('#app');
<\/script>
بستن استایل با v-bind
با v-bind:style رنگ پس زمینه را به موقعیت ماوس وابسته کن.
<div
v-on:mousemove="mousePos"
v-bind:style="{ backgroundColor: 'hsl(' + xPos + ',80%,80%)' }">
</div>
نمونه ورودی: textarea و متد
با هر «ورودی (Input)» متن در داده ها به روز می شود. نمایش همزمان انجام می شود.
<div id="app">
<textarea v-on:input="writeText" placeholder="Start writing.."></textarea>
<span>{{ text }}</span>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: ''
};
},
methods: {
writeText(event) {
this.text = event.target.value;
}
}
});
app.mount('#app');
<\/script>
ارسال آرگومان به متد
یک متد، چند دکمه؛ هر دکمه مقدار متفاوت می فرستد. شمارش را کنترل کن.
<div id="app">
<img src="img_moose.jpg">
<p>{{ 'Moose count: ' + count }}</p>
<button v-on:click="addMoose(+1)">+1</button>
<button v-on:click="addMoose(+5)">+5</button>
<button v-on:click="addMoose(-1)">-1</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
};
},
methods: {
addMoose(number) {
this.count = this.count + number;
}
}
});
app.mount('#app');
<\/script>
آرگومان + شیء event با $event
هم رویداد را بده، هم مقدار اضافه. از $event استفاده کن.
<div id="app">
<img
src="img_tiger.jpg"
id="tiger"
v-on:click="myMethod($event, 'Hello')">
<p>{{ msgAndId }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
msgAndId: ''
};
},
methods: {
myMethod(e, msg) {
this.msgAndId = msg + ', ';
this.msgAndId = this.msgAndId + e.target.id;
}
}
});
app.mount('#app');
<\/script>
نمونه بزرگ: یک متد برای چند حیوان
با یک متد و $event سه حیوان را با افزایش های مختلف بشمار.
<div id="app">
<div id="tigers">
<img src="img_tiger.jpg">
<button v-on:click="addAnimal($event, 1)">+1</button>
<button v-on:click="addAnimal($event, 5)">+5</button>
<button v-on:click="addAnimal($event, -1)">-1</button>
</div>
<div id="moose">
<img src="img_moose.jpg">
<button v-on:click="addAnimal($event, 1)">+1</button>
<button v-on:click="addAnimal($event, 5)">+5</button>
<button v-on:click="addAnimal($event, -1)">-1</button>
</div>
<div id="kangaroos">
<img src="img_kangaroo.jpg">
<button v-on:click="addAnimal($event, 1)">+1</button>
<button v-on:click="addAnimal($event, 5)">+5</button>
<button v-on:click="addAnimal($event, -1)">-1</button>
</div>
<ul>
<li>Tigers: {{ tigers }}</li>
<li>Moose: {{ moose }}</li>
<li>Kangaroos: {{ kangaroos }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
tigers: 0,
moose: 0,
kangaroos: 0
};
},
methods: {
addAnimal(e, number) {
if (e.target.parentElement.id === 'tigers') {
this.tigers = this.tigers + number;
} else if (e.target.parentElement.id === 'moose') {
this.moose = this.moose + number;
} else {
this.kangaroos = this.kangaroos + number;
}
}
}
});
app.mount('#app');
<\/script>
گام های عملی
- داده های لازم را در
dataبساز. - متدها را در
methodsتعریف کن. - با
v-onمتد مناسب را فراخوانی کن.
جمع بندی سریع
- متدهای Vue توابع عضو کامپوننت هستند.
- با
thisبه داده ها دسترسی بگیر. - رویدادها متدها را اجرا می کنند.
$eventشیء رویداد را منتقل می کند.
برای ادامه یادگیری، متدهای Vue را کنار اصلاح کننده های رویداد تمرین کن.