Axino vs Vue.js : Part 1 : The basics

Image for post
Image for post
Axino vs Vue.

Context: Link: Getting started wih Axino

1. Declarative rendering:

Vue:

// HTML<div id="app">
{{ message }}
</div>
// JSvar app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
}

Axino:

2. Iterating over an array of data:

Vue:

// HTML
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
// JS
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})

Axino:

3. Handling user input:

Vue:

// HTML<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
// JSvar app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})

Axino:

4. Creating custom components:

vue:

// HTML
<div id="app-7">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key",
which will be explained later.
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
// JS
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
})

Axino (creating the custom List component as a child of the Div component, using inheritance):

5. Form input binding:

Vue:

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

Axino:

Author, scientist (Physics PhD), philosophy, Sci-Fi, thrillers, humor, blues and Irish music, green energy, origins of consciousness.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store