Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Vue hodisa modifikatorlari

Vue-dagi voqea modifikatorlari voqealar qanday usullarni ishga tushirishini o‘zgartiradi va hodisalarni (events) yanada samarali va sodda tarzda boshqarishga yordam beradi.

Voqea modifikatorlari Vue v-on direktivasi bilan birgalikda ishlatiladi, masalan:

  • HTML shakllarining standart yuborish xatti-harakatlarini oldini olish (v-on:submit.prevent)
  • Hodisa sahifa yuklangandan keyin faqat bir marta ishlashi mumkinligiga ishonch hosil qiling (v-on:click.once)
  • Usulni ishga tushirish uchun hodisa (event) sifatida qaysi klaviatura tugmasidan foydalanishni belgilang (v-on:keyup.enter)
ULASHISH

v-on Direktivini qanday o‘zgartirish mumkin

Voqea modifikatorlari voqeaga qanday munosabatda bo‘lishni batafsilroq aniqlash uchun ishlatiladi.

Biz hodisa (event) modifikatorlaridan avval ko‘rganimizdek tegni hodisaga ulash orqali foydalanamiz:

<button v-on:click="createAlert">Create alert</button>

Endi tugmani bosish hodisasi sahifa yuklangandan keyin faqat bir marta yonishi kerakligini aniqroq aniqlash uchun biz .once modifikatorini qo‘shishimiz mumkin, masalan:

<button v-on:click.once="createAlert">Create alert</button>

Mana .once modifikatoriga misol:

Misol

.once modifikatori <button> tegida faqat “klik” hodisasi birinchi marta sodir bo‘lganda usulni ishga tushirish uchun ishlatiladi.

<div id="app">
  <p>Click the button to create an alert:</p>
  <button v-on:click.once="createAlert">Create Alert</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("Alert created from button click")
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Eslatma: Hodisa modifikatorlarini ishlatish o‘rniga, hodisani metod ichida boshqarish ham mumkin, ammo voqea modifikatorlari buni ancha osonlashtiradi.

Turli xil v-on modifikatorlari

Voqea modifikatorlari turli vaziyatlarda qo‘llaniladi. Biz klaviatura hodisalarini, sichqonchani bosish hodisalarini tinglashda hodisa (event) modifikatorlaridan foydalanishimiz mumkin va hatto hodisa (event) modifikatorlarini bir-biri bilan birgalikda ishlatishimiz mumkin.

.once hodisa (event) modifikatoridan klaviatura va sichqonchani bosish hodisalaridan keyin ham foydalanish mumkin.

Klaviatura tugmalari hodisasi modifikatorlari

Bizda uchta turli xil klaviatura hodisasi turlari mavjud.

Har bir asosiy hodisa (event) turi bilan biz asosiy voqea sodir bo‘lgandan keyin qaysi kalitni tinglashni aniq belgilashimiz mumkin. Bizda .space, .enter, .w va .up mavjud.

Muayyan kalitning qiymatini o‘zingiz topish uchun siz asosiy voqeani veb-sahifaga yoki console.log(event.key) yordamida konsolga yozishingiz mumkin:

Misol

Klaviatura hodisasi “getKey” usulini ishga tushiradi va hodisa (event) obyektidagi “kalit” qiymati konsolga va veb-sahifaga yoziladi.

<input v-on:keydown="getKey">
<p> {{ keyValue }} </p>
data() {
  return {
    keyValue = ''
  }
},
methods: {
  getKey(evt) {
    this.keyValue = evt.key
    console.log(evt.key)
  }
}
O‘zingiz sinab ko‘ring »

Shuningdek, biz sichqonchani bosish yoki tugmani bosish tizim o‘zgartiruvchi tugmalar .alt, .ctrl, .shift yoki .meta bilan birgalikda sodir bo‘lgandagina sodir bo‘ladigan hodisani cheklashni tanlashimiz mumkin. Tizim o‘zgartiruvchi kaliti .meta Windows kompyuterlarida Windows kalitini yoki Apple kompyuterlarida buyruq tugmachasini ifodalaydi.

Kalit modifikatori Tafsilotlar
.[Vue key alias] The most common keys have their own aliases in Vue:
  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
.[letter] Tugmachani bosganingizda keladigan harfni belgilang. Misol sifatida: "S" tugmachasini tinglash uchun .s kalit o‘zgartirgichidan foydalaning.
.[system modifier key] .alt, .ctrl, .shift yoki .meta. Bu tugmalar boshqa tugmalar bilan birgalikda yoki sichqonchani bosish bilan birgalikda ishlatilishi mumkin.

Misol

Foydalanuvchi

<div id="app">
  <p>Try pressing the 's' key:</p>
  <textarea v-on:keyup.s="createAlert"></textarea>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("You pressed the 'S' key!")
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Klaviatura hodisasi modifikatorlarini birlashtiring

Voqea modifikatorlari ham bir-biri bilan birgalikda ishlatilishi mumkin, shuning uchun metod chaqirilishi uchun bir vaqtning o‘zida bir nechta narsa sodir bo‘lishi kerak.

Misol

.s va .ctrl modifikatorlaridan birgalikda <textarea> tegi ichida 's' va 'ctrl' tugmalari bir vaqtda bosilganda ogohlantirish yaratish uchun foydalaning.

<div id="app">
  <p>Try pressing the 's' key:</p>
  <textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("You pressed the 'S' and 'Ctrl' keys, in combination!")
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Sichqoncha tugmasi o‘zgartirgichlari

Sichqonchani bosish bilan reaksiyaga kirishish uchun biz v-on:click yozishimiz mumkin, ammo sichqonchaning qaysi tugmasi bosilganligini belgilash uchun .left, .center yoki .right modifikatorlaridan foydalanishimiz mumkin.

Trackpad foydalanuvchilari: O‘ng tugmani yaratish uchun ikkita barmoq bilan yoki kompyuteringizda trek panelining pastki o‘ng tomonida bosishingiz kerak bo‘lishi mumkin.

Misol

Foydalanuvchi <div> elementida sichqonchaning o‘ng tugmachasini bosganda fon rangini o‘zgartiring:

<div id="app">
  <div v-on:click.right="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor+=50
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Sichqoncha tugmasi hodisalari tizimni o‘zgartirish tugmasi bilan ham birgalikda ishlashi mumkin.

Misol

Foydalanuvchi "ctrl" tugmasi bilan birgalikda <div> elementini sichqonchaning o‘ng tugmasi bilan bosganda fon rangini o‘zgartiring:

<div id="app">
  <div v-on:click.right.ctrl="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor+=50
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Hodisa modifikatori .prevent .right modifikatoriga qo‘shimcha ravishda, biz o‘ng tugmasini bosganimizda standart ochiladigan menyu paydo bo‘lishining oldini olish uchun ishlatilishi mumkin.

Misol

<div> elementining fon rangini o‘zgartirish uchun sichqonchaning o‘ng tugmachasini bosganingizda ochiladigan menyu paydo bo‘lishining oldi olinadi:

<div id="app">
  <div v-on:click.right.prevent="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor+=50
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Usul ichidagi event.preventDefault() dan foydalanib, o‘ng tugmasini bosgandan so‘ng ochiladigan menyu paydo bo‘lishining oldini olish mumkin edi, lekin Vue .prevent modifikatori bilan kod yanada o‘qilishi va uni saqlash osonroq bo‘ladi.

Shuningdek, siz sichqonchaning chap tugmachasini bosganingizda, click.left.shift kabi boshqa modifikatorlar bilan birgalikda javob berishingiz mumkin:

Misol

Tasvirni o‘zgartirish uchun klaviaturadagi "shift" tugmasini ushlab turing va <img> tegidagi sichqonchaning chap tugmasini bosing.

<div id="app">
  <p>Hold 'Shift' key and press left mouse button:</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        imgUrlIndex: 0,
        imgUrl: 'img_tiger_square.jpeg',
        imgages: [
          'img_tiger_square.jpeg',
          'img_moose_square.jpeg',
          'img_kangaroo_square.jpeg'
        ]
      }
    },
    methods: {
      changeImg() {
        this.imgUrlIndex++
        if(this.imgUrlIndex>=3){
          this.imgUrlIndex=0
        }
        this.imgUrl = this.images[this.imgUrlIndex]
      }
    }
  })
  app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »

Vue mashqlari

O‘zingizni mashqlar bilan sinab ko‘ring

Mashq:

To‘g‘ri kodni kiriting, shunda

elementi o‘ng tugmasini bosganida rangi o‘zgaradi.

Shuningdek, veb-sahifani o‘ng tugmasini bosganingizda paydo bo‘ladigan standart ochiladigan menyu ko‘rsatilmasligi uchun kod qo‘shing.

<div id="app">
  <div v-on:click.="changeColor"
      v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor+=50
      }
    }
  })
  app.mount('#app')
</script>

Mashqni boshlash


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish