Vue → Avenx.js: Directives and Event Handling Migration Guide

[nathanschmid08]

Overview

Vue templates rely on directives like v-model, v-show, v-if, v-bind:class, and v-bind:style. Avenx-JS provides equivalent directives (data-ax-bind, data-ax-show, data-ax-class, data-ax-style) and event binding syntax (@click="action()").

This issue focuses on documenting directives and event handling migration inside the main Vue migration guide file: docs/src/content/docs/migration/vue.md.

Goal

Expand Section 3 ("Directives and Event Handling") in docs/src/content/docs/migration/vue.md.

What to document

1. Two-Way Binding: Mapping v-model="state.text" to data-ax-bind="state.text".
2. Checkbox / Radio Caveat: Explaining why data-ax-bind does not handle checkbox checked booleans and how to use manual checked="{{ state.val }}" @change="...".
3. Visibility: Mapping v-show="isVisible" to data-ax-show="state.isVisible" (layout conservation).
4. Conditional Rendering: Explaining that Avenx does NOT have a v-if directive; conditional HTML is rendered via ternary expressions ({{{ state.show ? '<div>...</div>' : '' }}}) or data-ax-show.
5. Class & Style Bindings: Mapping :class and :style to data-ax-class and data-ax-style.
6. Events: Mapping Vue @click="handler" to Avenx @click="handler()".

Required examples

Before – Vue Directives Template

<template>
  <div>
    <input v-model="username" placeholder="Username" />
    <input type="checkbox" v-model="acceptedTerms" />

    <div v-show="isVisible" :class="{ active: isActive }" :style="{ color: textColor }">
      Visible Content
    </div>

    <p v-if="isLoggedIn">Welcome back!</p>
    <button @click="logout">Logout</button>
  </div>
</template>

After – Avenx.js Directives & Events

<!-- src/components/user-form/user-form.component.js -->
<state username="" acceptedTerms="false" isVisible="true" isActive="true" textColor="blue" isLoggedIn="true" />
<action name="logout"> state.isLoggedIn = false; </action>

<div>
  <!-- Two-way binding for text inputs -->
  <input type="text" data-ax-bind="state.username" placeholder="Username" />

  <!-- Manual binding for checkboxes -->
  <input type="checkbox" checked="{{ state.acceptedTerms }}" @change="state.acceptedTerms = event.target.checked" />

  <!-- Visibility, class, and style directives -->
  <div data-ax-show="state.isVisible" data-ax-class="{ active: state.isActive }" data-ax-style="{{ { color: state.textColor } }}">
    Visible Content
  </div>

  <!-- Conditional rendering using inline ternary expression -->
  {{{ state.isLoggedIn ? '<p>Welcome back!</p>' : '' }}}

  <!-- Event listener call -->
  <button @click="logout()">Logout</button>
</div>

Key Conceptual Differences & Pitfalls

• No v-if Directive: Avenx does not have a v-if or <@if> tag. Use data-ax-show to hide elements or inline ternary interpolations ({{{ ... }}}) to conditionally output markup.
• Checkbox Binding: data-ax-bind targets input value strings. For checkbox booleans, manually bind checked="{{ state.accepted }}" and listen for @change.
• Event Invocation: Avenx action handlers in templates should include parentheses (@click="logout()").

Difficulty

Good First Issue

Scope

• In Scope: Updating Section 3 in docs/src/content/docs/migration/vue.md for directives and event bindings.
• Out of Scope: Creating new Markdown files or editing other framework migration files.

Expected Result

Section 3 in docs/src/content/docs/migration/vue.md is expanded with complete directive migration guidance.

Acceptance Criteria

• Updated Section 3 in docs/src/content/docs/migration/vue.md
• At least 4 Before/After code examples (data-ax-bind, Checkbox manual handling, data-ax-show, Inline ternary rendering)
• Absence of v-if and checkbox data-ax-bind limitation clearly highlighted
• Links to docs/src/content/docs/core-concepts/directives.md and migration/overview.md
• Documentation build succeeds without errors