Cara membuat komponen fail tunggal dalam Vue.js

Vue.js, sebagai rangka kerja JavaScript yang terkenal, membolehkan pembangun membuat aplikasi bahagian hadapan dengan mudah. Dalam Vue.js, komponen fail tunggal adalah penting untuk menjadikannya lebih cekap dari segi mengatur dan mengekalkan kod anda. Dalam artikel ini, kami akan meneroka cara membuat komponen fail tunggal dalam Vue.js.

Apakah komponen fail tunggal?
Komponen fail tunggal dalam Vue.js menggabungkan HTML, CSS dan JavaScript ke dalam satu fail. Dengan cara ini, pembangun boleh mengatur kod mereka dengan mudah dan menghabiskan lebih sedikit masa untuk mengemas kininya. Vue.js mengendalikan komponen fail tunggal sebagai modul bebas dan membungkus setiap komponen ke dalam fail JavaScript. Dengan cara ini, komponen anda boleh dikongsi dan digunakan semula dengan mudah.

Buat satu komponen fail
Langkah-langkah untuk mencipta satu komponen fail adalah seperti berikut:

Langkah 1: Buat fail vue
Komponen fail tunggal Vue.js biasanya gunakan .vue sambungan fail. Kita boleh membuka fail baharu menggunakan editor dan kemudian menyimpannya sebagai fail .vue. Sebagai contoh, kami menyimpan komponen sebagai MyComponent.vue.

Langkah 2: Tentukan komponen
Kami boleh mentakrifkan komponen menggunakan kod berikut:

<template>
  <div>
    <h1 id="title">{{ title }}</h1>
    <button>+1</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "My Component",
      message: "Hello World"
    };
  },
  methods: {
    increment() {
      this.message += "!";
    }
  }
};
</script>

<style>
h1 {
  color: red;
}
</style>

Dalam kod di atas, kami telah mentakrifkan tiga bahagian komponen fail tunggal: template , script dan style. Bahagian template mengandungi kod HTML, bahagian script mengandungi kod JavaScript dan bahagian style mengandungi kod CSS.

Kami juga mentakrifkan pembolehubah data() dan title menggunakan kaedah message. Ambil perhatian bahawa kaedah data() mesti mengembalikan objek. Kaedah increment() mengemas kini pembolehubah message dan menambah tanda seru padanya. Kata kunci scoped digunakan untuk menggunakan gaya CSS secara setempat.

Langkah 3: Perkenalkan komponen
Selepas mencipta komponen fail tunggal, anda perlu memperkenalkannya ke dalam aplikasi Vue.js anda. Langkah-langkah untuk memperkenalkan komponen adalah seperti berikut:

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  name: "App",
  components: {
    MyComponent
  }
};
</script>

Dalam kod di atas, kami memperkenalkan fail import melalui pernyataan MyComponent.vue. Kemudian, kami mendaftarkan komponen dalam objek components.

Sudah tentu, kami juga boleh menggantung folder pada folder Vue (dengan mengandaikan folder Vue global anda telah disediakan). Sebagai contoh, kami meletakkan komponen kami dalam folder bernama components. Dalam kes ini, kita boleh mengemas kini kenyataan import seperti berikut:

import MyComponent from '@/components/MyComponent.vue';

Sekarang kita telah memperkenalkan komponen dalam aplikasi Vue.js, kita boleh menggunakan tag <my-component></my-component> dalam aplikasi itu. .

Ringkasan
Dalam Vue.js, bagaimana cara kita mencipta satu komponen fail. Kami boleh menggabungkan HTML, CSS dan JavaScript ke dalam satu fail untuk penyusunan dan penyelenggaraan yang mudah. Kita boleh mencipta komponen fail tunggal melalui langkah berikut: cipta fail .vue, tentukan komponen dan perkenalkan komponen. Pendekatan ini ialah cara yang bagus untuk mengatur dan menulis kod boleh guna semula.

Atas ialah kandungan terperinci Cara membuat komponen fail tunggal dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!