Home
Attributes
Scipting
npm
github
VSN.js Alpha Examples
Input Binding
<input id="test" value="bound value" /> <span vsn-bind="#test.@value"></span>
XHR
<form action="/relay/" method="get" vsn-xhr="#xhr-result.@html = response;?(#xhr-result h2).$color = '#000000';"> <label for="heading">Heading</label> <input type="text" name="heading" /> <label for="content">Content</label> <input type="text" name="content" /> <input type="submit" value="Go" /> </form> <div id="xhr-result"></div>
DOM Events
<button vsn-on:click="counter.v -= 1">-</button> <span vsn-name="counter" vsn-set:v|integer="0" vsn-bind="v"></span> <button vsn-on:click="counter.v += 1">+</button>
Query Operators & Conditionals
<div class="active"> <button vsn-on:click="?>(:parent).@class -= 'active'" vsn-if="'active' in ?>(:parent).@class">Remove Active</button> <button vsn-on:click="?>(:parent).@class += 'active'" vsn-if="'active' not in ?>(:parent).@class">Add Active</button> <button vsn-on:click="?>(:parent).@class ~ 'active'">Toggle</button> <span vsn-if="'active' not in ?>(:parent).@class">Inactive</span> <span vsn-if="'active' in ?>(:parent).@class">Active</span> </div>
Lazy Execution
<div vsn-lazy=" $background = 'url(https://dc6cr6ogwfkrx.cloudfront.net/vsnjs/img/logo.7ae679883cf6.svg) no-repeat'; $minHeight = 150px;"> </div>
Other Info
You can install vsnjs in your project by running:
npm install vsn
