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