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".

Directive	Description
l-state	Declares and initializes a new component scope.
l-text	Works similarly to l-bind, but will update the textContent of an element.
l-html	Works similarly to l-bind, but will update the innerHTML of an element.
l-show	Toggles display: none; on an element based on the expression's boolean value
l-on	Attaches an event listener to the element. Executes JavaScript expression when emitted.
l-bind	Sets the value of an attribute to the result of a JavaScript expression.
l-for	Create new DOM nodes for each item in an array.
l-model	Adds "two-way data binding" to an element. Keeps input element in sync with state.
l-ref	Specify a DOM node to become a ref
l-mask	Is removed when an element is rendered.

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

Property	Description
$el	The element the directive is attached to.
$render	Force rerender of props.
$event	The event object of an event listener.
$emit	Create and dispatch a custom event.
$refs	Get object of refs