Bagaimanakah Vue melaksanakan sintaks JSX dan pengaturcaraan komponen?

Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan model pembangunan berasaskan komponen. Walau bagaimanapun, Vue tidak menyokong sintaks JSX secara asli, tetapi kami boleh melaksanakan sintaks JSX dan pengaturcaraan komponen dengan menggunakan perpustakaan pihak ketiga.

1. Apakah itu JSX

JSX ialah sintaks lanjutan JavaScript yang boleh menulis kod seperti HTML dalam JavaScript. React ialah rangka kerja hadapan pertama untuk memperkenalkan sintaks JSX Menggunakan sintaks JSX boleh menerangkan komponen UI dan gelagat interaktif aplikasi dengan lebih semula jadi dan mudah. JSX akan ditukar kepada panggilan fungsi JavaScript biasa oleh pengkompil, dan hanya objek yang sepadan akan dijana semasa pelaksanaan dan bukannya memanipulasi terus elemen DOM, sekali gus meningkatkan prestasi aplikasi.

2. Gunakan pemalam babel-plugin-jsx-v-model untuk melaksanakan sintaks JSX

Vue secara kreatif menggunakan sintaks templat, tetapi ramai pembangun suka menggunakan sintaks JSX untuk menerangkan komponen kerana ia boleh menjadi lebih intuitif dan mudah. Oleh itu, kita boleh menggunakan pemalam babel-plugin-jsx-v-model untuk menjadikan Vue menyokong sintaks JSX.

Mula-mula pasang pemalam:

npm install babel-plugin-jsx-v-model --save-dev

Kemudian tambahkan fail .babelrc atau babel.config.js:

{
  "plugins": ["jsx-v-model"]
}

Kini, Vue boleh mengecam sintaks JSX.

3. Gunakan Komponen Kelas Vue untuk melaksanakan pengaturcaraan komponen

Selain menyokong sintaks JSX, Vue juga boleh melaksanakan model pembangunan komponen berasaskan kelas melalui perpustakaan Komponen Kelas Vue, yang serupa dengan Angular. Komponen Kelas Vue menyediakan keupayaan untuk menentukan komponen daripada kelas, membolehkan organisasi kod yang lebih baik. Kita boleh melakukannya dengan mengikuti langkah berikut:

1. Pertama, kita perlu memasang Komponen Kelas Vue:

npm install vue-class-component --save

2. Dalam fail komponen kami, import Komponen Kelas Vue dan Vue dan tentukan komponen menggunakan penghias:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  // 定义组件代码
}

us Seperti yang anda lihat, kod komponen kini ditakrifkan dalam kelas.

3. Gunakan penghias untuk menentukan sifat komponen:

import Vue from 'vue'
import Component, { Prop } from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  @Prop(String) message!: string

  // 定义组件代码
}

Kami boleh mengisytiharkan sifat komponen melalui penghias @Prop, dan kami boleh mengisytiharkan jenis dan nilai lalai harta tersebut.

4. Gunakan komponen dalam templat:

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

<script lang="ts">
import Vue from 'vue'
import Component, { Prop } from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  @Prop(String) message!: string
  
  // 其它组件代码
}
</script>

Dengan cara ini, komponen berdasarkan Komponen Kelas Vue selesai.

Ringkasan

Atas dasar menyokong sintaks templat, Vue juga boleh melaksanakan sintaks JSX dan mod pembangunan berdasarkan komponen definisi kelas melalui perpustakaan pihak ketiga, yang menunjukkan fleksibiliti dan skalabiliti Vue. Pembangun yang berbeza boleh memilih cara untuk menulis komponen Vue mengikut keutamaan dan tabiat mereka sendiri.

Atas ialah kandungan terperinci Bagaimanakah Vue melaksanakan sintaks JSX dan pengaturcaraan komponen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!