Vue Academy · Pelajaran

JSX dalam Vue 3 dengan Vite

@vitejs/plugin-vue-jsx, pragma JSX, komponen berfungsi, pertukaran JSX berbanding templat.

Pelajaran 2 daripada 413 langkah

JSX dalam Vue 3 dengan Vite ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

JSX dalam Vue 3

JSX membolehkan Anda menulis sintaks seperti penanda dalam JavaScript yang dikompilkan menjadi panggilan h. Vue 3 menyokong JSX melalui pemalam Babel khusus yang disepadukan dengan Vite.

Memasang Pemalam

Pakej rasmi ialah @vitejs/plugin-vue-jsx. Pasangnya sebagai kebergantungan pembangunan bersama pemalam Vue biasa.

npm install -D @vitejs/plugin-vue-jsx

Mengkonfigurasi vite.config.ts

Tambahkan vueJsx() pada tatasusunan plugins dalam vite.config.ts. Ia mesti disenaraikan supaya Vite mengubah fail JSX.

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()]
});

Sambungan Fail .tsx

Komponen yang ditulis dalam JSX menggunakan sambungan .tsx (atau .jsx). Pemalam ini hanya memproses fail dengan sambungan tersebut.

// Greeting.tsx
export default () => <div>Hello</div>;

Komponen Fungsian

Komponen paling ringkas ialah fungsi anak panah yang mengembalikan elemen JSX. Atribut class dan teks muncul sama seperti dalam HTML.

const Comp = () => <div class="box">text</div>;

export default Comp;

class Bukan className

Tidak seperti React, JSX Vue menggunakan class, bukannya className. Perkara yang sama terpakai pada for dalam label.

const Card = () => (
  <div class="card">
    <label for="name">Name</label>
  </div>
);

Nilai Dinamik

Sisipkan ungkapan dalam kurungan berombak. Rujukan reaktif dibaca dengan .value di dalam badan pemaparan.

import { ref } from "vue";

export default () => {
  const count = ref(0);
  return () => <span>Count: {count.value}</span>;
};

Pengendali Acara dengan camelCase

Pendengar menggunakan awalan on dalam camelCase: onClick, onInput, onMouseenter. Pengendalinya ialah fungsi.

const Button = () => (
  <button onClick={() => alert("hi")}>
    Click
  </button>
);

Pemaparan Bersyarat

JSX tidak mempunyai v-if. Gunakan ungkapan ternari atau logik untuk menghasilkan elemen secara bersyarat.

const View = (props) => (
  <div>
    {props.loading ? <p>Loading...</p> : <p>Done</p>}
  </div>
);

Memaparkan Senarai

Gantikan v-for dengan map. Sediakan kunci key pada setiap elemen seperti dalam templat.

const List = (props) => (
  <ul>
    {props.items.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

Menggunakan defineComponent untuk Prop

Untuk prop yang ditaip dan kitar hayat, bungkus logik Anda dalam defineComponent. Fungsi setup mengembalikan fungsi pemaparan yang mengembalikan JSX.

import { defineComponent } from "vue";

export default defineComponent({
  props: { title: String },
  setup(props) {
    return () => <h1>{props.title}</h1>;
  }
});

Semakan Pantas

Pemalam manakah yang membolehkan JSX dalam projek Vite Vue 3, dan di manakah pemalam itu diletakkan?

Jawab dalam pelajaran interaktif

Imbas Kembali

JSX Vue 3 didayakan dengan menambahkan vueJsx() daripada @vitejs/plugin-vue-jsx ke dalam tatasusunan pemalam Vite, serta menulis komponen dalam fail .tsx. Gunakan class, bukannya className, pengendali camelCase seperti onClick, dan defineComponent apabila Anda memerlukan prop yang ditaip.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “JSX dalam Vue 3 dengan Vite” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “JSX dalam Vue 3 dengan Vite”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “JSX dalam Vue 3 dengan Vite”?

@vitejs/plugin-vue-jsx, pragma JSX, komponen berfungsi, pertukaran JSX berbanding templat. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “JSX dalam Vue 3 dengan Vite” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy