Among the wide variety of front-end frameworks, one of the most popular is Vue, which provides an efficient and simple way to create websites.
In this article we will focus on Vue version 2.0, and we will see who is the creator of this great framework, a general introduction of its main features, a brief description of the libraries that make up the Vue ecosystem, a list of resources to learn and finally some examples of jsfiddle code for those who want to play a little. We begin!
Who is the creator of Vue?
Whenever I use a library or framework I like to know who its creator is, the creators or what company is behind it. In this particular case its author is "Evan You" who has worked in Google's development team and is known for his participation in Meteor (let's go a machine). Although for me, the most interesting thing is how he has managed to monetize the creation of Vue so that he can dedicate 100% of his time to it. If you are interested in this topic I leave the link to Evan You's profile in patreon.
What is Vue?
As described on its official website it is a framework for building user interfaces. The author defines it as "The progressive javascript framework", which means that it is not a monolithic framework (such as angular) and the core of the library focuses only on the visual layer (as well as react) and allows very easy integration with existing libraries or projects.
For rendering, Vue uses Html based templates that provide readability and reduce the learning curve, it also has support for "render functions" and "jsx" but honestly changing to Vue to use jsx , I don't see it.
Vue is inspired by the MVVM pattern and is component-oriented, allowing us to create custom Html elements that encapsulate our code so that it is reusable. In this way, two-way data-binding is used for communication between the view and the data model.
Similarly, a component can contain other components in a hierarchical way, and for communication between them Vue uses one-way data-binding. Thus, from a parent component you can change the data of a child component (the attribute "props" is used for this purpose), but from a child component you are not allowed to change the data of the parent component directly; for communication from the child component to the parent you use events, known in Vue as "custom events".
As an advanced functionality, Vue allows the creation of "Single file components", which are files with extension .vue that allow the creation of components that encapsulate both the html, css and javascript code. It is possible thanks to tools such as webpack, browserify and (vue-loader), let's see an example:
I can say that my experience with CFS has been very satisfying and the truth is that they are a blast. It facilitates a lot the task of creation and maintenance of components by having everything in a single file, also allows easily apply own styles to each component thanks to the scoped attribute.
Ecosystem of libraries around Vue:
- SPA Routing: vue-router (core plugin).
- State Management: vuex (core plugin) implementation of "redux" for Vue. This allows to centralize the state of all the components of the application.
- Ajax and http (data fetching): To make http or ajax requests I recommend using vue-resource or axios, but this is already a matter of taste.
- Server Side Rendering: Allowing views to be rendered directly from the server makes them indexed by search engines facilitating SEO. See nuxt.js
- IOS and Android: It has support for the creation of native components in Android or IOS and an official collaboration with weex, a multiplatform framework developed by Alibaba. This allows the creation of components with Vue that can be rendered in the browser as well as in android and ios.
Tools
- vue-cli: It is a terminal tool that allows us to create templates or components. vue-cli
- vue-devtools: Chrome extension for Vue debug.
Conclusion
In this article, we have seen an introduction to the core, how Vue works with components and an overview of the ecosystem of libraries that surrounds it. I hope it helps you to awaken your interest and desire to work with it, because for me it is not a fad and it is here to stay and continue competing, or even, why not, surpass the frameworks on the market such as Google's Angular or Facebook's React.
Finally, I leave you with a list of his main virtues:
- It has a shorter learning curve than other frameworks.
- The documentation is very good.
- Easy to use.
- It is easy to integrate with other libraries.
- It has a good community which is constantly growing.
- Its performance is very good. (benchmark)
- It weighs very little, which is always appreciated. Vue 2 + Vuex + vue-router ~30kb gzipped.
Resources
- The official documentation.
- In awesome-vue you can find all kinds of bookstores in Vue.
- Laracast course: learn-vue-2-step-by-step.
- Udemy course: vuejs 2: the complete guide. (one of the best I've seen)
- Egghead.io VUE.JS COURSES.
- Book by Alex Kyriakidis, Kostas Maniatis, and Evan You. Mejesty of Vue.js 2.
Examples
Hello World
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})Two Way Data Binding
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})Filters
new Vue({
el: '#app',
data: {
msg:'hola'
},
filters: {
uppercase: function(value) {
return value.toUpperCase()
}
}
})Conditional Rendering
new Vue({
el: '#app',
data: {
show: true
}
})List Rendering
new Vue({
el: '#app',
data: {
items: [
{ text: 'item 1' },
{ text: 'item 2' },
{ text: 'item 3' }
]
}
})Simple Component
Vue.component('component', {
template: '<div>Component!</div>'
})
// create a root instance
new Vue({
el: '#app'
})One Way Data Binding
Vue.component('component', {
template: '<button v-on:click="increment">{{ counter }} {{initialcounter}}</button> </div>',
props: ['initialcounter'],
data: function () {
return {
counter: this.initialcounter
}
},
methods: {
increment: function() {
this.counter += 1
this.$emit('increment')
}
}
})
new Vue({
el: '#example',
data: function () {
return {
initialCounter: 0,
counter: 0,
}
},
methods: {
parentincrement: function() {
this.counter += 1
},
initialIncrement: function() {
this.initialCounter += 1
},
}
})
