Ringkaskan dan kongsi tiga petua bahagian hadapan yang berguna!

Artikel ini membawakan anda pengetahuan yang relevan tentang bahagian hadapan terutamanya mengenai tiga petua yang telah saya rumuskan dalam karya bahagian hadapan saya. Saya harap ia dapat membantu awak.

Saya telah menyusun beberapa petua yang saya temui semasa pengekodan di tempat kerja, yang membuatkan saya keliru apabila saya mula-mula melihatnya, tetapi sebenarnya sangat mudah untuk diselesaikan. Saya harap mereka membantu. , dsb. Tetapi tiada satu pun daripada mereka akan menjana teg secara langsung dalam HTML dalam kod, jadi kadangkala kita tidak boleh menambah elemen dom Adalah lebih mudah untuk menggunakan elemen pseudo yang mengubah elemen dom, seperti yang ditunjukkan di bawah:

Bar kemajuan biru dilaksanakan dengan menukar gaya elemen pseudo secara dinamik, jadi mari kita lihat pelan pelaksanaan khusus!

Tambahkan gaya sebaris "--width" pada elemen dom Sudah tentu, saya mahu menukar lebarnya di sini. anda boleh melaraskannya sendiri. Anda perlu menamakannya

dan kemudian dalam css:

Gunakan var (--width) pada elemen pseudo untuk menukar atributnya secara dinamik. ~

Pengubah suai vue yang ringkas tetapi lazat

Premisnya ialah rangka kerja vue~

Semua orang pasti akan menemui halaman semasa semasa pembangunan , selepas mengklik butang tertentu, kotak fungsi dengan lapisan topeng akan muncul pada halaman Apabila anda diminta untuk mengklik pada lapisan topeng, kotak fungsi akan hilang pada masa yang sama, kotak fungsi akan secara automatik Klik butang dengan fungsi. Kemudian inilah masalahnya Apabila anda mengklik butang fungsi dalam kotak fungsi, peristiwa klik akan dicetuskan terlebih dahulu, dan kemudian keseluruhan kotak fungsi hilang, kerana apabila anda mengklik butang fungsi dalam kotak fungsi, acara akan menggelembung. Jadi bagaimana kita boleh menyelesaikannya dengan mudah? Anda hanya perlu .stop, kod berikut, dalam HTML:

Ya, anda membacanya dengan betul, anda hanya perlukan ini .stop~

Contoh yang saya berikan ialah saya fikir ia ialah salah satu pengubah suai yang paling biasa digunakan Rakan yang ingin mengetahui lebih lanjut boleh menyemak URL berikut

https://www.php.cn/vuejs/503749.html

<div class="mask" @click="handleClickMask"> //这是遮罩层
    <div class="content-box">
        <Button @click.stop="handleClickButton">点我</Button>
    </div>
</div>

Selepas data dalam vue diubah suai, halaman tidak dikemas kini

Apabila anda merasakan anda telah menukar data, terutamanya jenis data yang lebih kompleks seperti tatasusunan, tetapi pemaparan halaman tidak dikemas kini , adakah anda tertanya-tanya pada masa ini, "Hah? Bagaimana dengan pengikatan dua hala data seperti yang dijanjikan? Adakah ia satu pembohongan?" first this.nextTick(() => {}) Cubalah jika anda masih belum tahu kaedah ini, pergi cari sendiri Anda mesti baru sahaja memasuki lubang hadapan.

Jika masih tidak berkesan, saya akan [.. .xxx], hari ini saya tidak dapat mencarinya, seperti berikut:

Tukar sahaja ia seperti ini. Jika anda terus melintasi this.modelList, anda mesti menggunakan arr , saya fikir ia berkaitan dengan fakta bahawa anda tidak boleh menukar alamatnya untuk mengubahnya sendiri.

Disyorkan: "

Tutorial video pembangunan bahagian hadapan web

"

Atas ialah kandungan terperinci Ringkaskan dan kongsi tiga petua bahagian hadapan yang berguna!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!