Cara menggunakan mounted in vue

Cangkuk Vue.js yang dipasang dipanggil selepas komponen dimasukkan ke dalam DOM untuk kali pertama dan digunakan untuk melaksanakan: 1. Permintaan AJAX 2. Mulakan pustaka pihak ketiga 3. Operasi elemen; langganan; 5. Tetapan pemasa. Contoh khusus termasuk mendapatkan data, menetapkan pendengar acara, memulakan jQuery, dsb.

penggunaan yang dipasang dalam Vue

dilekapkan ialah kaedah penting dalam cangkuk kitaran hayat Vue.js Ia akan dipanggil selepas komponen dimasukkan ke dalam DOM sebenar untuk kali pertama. Kaedah ini digunakan untuk melaksanakan beberapa operasi tambahan selepas komponen dipasang, seperti:

1. Permintaan AJAX

Anda boleh memulakan permintaan AJAX yang dipasang untuk mendapatkan data daripada pelayan. Ini berguna untuk mengisi data secara dinamik semasa komponen dimuatkan.

2 Mulakan perpustakaan pihak ketiga

Anda boleh menggunakan kaedah yang dipasang untuk memulakan perpustakaan pihak ketiga, seperti jQuery atau D3, dsb. Ia memastikan bahawa perpustakaan ini tidak dimulakan sehingga komponen itu diberikan.

3. Operasi elemen

Anda boleh terus mengendalikan elemen DOM dalam dipasang, seperti menetapkan pendengar acara atau mendapatkan dimensi elemen. Melakukan ini meningkatkan prestasi kerana operasi ini hanya dilakukan pada kali pertama komponen dipaparkan.

4. Langgan acara

Anda boleh menggunakan mounted untuk melanggan acara dalam komponen lain atau storan Vuex. Ini membolehkan komunikasi antara komponen yang berbeza atau antara komponen dan storan.

5. Pemasa dan selang

Anda boleh menetapkan pemasa atau selang yang dipasang untuk melaksanakan tugas dengan kerap. Ini berguna untuk mengemas kini keadaan komponen atau mencetuskan tindakan lain.

Contoh penggunaan:

<code class="javascript">mounted() {
  // 发起 AJAX 请求
  this.$http.get('/api/data').then(response => {
    this.data = response.data;
  });

  // 初始化 jQuery
  $(this.$refs.container).draggable();

  // 订阅事件
  this.$on('update-data', () => {
    this.$http.get('/api/data').then(response => {
      this.data = response.data;
    });
  });

  // 设置定时器
  setTimeout(() => {
    this.message = '欢迎使用 Vue.js!';
  }, 1000);
}</code>

Perlu diambil perhatian bahawa kaedah yang dipasang hanya akan dipanggil selepas komponen dimasukkan ke dalam DOM sebenar untuk kali pertama. Kaedah ini tidak akan dipanggil jika komponen dipaparkan semula atau dimasukkan semula ke dalam DOM.

Atas ialah kandungan terperinci Cara menggunakan mounted in vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!