vuejs-ai/vue-jsx-best-practices

Was macht vue-jsx-best-practices?

Richtlinien für die JSX-Syntax in Vue (z.B. class vs className, JSX-Plugin-Konfiguration).

Übersicht

Dieses Skill-Dokument beschreibt bewährte Methoden zur Verwendung von JSX in Vue.js-Komponenten. Es hilft Entwicklern, die richtige Attributbenennung und Projektkonfiguration zu verstehen, um häufige Fallstricke zu vermeiden.

Wichtige Unterschiede

• class vs className: In Vue-JSX wird class anstelle von className verwendet, um CSS-Klassen zuzuweisen.
• Event-Handling: Verwende onClick anstelle von @click für Ereignis-Listener.
• Bindungen: Nutze geschweifte Klammern {} für dynamische Ausdrücke, z.B. class={someVariable}.

Konfiguration des JSX-Plugins

Füge das Babel-Plugin @vue/babel-plugin-jsx zu deiner babel.config.js hinzu:

module.exports = {
  plugins: ['@vue/babel-plugin-jsx']
}

Beispielkomponente

export default {
  data() {
    return {
      isActive: true
    }
  },
  render() {
    return (
      <div class={{ 'active': this.isActive }}>
        <span onClick={this.handleClick}>Klick mich</span>
      </div>
    )
  },
  methods: {
    handleClick() {
      console.log('Geklickt!')
    }
  }
}

Nützliche Links

• Vue.js JSX Dokumentation
• @vue/babel-plugin-jsx GitHub