Salman Rahman Desh
UI/UX Designer, Foodie, Mozillian, TechLover!
by
Salman Rahman Desh
Frontend Developer at Prochito IT Solution
twitter: @Salman_Desh
Ex-employee of meteorJs and Google
based on independent 3rd party comprehensive rendering benchmark
this comparison was used by Evan You on UtahJs Conf. 2016
VueJs is a progressive framework for building progressive WebApp user interface.
//HTML
<div id="app">
{{ message }}
</div>
//JavaScript
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Hello Vue!
//HTML
<div id="app">
<span v-if="seen">Now you see me</span>
</div>
//JavaScript
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
Now you see me
//HTML
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
//JavaScript
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Milk' },
{ text: 'Sugar' },
{ text: 'Cat' }
]
}
})
v-on -> listen to DOM events
example: v-bind:href="url" or :href="url"
v-bind -> data binding
example: v-on:click="action" or @click="action"
v-once -> perform one time (will not update)
v-html -> output raw HTML
v-show -> display something
v-model -> two way data binding
v-model.lazy -> sync after change
v-model.number -> to input number only
generally used on form input
v-model.trim -> to trim automatically
Obj.defineProperty()
How changes are tracked
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
new Vue({
el: '#example'
})
<div id="example">
<my-component></my-component>
</div>
Very lightweight & flexible. Doesn't use any third-party libraries. Not even jQuery
Vue.use(Framework7Vue);
new Vue({
el: '#app',
framework7: {
root: '#app'
}
})
Vue.use(Framework7Vue);
new Vue({
el: '#app',
framework7: {
root: '#app',
material: true
}
})
Step-1: Link framework7.material or framework.iOS CSS files
Step-2:
Change material: true
to app-settings
Vue.use(Framework7Vue);
Vue.component('page-about', {
template: 'about'
});
new Vue({
el: '#app',
framework7: {
root: '#app',
material: true,
routes: [
{
path: '/about/',
component: 'page-about'
}
]
}
})
<body>
<template id="main">
Main page
</template>
<template id="about">
About page
</template>
</body>
By Salman Rahman Desh