Category: VueJs

Quick Introduction to VueJS

Posted on by jomendez

vuejs

What is Vuejs?

What makes VueJs special is the fact that was designed to be incrementally adoptable, the core is dedicated to the view layer only but you can combine it with other libraries in order to create great single pages apps. Is very versatile and flexible yet lightweight, there is also components that allows you to handle routes and AJAX requests, hence is able to provide high quality results from a little gadget to a more complex SPA.

Why chose Vue.js?

  • The documentation is so good that it is the only tutorial you will need to understand and be able to dominate Vue.js efficiently.
  • The Vue.js community is growing.
  • Solutions through libraries and plugins well supported.
  • The way Vue.js do the things allows you to produce great code, efficient as well as readable.

Comparison with other frameworks

Vue.js vs React

Similarities:

  • Uses a Virtual DOM
  • Reactive and composable view components
  • Focused on the core library, so global state management and routing are delegated to third libraries

Differences:

  • Vue.js offers better performance than React, As you can see here.
  • In React all the UI components are represented rendering functions using JSX. In the other hand Vue.js provides render functions, provides support for JSX and also as default offers declarative templates (very readable by the way).
  • The ecosystem around custom renders makes React a winner in this aspect.
  • In matters of CLI Vuejs got leverage because of the limitations of React in this area, related with the lack of configurations.
  • Before to start working with React you should be familiar with JSX and ECMAScript 6, because most of the examples out there uses It, in the other hand Vuejs is more simple, to get it running you just need a single script on your page.

Vue.js vs Angular 1
Similarities:

  • Vue.js in an early stage of development inspire in the Angular syntax (e.g. v-if vs ng-if).

Differences:

  • Vue.js is way much simpler than Angular 1. A newbie is able to write functional code in a day with Vue.js, with angular, the learning curve is more higher.
  • Angular 1 ‘forces’ you to build the app under a specific and non-so flexible structure. Vue.js in the other hand is more flexible and modular.
  • Vue.js enforces a one-way data flow between components while Angular 1 uses two-way binding between scopes.
  • Vue.js offers better performance than Angular 1 because Angular one uses dirty checking with a cycle digests this can affect the performance.

Vue.js vs Angular 2:

Similarities:

  • Performance is equal because both are very fast.
  • Both are well suited for Enterprise environments.

Differences:

  • Vue.js is more flexible than Angular 2 in terms of the app architecture. Angular has a well defined architecture, Vue.js is more simple.
  • In terms of learning curve, Vue.js is extremely low while Angular 2 is too steeper.

To see more comparison of VueJs and other frameworks, you can go here:
https://vuejs.org/v2/guide/comparison.html

Simple app example with Vue.js.

Let's create an simple object in javascript

 
var example = {
message: ‘Hi Vue’
}

This is going to be the template

 
<div id="container">
{{message}}
</div>

Vue in action, binding the template with the object:

 
new Vue({
el: '#container',
data: example
})

Here is a working example

 
Let’s see an example making use of a Vue.js directive: v-for:

This is the html template:

 
<html>
 <head>
<script src="./vue/dist/vue.js"></script>
 </head>
<body>
 <div id="app-example">
 <p v-for="human in people">                        
 {{ human.name }}
 </p>
 </div>
</body>
<script src="./app/myapp.js"></script>
</html>

Binding the template with the data

 
var app = new Vue({
  el: '#app-example',
  data: {
    people: [
     {name: 'albert'}, 
     {name: 'john'}, 
     {name: 'justin'}
     ]
  }
});

Here is a working example:
 

More examples can be found here: https://vuejs.org/v2/guide/, the introduction guide to Vue.js is one of the best tutorials you'll find.

Let's see another example, this time we are going to create a custom filter to reverse the text:
 

Here is an example where I use more concepts like, filters, methods, computed, the code is commented but if you don't understand the concepts and how it works you can visit the Vue official documentation, or see this video from Egghead:
https://egghead.io/courses/develop-web-apps-with-vue-js