Directive Overview

This page provides a quick overview for all built-in directives available in Lune.

DirectiveSyntaxDescription
lu-scopelu-scope="{ count: 0 }"Marks an element as a component and defines its scope.
lu-iflu-if="ok", lu-else-if, lu-elseConditionally render elements.
lu-showlu-show="ok"Toggles visibility using CSS display.
lu-forlu-for="item in items"Iterate over arrays or objects.
lu-modellu-model="msg"Two-way data binding on form inputs.
lu-on@click="doThis", lu-on:submit.preventAttach event listeners.
lu-bind:src="imageSrc", lu-bind:classReactive attribute binding.
lu-effectlu-effect="console.log(count)"Run reactive side effects.
lu-textlu-text="msg"Update element text content.
lu-htmllu-html="rawHtml"Update element innerHTML.
lu-cloaklu-cloakHides uncompiled templates until ready.
lu-prelu-preSkip compilation for this element.
lu-oncelu-onceRender once and skip future updates.
refref="myDiv"Register a reference to an element.