Introduction

Make sure you have installed Lucia on to your project.

To pickup Lucia quickly, you should understand how Lucia operates. Lucia requires markup logic to be containerized inside directives, which contain JavaScript expressions with state passed as global variables.

Directive Syntax: l-directive:modifier.property="expression".

DirectiveDescription
l-stateDeclares and initializes a new component scope.
l-initExecutes an expression when l-state is initialized.
l-textWorks similarly to l-bind, but will update the textContent of an element.
l-htmlWorks similarly to l-bind, but will update the innerHTML of an element.
l-onAttaches an event listener to the element. Executes JavaScript expression when emitted.
l-bindSets the value of an attribute to the result of a JavaScript expression.
l-forCreate new DOM nodes for each item in an array.
l-modelAdds "two-way data binding" to an element. Keeps input element in sync with state.
l-maskIs removed when an element is rendered.

Lucia also provides special properties you can access inside directive expressions:

PropertyDescription
$elThe element the directive is attached to.
$renderForce a full rerender of the DOM. $render()
$eventThe event object of an event listener.
$emitCreate and dispatch a custom event. $emit('eventName', { options })