vox.js
Vox is a tiny (β7KB) JavaScript library that allows you to enhance your HTML with declarative two-way data bindings, using simple, native-like attributes (directives).
β
<script src="vox.min.js"></script>
<div vox="{ world: [ 'π', 'π', 'π' ] }">
hello, <span vox:text="world.join(' ')"></span>!
<br/>
<button vox:onclick.once="world.push('π½')">
click...
</button>
</div>
<script>
const app = vox();
app.init();
// ...that's all, folks!
app.exit();
</script>β
DOCUMENTATION
HOME
INSTALLATION
MAIN CONCEPTS
API REFERENCE
SHOPIFY
RESOURCES
β
demo or it didn't happen.
<counter/>
<div vox="{ count: 0 }">
<button vox:onclick="(count--)">
−
</button>
<span vox:text="(count)"></span>
<button vox:onclick="(count++)">
+
</button>
</div>β
<dialog/>
<div vox="{ open: false }">
<button vox:onclick="(open = !open)">
click
</button>
<div vox:if="(open)">
hi! π
</div>
</div>β
<tabs/>
<div vox="{ tab: 0 }">
<button vox:onclick="(tab = 1)">
tab 1
</button>
<button vox:onclick="(tab = 2)">
tab 2
</button>
<button vox:onclick="(tab = 3)">
tab 3
</button>
<div vox:hidden="(tab !== 1)">
cupcake π§
</div>
<div vox:hidden="(tab !== 2)">
cookie πͺ
</div>
<div vox:hidden="(tab !== 3)">
chocolate π«
</div>
</div>β
<to-dos/>
<div vox="{ todos: [ 'βοΈ', 'π»', 'π€' ] }">
<ol vox:if="(todos.length > 0)">
<li vox:for="(todo in todos)">
<span vox:text="(todo)"></span>
<button vox:onclick="{
todos.splice(todos.indexOf(todo), 1);
}">
×
</button>
</li>
</ol>
<form vox:onsubmit.prevent="{
todos.push(els.input.value || 'β¦');
els.input.value = '';
}">
<input placeholder="β¦" vox:el="('input')"/>
<button>add to-do</button>
</form>
</div>β
COPYRIGHT Β© 2021 PAULA GRIGUΘΔ AND CONTRIBUTORS