Vue Academy · Lektion

JSX i Vue 3 med Vite

@vitejs/plugin-vue-jsx, JSX-pragma, funktionelle komponenter og afvejninger mellem JSX og template

Lektion 2 af 413 trin

JSX i Vue 3 med Vite er en gratis Vue Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vue Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vue Academy-kurset indeholder 4 lektioner i alt.

JSX i Vue 3

JSX lader dig skrive markuplignende syntaks i JavaScript, som kompileres til h-kald. Vue 3 understøtter JSX gennem et dedikeret Babel-plugin, der er integreret i Vite.

Installation af pluginet

Den officielle pakke er @vitejs/plugin-vue-jsx. Installér den som en udviklingsafhængighed sammen med det almindelige Vue-plugin.

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

Konfiguration af vite.config.ts

Tilføj vueJsx() til plugins-arrayet i vite.config.ts. Det skal stå i arrayet, så Vite transformerer JSX-filer.

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

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

Filendelsen .tsx

Komponenter, der er skrevet i JSX, bruger filendelsen .tsx (eller .jsx). Pluginet behandler kun filer med disse filendelser.

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

En funktionel komponent

Den enkleste komponent er en pilfunktion, der returnerer et JSX-element. Klassen og teksten vises ligesom i HTML.

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

export default Comp;

class, ikke className

I modsætning til React bruger Vue JSX class, ikke className. Det samme gælder for på labels.

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

Dynamiske værdier

Indlejr udtryk i tuborgklammer. Reaktive refs læses med .value i gengivelseskoden.

import { ref } from "vue";

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

Hændelseshåndtering med camelCase

Lyttere bruger præfikset on i camelCase: onClick, onInput, onMouseenter. Håndteringen er en funktion.

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

Betinget gengivelse

JSX har ingen v-if. Brug ternære operatorer eller logiske udtryk til betinget at producere elementer.

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

Gengivelse af lister

Erstat v-for med map. Angiv en key på hvert element, ligesom i skabeloner.

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

Brug af defineComponent til props

Hvis du har brug for typede props og livscyklus, skal du pakke logikken ind i defineComponent. Setup-funktionen returnerer en gengivelsesfunktion, der returnerer JSX.

import { defineComponent } from "vue";

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

Hurtigt tjek

Hvilket plugin aktiverer JSX i et Vue 3 Vite-projekt, og hvor skal det placeres?

Besvar den i den interaktive lektion

Opsummering

Vue 3 JSX aktiveres ved at føje vueJsx() fra @vitejs/plugin-vue-jsx til Vite-pluginarrayet og skrive komponenter i .tsx-filer. Brug class i stedet for className, hændelseshåndteringer som onClick i camelCase og defineComponent, når du har brug for typede props.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 42
Lektioner: 156

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “JSX i Vue 3 med Vite” gratis?

Ja — alle 3 lektioner i læringssporet Vue Academy, inklusive “JSX i Vue 3 med Vite”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vue Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “JSX i Vue 3 med Vite”?

@vitejs/plugin-vue-jsx, JSX-pragma, funktionelle komponenter og afvejninger mellem JSX og template Du øver dig i Vue Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Vue Academy?

Der kræves ingen tidligere erfaring. Vue Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “JSX i Vue 3 med Vite”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Vue Academy-lektion?

Ja. Alle Vue Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Dybdegående gennemgang af funktionen h()
JSX i Vue 3 med Vite
Dynamiske komponenter med render-funktioner
Higher-Order Components (HOC)-mønsteret

← Tilbage til Vue Academy