vue menggunakan kaedah luaran

Kata Pengantar

Dalam pembangunan Vue.js, kami biasanya menghadapi masalah: cara menggunakan kaedah luaran. Artikel ini akan memperkenalkan cara untuk membenarkan Vue.js berinteraksi dengan kaedah luaran untuk membangunkan dan mengekalkan kod dengan lebih baik.

Pengetahuan prasyarat

Sebelum mempelajari artikel ini, anda perlu mengetahui pengetahuan berikut:

• Pengetahuan asas dan penggunaan Vue.js
• Asas JavaScript Pengetahuan dan penggunaan
• Pengenalan dan penggunaan kaedah luaran

1. Memperkenalkan kaedah luaran

Memperkenalkan kaedah luaran dalam Vue.js Kaedah adalah sama seperti memperkenalkan kaedah luaran dalam JavaScript.

Andaikan kita mempunyai fail bernama utils.js yang terletak dalam direktori src/utils/ dalam akar projek. Terdapat kaedah bernama add dalam fail ini, yang menambah dua nombor dan mengembalikan hasilnya. Dalam Vue.js, kami boleh memperkenalkan kaedah ini seperti berikut:

import { add } from '@/utils/utils.js';

Dalam kod di atas, kami menggunakan sintaks import ES6 untuk mengimport kaedah tambah dalam fail utils.js. @ di sini mewakili direktori src. Jika laluan fail utils.js anda berbeza, anda harus menukarnya dengan sewajarnya.

2. Menggunakan kaedah luaran dalam Vue.js

Selepas memperkenalkan kaedah luaran, kita boleh memanggilnya dalam komponen Vue.js.

Berikut ialah contohnya. Kami mempunyai komponen Vue.js yang dipanggil MyComponent yang memaparkan jumlah dua nombor dan menggunakan kaedah tambah untuk mengiranya.

<template>
  <div>{{ sum }}</div>
</template>

<script>
  import { add } from '@/utils/utils.js';

  export default {
    data() {
      return {
        num1: 3,
        num2: 5,
      }
    },
    computed: {
      sum() {
        return add(this.num1, this.num2);
      }
    }
  }
</script>

Dalam kod di atas, kami mengimport kaedah tambah dan kemudian menggunakannya dalam atribut jumlah dikira untuk mendapatkan jumlah num1 dan num2 dan memaparkannya pada halaman. Jika kaedah tambah utils.js mengembalikan ralat, kami boleh menggunakan pernyataan cuba-tangkap untuk menangkap ralat dan memaparkannya.

3. Menggunakan perpustakaan luaran dalam komponen Vue.js

Dalam pembangunan Vue.js, biasanya kami perlu menggunakan beberapa perpustakaan JavaScript luaran untuk melanjutkan fungsi Vue.js . Jika kita ingin menggunakan perpustakaan ini dalam komponen Vue.js, kita perlu memperkenalkannya dalam komponen tersebut.

Berikut ialah contoh menggunakan perpustakaan moment.js. moment.js ialah perpustakaan tarikh JavaScript yang berkuasa yang boleh kami gunakan dalam komponen untuk memformat dan mengira tarikh.

Pertama, kita perlu menggunakan NPM untuk memasang pustaka moment.js:

npm install moment --save

Seterusnya, perkenalkan pustaka moment.js ke dalam komponen Vue.js:

import moment from 'moment';

Akhir sekali, dalam Gunakan pustaka moment.js dalam komponen:

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        date: new Date(),
      }
    },
    computed: {
      formattedDate() {
        return moment(this.date).format('YYYY-MM-DD');
      }
    }
  }
</script>

Dalam kod di atas, kami mengimport pustaka moment.js dan menetapkannya kepada pemboleh ubah momen, kemudian gunakan pustaka momen dalam harta dikira FormattedDate untuk memformat tarikh, dan Ia dipaparkan pada halaman.

Kesimpulan

Dalam pembangunan Vue.js, memperkenalkan dan menggunakan kaedah dan perpustakaan luaran adalah situasi yang sangat biasa. Artikel ini menerangkan cara memperkenalkan dan menggunakan kaedah dan perpustakaan luaran dalam Vue.js. Ingat, apabila menggunakan kaedah luaran dan pustaka dalam komponen Vue.js, anda perlu ingat untuk mengimportnya ke dalam komponen. Jika anda mempunyai sebarang soalan atau komen, sila tinggalkan di ruangan komen.

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