Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Vue metodlari

Vue metodlari "methods" xususiyati ostida Vue misoliga tegishli funksiyalardir.

Vue usullaridan murakkabroq narsalarni qilish uchun hodisalarni (events) boshqarish (v-on) bilan foydalanish juda yaxshi.

Vue metodlari voqealarni boshqarishdan boshqa narsalarni qilish uchun ham ishlatilishi mumkin.

ULASHISH

Vue "metods" xossasi

Biz ushbu qo‘llanmada qiymatlarni saqlashimiz mumkin bo‘lgan "ma’lumotlar" xususiyatidan bir Vue xususiyatidan allaqachon foydalanganmiz.

Vue misoliga tegishli funksiyalarni saqlashimiz mumkin bo‘lgan "metods" deb nomlangan yana bir Vue xususiyati mavjud. Usul Vue misolida shunday saqlanishi mumkin:

const app = Vue.createApp({
  data() {
    return {
      text: ''
    }
  },
  methods: {
    writeText() {
      this.text = 'Hello World!'
    }
  }
})

Maslahat: Biz buni yozishimiz kerak. metod ichidan ma’lumotlar xususiyatiga murojaat qilish uchun prefiks sifatida.

<div> elementini bosganimizda "writeText" usulini chaqirish uchun quyidagi kodni yozishimiz mumkin:

<div v-on:click="writeText"></div>

Misol quyidagicha ko‘rinadi:

Misol

v-on direktivasi <div> elementida “klik” hodisasini tinglash uchun ishlatiladi. "Click" hodisasi sodir bo‘lganda, "writeText" usuli chaqiriladi va matn o‘zgartiriladi.

<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>
O‘zingiz sinab ko‘ring »

Voqea obyekti bilan usulni chaqiring

Voqea sodir bo‘lganda, metod chaqiriladi, hodisa (event) obyekti sukut bo‘yicha metod bilan uzatiladi. Bu juda qulay, chunki hodisa (event) obyekti juda ko‘p foydali ma’lumotlarni o‘z ichiga oladi, masalan, maqsadli obyekt, hodisa (event) turi yoki "klik" yoki "sichqonchani siljitish" hodisasi sodir bo‘lgan sichqonchaning holati.

Misol

v-on direktivasi <div> elementida “mousemove” hodisasini tinglash uchun ishlatiladi. "Mousemove" hodisasi sodir bo‘lganda, "mousePos" usuli chaqiriladi va hodisa (event) obyekti sukut bo‘yicha metod bilan yuboriladi, shuning uchun biz sichqoncha ko‘rsatkichi o‘rnini olishimiz mumkin.

Biz bundan foydalanishimiz kerak. usuldan Vue namunasi ma’lumotlar xususiyati ichidagi "xPos" ga murojaat qilish uchun prefiks.

<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>
O‘zingiz sinab ko‘ring »

Yuqoridagi misolni faqat bitta qatorga kengaytirsak, sichqoncha ko‘rsatgichining x-yo‘nalishiga qarab fon rangini o‘zgartirishimiz ham mumkin. Biz qo‘shishimiz kerak bo‘lgan yagona narsa - uslub atributidagi fon rangini o‘zgartirish uchun v-bind:

Misol

Yuqoridagi misoldan farqi shundaki, fon rangi v-bind bilan “xPos” ga bog‘langan bo‘lib, hsl “hue” qiymati “xPos” ga teng bo‘ladi.

<div
  v-on:mousemove="mousePos"
  v-bind:style="{backgroundColor:'hsl('+xPos+',80%,80%)'}">
</div>
O‘zingiz sinab ko‘ring »

Quyidagi misolda hodisa (event) obyekti <textarea> tegidan matnni olib, uni biz daftar ichida yozayotgandek ko‘rsatish uchun.

Misol

v-on direktivasi <textarea> tegida matn maydoni elementi ichidagi matn o‘zgarganda sodir bo‘ladigan “input” hodisasini tinglash uchun ishlatiladi.

"Input" hodisasi sodir bo‘lganda, "writeText" usuli chaqiriladi va hodisa (event) obyekti sukut bo‘yicha metod bilan yuboriladi, shuning uchun biz matnni <textarea> tegidan olishimiz mumkin. Vue misolidagi "matn" xususiyati "writeText" usuli bilan yangilanadi. Ikki jingalak qavslar sintaksisi bilan "matn" qiymatini ko‘rsatish uchun span elementi o‘rnatiladi va bu Vue tomonidan avtomatik ravishda yangilanadi.

<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>
O‘zingiz sinab ko‘ring »

Argumentlarni o‘tkazish

Ba’zan biz voqea sodir bo‘lganda metod bilan argument o‘tkazmoqchimiz.

Aytaylik, siz o‘rmon qo‘riqchisi bo‘lib ishlaysiz va siz buloqlarni ko‘rishni hisobga olishni xohlaysiz. Ba’zan bir yoki ikkita, ba’zida bir kun davomida 10 dan ortiq siyish ko‘rinadi. "+1" va "+5" ko‘rinishlarini hisoblash uchun tugmachalarni va agar biz juda ko‘p hisoblagan bo‘lsak, "-1" tugmachasini qo‘shamiz.

Bunday holda biz uchta tugma uchun bir xil usuldan foydalanishimiz mumkin va faqat boshqa tugmalardan argument sifatida boshqa raqam bilan usulni chaqirishimiz mumkin. Argument bilan usulni shunday chaqirishimiz mumkin:

<button v-on:click="addMoose(5)">+5</button>

Va "addMoose" usuli shunday ko‘rinadi:

methods: {
  addMoose(number) {
    this.count = this.count + number
  }
}

To‘liq misolda argumentni metod bilan o‘tkazish qanday ishlashini ko‘rib chiqamiz.

Misol

<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>
O‘zingiz sinab ko‘ring »

Argumentni ham, hodisa (event) obyektini ham o‘tkazish

Agar biz hodisa (event) obyektini ham, boshqa argumentni ham o‘tkazmoqchi bo‘lsak, biz ushbu metod chaqirilgan joyda foydalanishimiz mumkin bo‘lgan "$ voqea" nomi bor, masalan:

<button v-on:click="addAnimal($event, 5)">+5</button>

Va Vue misolidagi metod shunday ko‘rinadi:

methods: {
  addAnimal(e, number) {
    if(e.target.parentElement.id==="tigers"){
      this.tigers = this.tigers + number
    }
  }
}

Keling, hodisa (event) obyektini ham, boshqa argumentni ham metod bilan qanday o‘tkazishni ko‘rish uchun misolni ko‘rib chiqaylik.

Misol

Ushbu misolda bizning usulimiz hodisa (event) obyektini ham, matnni ham qabul qiladi.

<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>
O‘zingiz sinab ko‘ring »

Kattaroq misol

Ushbu misolda biz har bir hayvon uchun uch xil o‘sish bilan uchta turli hayvonlarni hisoblash uchun faqat bitta usuldan foydalanish mumkinligini ko‘ramiz. Biz bunga hodisa (event) obyektini ham, o‘sish raqamini ham o‘tkazish orqali erishamiz:

Misol

O‘sish hajmi va hodisa (event) obyekti tugma bosilganda metod bilan argument sifatida uzatiladi. Qaysi hayvonni sanash kerakligini aytish usuli bilan hodisa (event) obyektini o‘tkazish uchun ajratilgan "$ voqea" so‘zi ishlatiladi.

<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>
O‘zingiz sinab ko‘ring »

Vue mashqlari

O‘zingizni mashqlar bilan sinab ko‘ring

Mashq:

Yo‘qolgan kodni shunday yozingki,

tegi bosilganda 'writeText' usuli chaqiriladi.

<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>

Mashqni boshlash


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish