Vue পদ্ধতি
Vue পদ্ধতি হল ফাংশন যা 'পদ্ধতি' বৈশিষ্ট্যের অধীনে একটি Vue উদাহরণের অন্তর্গত।
আরও জটিল জিনিসগুলি করতে ইভেন্ট হ্যান্ডলিং (ভি-অন) সহ Vue পদ্ধতিগুলি ব্যবহার করা ভাল।
ইভেন্ট হ্যান্ডলিং ব্যতীত অন্য কিছু করার জন্য Vue পদ্ধতি ব্যবহার করা যেতে পারে।
Vue 'পদ্ধতি' বৈশিষ্ট্য
এই টিউটোরিয়ালে আমরা ইতিমধ্যেই একটি Vue অ্যাট্রিবিউট ব্যবহার করেছি, 'ডেটা' অ্যাট্রিবিউট, যেখানে আমরা মান সংরক্ষণ করতে পারি।
'পদ্ধতি' নামে আরেকটি Vue বৈশিষ্ট্য রয়েছে যেখানে আমরা একটি Vue উদাহরণের সাথে সম্পর্কিত ফাংশনগুলি সংরক্ষণ করতে পারি। একটি পদ্ধতি এই মত একটি Vue উদাহরণে সংরক্ষণ করা যেতে পারে:
const app = Vue.createApp({
data() {
return {
text: ''
}
},
methods: {
writeText() {
this.text = 'Hello World!'
}
}
})টিপ:
এটি একটি পদ্ধতির ভিতরে থেকে একটি ডেটা বৈশিষ্ট্য উল্লেখ করতে। একটি উপসর্গ হিসাবে লিখতে হবে।
<div> উপাদানটি ক্লিক করা হলে 'writeText' পদ্ধতিতে কল করার জন্য আপনি নীচের কোডটি লিখতে পারেন:
<div v-on:click="writeText"></div>উদাহরণ এই মত দেখায়:
'ক্লিক' ইভেন্ট শোনার জন্য <div> উপাদানে v-on পদ্ধতি ব্যবহার করা হয়। যখন 'ক্লিক' ইভেন্টটি ঘটে তখন 'writeText' পদ্ধতি বলা হয় এবং পাঠ্য পরিবর্তন করা হয়।
<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>আপনার নিজস্ব Vue সার্ভার পান
ইভেন্ট অবজেক্ট সহ একটি পদ্ধতি কল করুন
একটি ইভেন্ট ঘটলে যখন একটি মেথড কল করা হয়, তখন ইভেন্ট অবজেক্টটি পদ্ধতির সাথে ডিফল্টরূপে প্রেরণ করা হয়। এটি খুবই সুবিধাজনক কারণ ইভেন্ট অবজেক্টে অনেক দরকারী ডেটা থাকে, যেমন টার্গেট অবজেক্ট, ইভেন্টের ধরন বা মাউসের অবস্থান যখন 'ক্লিক' বা 'মাউসমুভ' ঘটনা ঘটে।
'মাউসমুভ' ইভেন্ট শোনার জন্য <div> উপাদানে v-on পদ্ধতি ব্যবহার করা হয়। 'মাউসপস' পদ্ধতি বলা হয় যখন 'মাউসমুভ' ইভেন্টটি ঘটে এবং ইভেন্টটিকে ডিফল্টভাবে অবজেক্ট পদ্ধতির সাথে পাস করা হয় যাতে আমরা মাউস পয়েন্টার অবস্থান পেতে পারি।
এটি পদ্ধতি থেকে Vue ইভেন্ট ডেটা বৈশিষ্ট্য থেকে "xPos" উপস্থাপন করতে। উপসর্গ ব্যবহার করতে হবে।
<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-বাইন্ড দ্বারা 'xPos'-এর সাথে আবদ্ধ যাতে hsl 'hue' মান 'xPos'-এর সমান সেট করা হয়।
<div
v-on:mousemove="mousePos"
v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}">
</div>নীচের উদাহরণে, ইভেন্ট অবজেক্টটি <textarea> ট্যাগ থেকে পাঠ্যটি নেয় যেন আমরা একটি নোটবুকের ভিতরে লিখছি।
v-on পদ্ধতিটি <textarea> ট্যাগে 'ইনপুট' ইভেন্টকে কল করার জন্য ব্যবহার করা হয় যেটি যখনই পাঠ্য ক্ষেত্রের উপাদানের মধ্যে পাঠ্যের মধ্যে কোনো পরিবর্তন হয়।
'writeText' পদ্ধতি বলা হয় যখন 'ইনপুট' ইভেন্টটি ঘটে এবং <textarea> ট্যাগ থেকে পাঠ্য পেতে ইভেন্ট অবজেক্ট পদ্ধতির সাথে ডিফল্টভাবে পাস করা হয়। Vue উদাহরণে 'টেক্সট' বৈশিষ্ট্য 'writeText' পদ্ধতি দ্বারা আপডেট করা হয়। একটি স্প্যান উপাদান 'টেক্সট' মানকে ডবল কোঁকড়া ধনুর্বন্ধনী সিনট্যাক্স সহ প্রদর্শনের জন্য সেট করা হয়েছে এবং Vue দ্বারা স্বয়ংক্রিয়ভাবে আপডেট করা হয়।
<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>পাশ আর্গুমেন্ট
কখনও কখনও আমরা একটি পদ্ধতিতে একটি যুক্তি পাস করতে চাই যখন একটি ঘটনা ঘটে।
ধরা যাক আপনি একজন রেঞ্জার হিসাবে কাজ করেন এবং মুস দেখার সংখ্যা গণনা করতে চান। কখনও কখনও একটি বা দুটি ইঁদুর দেখা যায়, অন্য সময় দিনে 10টির বেশি মুস দেখা যেতে পারে। আমরা ভিউ গণনা করতে '+1' এবং '+5' বোতাম যোগ করেছি, এবং যদি আমরা আরও গণনা করি তবে একটি '-1' বোতাম।
এই ক্ষেত্রে, আমরা তিনটি বোতামের জন্য একই পদ্ধতি ব্যবহার করতে পারি, এবং একটি যুক্তি হিসাবে একটি ভিন্ন নম্বর সহ বিভিন্ন বোতাম থেকে পদ্ধতিটিকে কল করতে পারি। একটি যুক্তি দিয়ে একটি পদ্ধতি কল কিভাবে:
<button v-on:click="addMoose(5)">+5</button>'addMoose' পদ্ধতিটি দেখতে কেমন তা এখানে:
methods: {
addMoose(number) {
this.count = this.count + number
}
}আসুন দেখি কিভাবে একটি পদ্ধতিতে একটি আর্গুমেন্ট পাস করা একটি পূর্ণ উদাহরণে কাজ করে।
<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+=number
}
}
})
app.mount('#app')
</script>একটি যুক্তি এবং একটি ঘটনা বস্তু উভয় পাস
আপনি যদি ইভেন্ট অবজেক্ট এবং অন্য একটি আর্গুমেন্ট পাস করতে চান তবে আপনি একটি সংরক্ষিত নাম '$event' ব্যবহার করতে পারেন যেখানে পদ্ধতিটি বলা হয়, যেমন:
<button v-on:click="addAnimal($event, 5)">+5</button>Vue উদাহরণের পদ্ধতিটি কেমন দেখাচ্ছে তা এখানে:
methods: {
addAnimal(e, number) {
if(e.target.parentElement.id==="tigers"){
this.tigers = this.tigers + number
}
}
}একটি ইভেন্ট অবজেক্ট এবং একটি পদ্ধতিতে অন্য একটি যুক্তি উভয়কে কীভাবে পাস করা যায় তা দেখতে একটি উদাহরণ দেখি।
এই উদাহরণে আমাদের পদ্ধতি ইভেন্ট অবজেক্ট এবং একটি পাঠ্য উভয়ই গ্রহণ করে।
<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 += 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+=number
}
else if(e.target.parentElement.id==="moose") {
this.moose+=number
}
else {
this.kangaroos+=number
}
}
}
})
app.mount('#app')
</script>ভিউ টিউটোরিয়াল
ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন
প্রশিক্ষণ:
অনুপস্থিত কোডটি লিখুন যাতে <div> ট্যাগ ক্লিক করার সময় 'writeText' পদ্ধতি কল করা হয়।
<div id="app">
<p>Click on the box below:</p>
<div ==>
{{ text }}
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: ''
}
},
: {
writeText() {
this. = 'Hello World!'
}
}
})
app.mount('#app')
</script>