Tutorial Asas VUE3: Menggunakan Komponen Fail Tunggal (SFC) Vue.js

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue.js, sebagai rangka kerja bahagian hadapan yang cekap, mudah dan berkuasa, telah semakin digunakan dalam pembangunan. Dengan keluaran rasmi Vue.js3, salah satu kemas kini penting ialah sokongan untuk komponen fail tunggal (SFC). Artikel ini akan memperkenalkan cara menggunakan komponen fail tunggal dalam Vue.js3.

1. Apakah komponen fail tunggal?

Dalam Vue.js, komponen fail tunggal merujuk kepada merangkum semua kod berkaitan komponen Vue (termasuk HTML, CSS dan JavaScript) dalam fail berasingan. Sebagai contoh, komponen bernama "HelloWorld" boleh ditulis sebagai komponen fail tunggal dalam format berikut:

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

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

Dalam kod di atas, teg <template> mengandungi bahagian HTML komponen dan Teg <script> mengandungi komponen Bahagian JavaScript, teg <style> mengandungi bahagian CSS komponen. Antaranya, export default mengisytiharkan objek komponen, data() mentakrifkan data komponen dan style scoped menunjukkan bahawa gaya hanya digunakan pada komponen semasa.

Kelebihan menggunakan komponen fail tunggal ialah ia memudahkan pengurusan dan penyelenggaraan komponen, dan boleh dinyahpepijat dan diperiksa dengan mudah menggunakan alatan pembangunan bersepadu (seperti Vue Devtools).

2. Bagaimana untuk menggunakan komponen fail tunggal?

Mencipta komponen fail tunggal menggunakan Vue.js3 adalah sangat mudah. Mula-mula, anda perlu memulakan projek melalui Vue CLI:

1 Pasang Vue CLI

npm install -g @vue/cli

2 Buat projek Vue

vue create my-app

3 🎜>

cd my-app

Seterusnya, buat komponen fail tunggal yang dipanggil "HelloWorld" dalam projek anda.

1. Buat fail komponen

Buat fail bernama "HelloWorld.vue" dalam direktori

Kandungan fail adalah seperti berikut: src/componentsrreee

2. Pada halaman Import komponen

Perkenalkan komponen

ke dalam halaman yang perlu menggunakan komponen: HelloWorld

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      message: 'Hello Vue.js!'
    }
  }
}
</script>

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

Dalam kod di atas, pernyataan

digunakan untuk mengimport import komponen, HelloWorld atribut bermaksud mendaftarkan komponen sebagai subkomponen halaman semasa dan anda boleh menggunakan teg tersuai components dalam halaman. HelloWorld

3. Nota

1 Beri perhatian kepada laluan semasa mengimport komponen

Apabila mengimport komponen, perhatikan cara laluan ditulis. Dalam contoh di atas, kami menggunakan tag

untuk mewakili direktori akar projek, jadi @ bermaksud mengimport fail import HelloWorld from '@/components/HelloWorld.vue'. Jika teg src/components/HelloWorld.vue tidak digunakan, anda perlu menggunakan laluan relatif untuk mengimport, contohnya: @

<template>
  <div class="home">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

2 Jangan tentukan gaya secara langsung dalam komponen

Walaupun gaya boleh ditakrifkan secara langsung dalam komponen fail tunggal, Tetapi tidak disyorkan untuk menentukan gaya secara langsung dalam komponen. Untuk mengekalkan pengurusan gaya bersatu, adalah disyorkan untuk menggunakan prapemproses CSS (seperti SASS, LESS) atau modul CSS untuk memperkenalkan gaya.

3 Jangan tulis sejumlah besar kod logik dalam komponen

Walaupun satu komponen fail boleh mengandungi semua kod logik, ia tidak disyorkan untuk menulis sejumlah besar kod logik dalam komponen tersebut. Untuk memastikan komponen mudah dan mudah difahami, adalah disyorkan untuk merangkum kod logik kompleks ke dalam modul berasingan untuk diproses.

4. Berpegang pada peraturan penamaan yang menghalang konflik penamaan

Untuk mengelakkan konflik penamaan antara komponen, adalah disyorkan untuk mengikuti konvensyen penamaan, seperti menggunakan huruf kecil yang disambungkan dengan sempang (seperti

). my-component

4. Ringkasan

Komponen fail tunggal ialah salah satu fungsi penting dalam Vue.js3 Ia menyediakan kaedah pengurusan komponen yang mudah dan boleh meningkatkan kecekapan pembangunan. Apabila menggunakan komponen fail tunggal, anda perlu memberi perhatian kepada penulisan laluan, definisi gaya, pemprosesan logik dan konvensyen penamaan. Saya harap artikel ini dapat membantu semua orang memahami penggunaan Vue.js3.

Atas ialah kandungan terperinci Tutorial Asas VUE3: Menggunakan Komponen Fail Tunggal (SFC) Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!