Get started - Built in directives

What is Valyrian.js?Installation Hyperscript/JSX Components Lifecycle methodsDirectives

Built in directives v-model Custom directives

Plugin system Router plugin Request plugin Service worker plugin Node plugin Store plugin Hooks plugin Signals plugin

Built in directives

There are two types of directives in Valyrian.js, Rendering and Reactive directives.
As the most of events trigger a redraw of the view almost all of the directives listed in here are rendering directives. Only the v-model directive is reactive.

v-if

Works as Vue's v-if directive or ember if helper. It renders a vnode if the referenced value is thruthy.

let value = true;
v.mount('body', () => <div><span v-if={value}>Hello worldspan>div>); // -> Hello world
value = false; 
v.update(); // ->

v-unless

Valyrian isn't template based so we can't handle a v-else like directive. Instead of v-else we have a v-unless directive.
Works as ember unless helper. It renders a vnode if the referenced value is falsy.

let value = true;
v.mount('body', () => <div><span v-unless={value}>Hello worldspan>div>); // -> 
value = false; 
v.update(); // ->  Hello world

v-show

Works as Vue's v-show directive. It renders a vnode and only changes it's display style value.

let value = true;
v.mount('body', () => <div><span v-show={value}>Hello worldspan>div>); // -> Hello world
value = false; 
v.update(); // -> Hello world

v-for

v-for directive works like this:

On the element set the v-for directive to an array.
Put a function as a child to process the elements of the array.

Think of it as a map function that returns a list of vnodes.

let items = ['autem', 'possimus', 'non', 'magnam'];
v.mount('body', () => <ul v-for={items}>{(word, i) => <li>{i} - {word}li>}ul>);

<ul>
  <li>0 - autemli>
  <li>1 - possimusli>
  <li>2 - nonli>
  <li>3 - magnamli>
ul>

v-class

v-class directive receives a object with boolean attributes to toggle classes on the dom.

let classes = {
  world: true
};
v.mount('body', () => <div class="hello" v-class={classes}>div>); // -> 

classes.world = false;
v.update(); // -> 

classes.hello = false;
v.update(); // ->

v-html

The v-html directive is used to render raw html. It is just a helper directive and it does not improve performance because Valyrian.js is already very fast with vnodes.

v.mount('body', () => <div v-html="Hello world
">div>); // -> Hello world

This method helps in situations where you need to render, as an example, a svg string.
For the same reason that Valyrian.js is very fast rendering vnodes, there is no need for a v-text directive to optimize performance, conversely, adding a v-text directive slows down the rendering process.

v-once

The v-once directive is used to render just once and skip all subsequent render updates. It is similar to write the lifecycle onbeforeupdate={() => false}

let Store = {hello: 'world'};
v.mount('body', () => <div v-once>Hello {Store.hello}div>); // -> Hello world
Store.hello = 'John Doe';
v.update(); // -> Hello world