Apakah fungsi tersuai vue?

Vue, sebagai salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, mempunyai banyak fungsi dan arahan tersuai. Antaranya, fungsi tersuai adalah bahagian yang sangat penting dalam Vue. Fungsi tersuai membolehkan pembangun menggunakan fungsi JavaScript mereka sendiri dalam aplikasi Vue untuk mengendalikan acara, sifat dikira, penapis dan banyak lagi.

Dalam artikel ini, kami akan memperkenalkan beberapa fungsi tersuai Vue dan meneroka aplikasinya dalam aplikasi Vue. Fungsi tersuai ini termasuk:

1 Arahan tersuai

Arahan tersuai ialah salah satu fungsi tersuai paling asas dalam Vue. Ia boleh digunakan untuk menambah gelagat pada elemen DOM. Arahan tersuai ialah cara untuk memanipulasi elemen DOM secara langsung dan boleh dirujuk dalam templat komponen. Contohnya, apabila pengguna memasukkan data, anda boleh menggunakan arahan tersuai untuk mengehadkan input kepada nombor sahaja:

Vue.directive('numeric', {
bind: function (el, binding, vnode ) {

el.addEventListener('input', function () {
  var s = el.value;
  if (s.length === 0 || isNaN(s)) {
    el.value = '';
    return;
  }
  s = parseFloat(s);
  el.value = isNaN(s) ? '' : s.toString();
});

}
});

2 Komponen tersuai

Komponen tersuai ialah fungsi tersuai yang sangat biasa dalam Vue. Melalui komponen tersuai, pembangun boleh merangkum beberapa fungsi biasa untuk kegunaan mudah di berbilang tempat. Komponen tersuai Vue ialah fail .vue yang mengandungi koleksi templat, skrip dan gaya. Sebagai contoh, komponen berikut ialah pembilang dengan butang yang menambah nilai pembilang setiap kali ia diklik:

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      increment() {
        this.count++
      }
    }
  }
</script>

<style scoped>
button {
  background-color: blue;
  color: white;
}
</style>

3. Penapis tersuai

Penapisan tersuai untuk Penapis Vue ialah fungsi yang digunakan untuk menukar format dan gaya teks, dan ia boleh digunakan untuk output teks daripada sebarang aplikasi. Sebagai contoh, penapis pemformatan tarikh boleh dilaksanakan seperti ini:

Vue.filter('formatDate', function (value) {
var date = new Date(value);

var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();

if (bulan < 10) {

month = '0' + month;

}
jika (hari < 10) {

day = '0' + day;

}

tahun pulangan + '-' + bulan + '-' + hari ;
});

4. Campuran tersuai

Campuran Vue (campuran dalam) ialah teknologi yang merangkumi kod logik yang boleh dikongsi antara berbilang komponen. Kod logik ini boleh menjadi blok kod biasa dalam fungsi kitaran hayat, data dan komponen lain. Contohnya, kod berikut menunjukkan objek mixin yang menambahkan peristiwa global pada komponen:

var globalMixin = {
mounted() {

window.addEventListener('scroll', this.handleScroll)

},
dimusnahkan() {

window.removeEventListener('scroll', this.handleScroll)

},
kaedah: {

handleScroll() {
  console.log('scrolling')
}

}
};

Vue.mixin(globalMixin) ;

Melalui contoh di atas, anda dapat melihat bahawa fungsi tersuai Vue sangat kaya dan pelbagai, dan ia boleh menyelesaikan pelbagai keperluan yang kami hadapi dalam aplikasi kami. Pembangun boleh secara fleksibel menggunakan fungsi tersuai yang disediakan oleh Vue mengikut keperluan khusus untuk menjadikan aplikasi lebih berskala dan boleh diselenggara.

Atas ialah kandungan terperinci Apakah fungsi tersuai vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!