Fungsi arahan dalam Vue3: Arahan tersuai menjadikan kod anda lebih fleksibel

Vue ialah rangka kerja bahagian hadapan yang sangat popular Dalam proses menggunakan Vue dalam beberapa tahun kebelakangan ini, kami sering menggunakan arahan untuk mengendalikan paparan dan penyembunyian elemen DOM, seperti v-if dan v-show. Walau bagaimanapun, dengan keluaran Vue3, fungsi arahan (Fungsi Arahan) telah mencapai perubahan besar dan penambahbaikan Arahan yang sangat berguna telah ditambahkan pada arahan tersuai Vue3. Artikel ini akan memperkenalkan fungsi arahan dalam Vue3 secara terperinci, terutamanya penggunaan dan kelebihan arahan tersuai.

1. Konsep asas fungsi arahan

Dalam Vue, arahan ialah atribut awalan khas yang digunakan dalam templat. Nilai arahan dijangkakan sebagai ungkapan JavaScript tunggal (kecuali v-for, yang akan disebut kemudian). Sebagai contoh, menggunakan arahan v-jika dalam templat, anda boleh mengawal sama ada elemen dipaparkan berdasarkan nilai ungkapan.

Fungsi arahan dalam Vue3 ialah fungsi yang boleh menerima empat parameter Ia boleh mengakses elemen yang arahan terikat, serta pelbagai atribut dan peristiwa pada elemen DOM, dan juga boleh berinteraksi dengan Vue. Melaksanakan interaksi data. Berikut ialah empat parameter fungsi arahan:

• el: Elemen yang diikat oleh arahan, anda boleh menggunakan el untuk mendapatkan atau mengubah suai atribut, gaya, dsb. elemen.

• mengikat: Objek yang mengandungi sifat berikut:

  • nama: Nama arahan, tidak termasuk awalan v-.
  • nilai: Nilai mengikat arahan, contohnya, dalam v-my-directive="1 + 1", nilai mengikat ialah 2.
  • oldValue: Nilai pengikatan arahan sebelumnya, hanya tersedia dalam cangkuk kemas kini dan komponenDikemas kini.
  • ungkapan: ungkapan arahan dalam bentuk rentetan. Sebagai contoh, v-my-directive="1 + 1", nilai ungkapan ialah "1 + 1".
• vnod: Nod maya yang dijana oleh kompilasi Vue.
• prevVNode: Nod maya sebelumnya, hanya tersedia dalam cangkuk kemas kini dan komponenDikemas kini.

Fungsi arahan mengakses maklumat berkaitan arahan melalui atribut dalam objek mengikat dan mengendalikan elemen DOM melalui objek el.

Perlu diambil perhatian bahawa fungsi arahan dalam Vue3 hanya bertanggungjawab untuk berinteraksi dengan elemen DOM Jika pemprosesan data atau pemprosesan logik perniagaan diperlukan, fungsi atau kaedah lain perlu dipanggil dalam fungsi arahan untuk mencapai ini .

2. Cara menggunakan arahan tersuai

Vue3 menyediakan cara yang sangat mudah untuk menyesuaikan arahan Anda hanya perlu memanggil fungsi Vue.directive dan masukkan nama arahan dan fungsi arahan Anda boleh menyesuaikan arahan. Berikut ialah contoh mudah:

<template>
  <div v-my-directive>Custom Directive</div>
</template>

<script>
  import { directive } from 'vue';

  const myDirective = {
    mounted(el, binding) {
      console.log('custom directive mounted', binding);
    }
  }

  export default {
    directives: {
      'my-directive': myDirective,
    },
  };
</script>

Dalam contoh di atas, kami memanggil fungsi Vue.directive dan lulus dalam nama arahan 'my-directive' dan fungsi directive myDirective. Kemudian daftar arahan dalam pilihan arahan komponen, dan anda boleh menggunakan arahan tersuai v-my-directive dalam templat.

Fungsi cangkuk yang dipasang dalam fungsi myDirective akan dipanggil apabila elemen DOM terikat dimasukkan ke dalam elemen induk. Dalam fungsi ini, kita boleh mendapatkan elemen DOM terikat pada masa ini melalui parameter el, mendapatkan nilai mengikat arahan dan maklumat lain melalui parameter mengikat, dan melaksanakan operasi yang sepadan.

3. Kelebihan arahan tersuai

Berbanding dengan arahan terbina dalam seperti v-if dan v-show, kelebihan arahan tersuai ialah ia boleh dikembangkan dan disesuaikan secara bebas mengikut keperluan perniagaan. Berikut ialah beberapa kelebihan arahan tersuai:

1. Kebolehgunaan semula kod

Arahan tersuai boleh merangkum logik kod biasa ke dalam satu arahan, yang boleh diulang di beberapa tempat mengurangkan beban kerja penulisan kod berulang.

2. Tingkatkan kebolehbacaan kod

Apabila menggunakan arahan terbina dalam, anda perlu mencampurkan logik dan pandangan bersama-sama, yang mengurangkan kebolehbacaan kod, tetapi menggunakan Menentukan sendiri arahan memisahkan logik dan pandangan, meningkatkan kejelasan kod dan kebolehbacaan.

3. Kebolehselenggaraan kod yang dipertingkatkan

Menggunakan arahan tersuai, logik perniagaan yang berbeza boleh diproses secara berasingan, dengan itu mengurangkan jumlah kod dan meningkatkan kebolehselenggaraan jantina kod. Apabila mengekalkan kod, memproses logik arahan yang mengikat mengikut keperluan yang berbeza boleh mengurangkan kerumitan kod.

Ringkasnya, arahan tersuai memberi kami kemungkinan untuk mengawal pandangan dan logik secara bebas, menjadikan kami lebih fleksibel, mudah dan cekap semasa menulis kod.

4. Senario aplikasi arahan tersuai

1. Pengesahan borang

Pengesahan borang ialah masalah biasa yang dihadapi dalam pembangunan bahagian hadapan. Melalui arahan tersuai, kami boleh merangkum logik pengesahan ke dalam satu arahan untuk digunakan dengan mudah dalam pelbagai bentuk. Sebagai contoh, kami boleh menyesuaikan arahan v-validate, yang akan mengesahkan sama ada borang itu sah apabila ia diserahkan.

2. Kawalan Kebenaran

Melalui arahan tersuai, kami boleh melaksanakan fungsi kawalan kebenaran dengan mudah. Sebagai contoh, kita boleh menyesuaikan arahan v-auth yang akan mengawal paparan elemen berdasarkan kebenaran pengguna.

3. Menatal halaman

Apabila halaman menatal, selalunya perlu untuk memantau acara bar skrol dan mengendalikannya dengan sewajarnya. Melalui arahan tersuai, kami boleh melaksanakan fungsi kawalan skrol dengan mudah. Sebagai contoh, kita boleh menyesuaikan arahan tatal v, yang akan mengawal paparan dan penyembunyian elemen DOM yang sepadan mengikut tatal halaman.

4. Pendikit dan anti goncang

Pendikit dan anti goncang ialah salah satu cara untuk mengoptimumkan prestasi halaman. Dalam Vue3, fungsi pendikit dan anti goncang juga boleh dilaksanakan melalui arahan tersuai. Sebagai contoh, kita boleh menyesuaikan arahan v-throttle, yang akan menukar peristiwa yang sering dicetuskan kepada pencetus selepas selang masa yang ditentukan.

5. Ringkasan

Fungsi arahan ialah salah satu konsep yang sangat penting dalam Vue. Melalui arahan tersuai, kami boleh mengawal paparan dan logik secara fleksibel, menjadikan kod lebih jelas, lebih cekap dan lebih mudah untuk diselenggara. Berbanding dengan arahan terbina dalam mudah seperti v-if dan v-show, arahan tersuai adalah lebih berkuasa dan sesuai untuk pelbagai senario. Cuba gunakan arahan tersuai untuk menjadikan kod anda lebih fleksibel!

Atas ialah kandungan terperinci Fungsi arahan dalam Vue3: Arahan tersuai menjadikan kod anda lebih fleksibel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!