tetikus vue bergerak ke acara alih keluar

Vue.js ialah rangka kerja bahagian hadapan yang sangat mudah dan mudah digunakan Ia berdasarkan model MVVM, dan sangat mudah untuk mencapai kesan dinamik pada halaman semasa proses pembangunan. Dalam Vue.js, peristiwa tetikus adalah sangat biasa dan peristiwa keluar masuk tetikus (mouseover dan mouseout) juga digunakan secara meluas. Mari belajar cara menggunakan pergerakan tetikus dan mengalih keluar acara dalam Vue.js.

1. Acara masuk tetikus

Apabila tetikus pengguna bergerak ke atas elemen, Vue.js akan mencetuskan acara masuk tetikus. Dalam Vue.js, kita boleh mengendalikan peristiwa bergerak masuk tetikus melalui arahan v-on, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <h3 v-on:mouseenter="handleMouseEnter">鼠标移入我了</h3>
  </div>
</template>
<script>
export default {
  methods: {
    handleMouseEnter () {
      console.log('鼠标移入');
    }
  }
}
</script>

Dalam kod di atas, kami mengikat acara bergerak masuk tetikus melalui v-on arahan. Acara Fungsi pemprosesan ialah handleMouseEnter. Apabila pengguna menggerakkan tetikus ke elemen, fungsi handleMouseEnter dicetuskan. Dalam fungsi ini, kita boleh melaksanakan logik perniagaan sewenang-wenangnya.

Secara khusus, dalam kod di atas, kami hanya mengeluarkan ayat "mouse in" pada konsol. Dalam aplikasi sebenar, kami boleh melakukan operasi yang berbeza mengikut keperluan perniagaan, seperti memaparkan elemen tertentu, menukar gaya, dsb.

2. Acara keluar tetikus

Sepadan dengan kejadian tetikus ialah peristiwa keluar tetikus. Dalam Vue.js, kita boleh mengikat acara mouseleave melalui arahan v-on, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <h3 v-on:mouseleave="handleMouseLeave">鼠标移出我了</h3>
  </div>
</template>
<script>
export default {
  methods: {
    handleMouseLeave () {
      console.log('鼠标移出');
    }
  }
}
</script>

Dalam kod di atas, kami mengikat acara mouseleave melalui arahan v-on dan pengendali acara fungsi untuk handleMouseLeave. Apabila pengguna mengalihkan tetikus dari elemen, fungsi handleMouseLeave akan dicetuskan. Dalam fungsi ini, kami juga boleh melakukan sebarang operasi untuk memenuhi keperluan perniagaan.

Perlu diambil perhatian bahawa acara mouseenter dan mouseleave sedikit berbeza daripada acara mouseover dan mouseout. Khususnya, peristiwa masuk tetikus dan keluar tetikus hanya akan dicetuskan sekali apabila tetikus melintasi sempadan elemen, manakala peristiwa alih tetikus dan keluar tetikus mungkin dicetuskan berbilang kali apabila tetikus masuk dan keluar dari elemen anak elemen. Oleh itu dalam Vue.js, kami biasanya menggunakan acara mouseenter dan mouseleave bukannya acara mouseover dan mouseout.

3. Aplikasi menyeluruh acara masuk dan keluar tetikus

Selain menggunakan tetikus dalam acara dan acara keluar tetikus secara berasingan, kedua-dua acara ini juga boleh digunakan secara menyeluruh dalam Vue. js untuk mencapai beberapa kesan lanjutan. Sebagai contoh, kita boleh menggunakan arahan v-if untuk memaparkan elemen apabila tetikus bergerak masuk dan menyembunyikan elemen apabila tetikus bergerak keluar, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <h3 v-on:mouseenter="handleMouseEnter"
        v-on:mouseleave="handleMouseLeave">鼠标移入移出我</h3>
    <div v-if="isShow">我是要显示的内容</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    handleMouseEnter () {
      this.isShow = true;
    },
    handleMouseLeave () {
      this.isShow = false;
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan v- jika arahan untuk mengawal paparan dan penyembunyian unsur secara dinamik. Apabila pengguna menggerakkan tetikus ke dalam elemen, kami menetapkan isShow kepada benar, dengan itu menunjukkan elemen apabila pengguna mengalihkan tetikus keluar dari elemen, kami menetapkan isShow kepada palsu, dengan itu menyembunyikan elemen tersebut; Dengan cara ini, kita boleh mencapai kesan pergerakan masuk dan keluar tetikus yang lebih kompleks.

Ringkasnya, acara keluar masuk tetikus sangat biasa digunakan dalam Vue.js dan perlu digunakan dengan kerap dalam pembangunan sebenar. Melalui penjelasan artikel ini, saya percaya bahawa setiap orang mempunyai pemahaman yang lebih mendalam tentang acara keluar masuk tetikus dalam Vue.js, dan boleh menggunakannya dengan lebih fleksibel dalam pembangunan sebenar.

Atas ialah kandungan terperinci tetikus vue bergerak ke acara alih keluar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!