Mari kita bincangkan tentang pengubah suai dalam perintah vue, ringkasan pengubah acara biasa

Artikel ini akan membincangkan tentang pengubah suai dalam arahan vue, membandingkan pengubah suai arahan dalam vue dan objek acara dalam acara dom, dan memperkenalkan pengubah suai acara yang biasa digunakan saya harap ia berguna kepada semua orang Membantu!

Bandingkan pengubah suai arahan dalam vue dengan objek acara dalam acara dom

Sebelum bercakap tentang pengubah suai dalam vue, kami menggunakan kaedah/atribut biasa objek peristiwa yang digunakan dalam operasi DOM Apakah sifat peristiwa? Atribut peristiwa yang saya gunakan adalah seperti berikut:

1 Halang lompatan acara lalai (seperti lompatan href tag a dan penyerahan borang) (Belajar perkongsian video: tutorial video vue )

event.preventDefault()

2 Cegah peristiwa menggelegak (contohnya, elemen induk mengikat acara dan elemen anak turut mengikat acara tersebut. Jika gelembung tidak dibatalkan, klik. elemen

kanak-kanak juga akan Mencetuskan acara elemen induk

event.stopPropagation()

3. Elakkan peristiwa seterusnya daripada dicetuskan Jika ditulis dalam A, peristiwa B yang didaftarkan kemudiannya tidak akan dicetuskan (contohnya, butang mengikat dua acara,

A dan B didaftarkan melalui [keutamaan], dan B tidak dijalankan semasa menjalankan A)

event.stopImmediatePropagation()

4 acara terikat, seperti peristiwa ul mengikat, Kemudian klik li, kemudian currentTarget mengembalikan ul

event.currentTarget

5. Elemen di mana peristiwa itu berlaku, seperti acara ul mengikat, dan kemudian klik li, kemudian sasaran mengembalikan li yang diklik >

Di atas ialah beberapa atribut/kaedah yang beroperasi dalam pepohon DOM, tetapi menggunakan rangka kerja Vue tidak memerlukan operasi DOM ini mempunyai pengubahsuaian sintaks yang lebih baik dan ringkas

event.target

Pengubah suai acara

Dalam pengendali acara, sentiasa terdapat beberapa fungsi yang perlu diubah suai, seperti menghalang lompatan acara lalai tertentu. Untuk menyelesaikan masalah ini, vuejs menyediakan beberapa pengubah suai acara untuk v-on Pengubah suai diwakili oleh akhiran perintah bermula dengan titik

Apakah pengubah acara yang biasa digunakan? 🎜>

• .stop
• Hasil cetakan tanpa menambah .stop.prevent
• .capture
• .once

Menambahkan hasil cetakan .stop

.stop

Kod sumber:

KesimpulanApabila anda mengklik pada elemen anak, elemen induk juga akan dicetuskan, ini ialah acara menggelegak. .halang

atribut

  <template >
  <div @click="fnFather">
    <!-- 阻止事件冒泡 -->
    <button @click.stop="fn">阻止事件冒泡</button>
  </div>
</template>
<script>
export default {
  methods: {
    fn() {
      console.log("按钮点击了");
    },
    fnFather() {
      console.log("父元素 点击了");
    },
  },
};
</script>
<style>
</style>

Menambah kesan daripada

.halang

atribut

.prevent

Kod sumber

<span style="font-size: 16px;">.prevent</span>Kesimpulanatribut href dalam tag Halaman akan melompat apabila anda menggunakan tag untuk melaksanakan beberapa fungsi dan tidak memerlukan lompatan lalai , anda boleh menggunakan .prevent untuk menghalang lompatan acara lalai. Malah, terdapat juga acara penyerahan borang yang turut menggunakan .prevent untuk menghalang acara lalai daripada melompat

Maksudnya ialah peristiwa itu capture tidak biasa digunakan Tetapi anda masih perlu memahami =<span style="font-size: 16px;">.prevent</span> Di bawah adalah kotak dengan struktur empat div

tidak ditetapkan

Perintahnya adalah untuk melaksanakan acara dari luar dalam. Ini adalah Acara yang menggelegak

Kod sumber

<template >
  <div>
    <!-- .prevent 阻止默认事件跳转 -->
    <a href="http://taobao.com" @click.prevent="eve">阻止跳转到淘宝</a>
  </div>
</template>
<script>
export default {
  methods: {
    eve() {
      console.log("按钮点击了");
    },
  },
};
</script>

Seperti yang ditunjukkan dalam gambar

.capture ditetapkan dan ia akan dilaksanakan dari luar ke dalam. Anda boleh memberikan satu tetapan atau berbilang tetapan

.capture

Sumber kod

<template >
  <div @click="hand(&#39;最外层&#39;)">
    <div class="grandfather" @click="hand(&#39;抓到爷爷了&#39;)">
      <div class="father" @click="hand(&#39;抓到爸爸了&#39;)">
        <div class="son" @click="hand(&#39;抓到儿子了&#39;)"></div>
      </div>
    </div>
  </div>
</template>

.capture

Seperti yang ditunjukkan dalam gambar:

得出结论

冒泡是从里往外冒，捕获是从外往里捕.capture 它是事件捕获 当它存在时，会先从外到里的捕获，剩下的从里到外的冒泡。

.once

.once 含义是点击事件将只会触发一次 没有设置 .once 就是普通的函数正常执行

<template >
  <button @click="hand">函数只会执行一次</button>
</template>
<script>
export default {
  methods: {
    hand() {
      console.log("函数只会执行一次,再次点击不会执行");
    },
  },
};
</script>

设置了 .once 就只能执行一次

<template >
  <button @click.once="hand">函数只会执行一次</button>
</template>
<script>
export default {
  methods: {
    hand() {
      console.log("函数只会执行一次,再次点击不会执行");
    },
  },
};
</script>

得出结论

.once  就只能执行一次，再次点击就不会执行了

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Mari kita bincangkan tentang pengubah suai dalam perintah vue, ringkasan pengubah acara biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!