A super tiny VueJS-like framework
This is highly experimental and WIP, do not use this in any production software
Axon is an very small(~4KB) JavaScript framework inspired by Vue.js.
Instead of using the v-
namespace for directives, it uses x-
.
This framework is not supposed or able to be "the next big framework", this is just a hobby project of mine. Functionality and compatibility is much more limited than in Vue, due to the difference in complexity of the codebase. Most of the API is either the same or very similar as in Vue, however make sure to read the docs.
Advantages:
- Smaller file
- Faster parsing and render
Disadvantages:
- No mustache (
{{}}
) expressions - Less built-in directives
- No component support
- Limited directive expressions (
x-if="foo.bar>=getBar()"
for example doesn't work, onlyx-if="isBiggerEqual(foo.bar)
would) - Much more
Axon can be installed from npm:
npm install axonjs -S
To start with Axon, you need to create a new Axon App:
//Axon({el, data, methods})
const app = new Axon({
el: document.querySelector("#myApp"), // Root element
data: {
name: "Lorem ipsum",
bar: "bar",
list: [1, 4, 2]
},
methods: {
setBar(val) {
this.bar = val;
},
logBar(){
console.log(this.bar);
}
}
});
<div id="myApp">
<div>
<label>Name:</label>
<input type="text" x-model="name">
</div>
<div>
<label>Bar:</label>
<input type="text" x-model="bar">
<button class="btn btn-primary" x-on:click="setBar('bar')">Reset Bar</button>
</div>
<div x-if="name.length">
<p>Hello <span x-text="name"></span>! The value of `bar` is <span x-text="bar"></span></p>
</div>
</div>
x-model="#property#"
: binds the property to the node and attaches an event to updatex-bind:#attr#="#property#"
: binds the value of the expression as the given attributex-text="#property#"
: inserts expression content as textx-html="#property#"
: inserts expression content as HTMLx-if="#property#"
: if the value evaluates to true, this node and child-nodes will render, else they will be ignored and hiddenx-on:#event#="method()"
: attaches the given method as event-handler for the given eventx-for="#variable# of #property#"
: loops over values in Array and creates elements with bound data for each