an-intro-to-vuejs

An Introduction to Vue JS

by

Marvin Amador

If you haven’t heard about Vue JS, you can think about it as the V in the MVC design pattern for modern web applications, pretty similar to React in terms of capabilities but with a much simpler approach.

VueJS is a progressive framework for building user interfaces.

One important thing to note is that with VueJs we can build Data-driven UIs and the same time enjoy the benefits of the separation of concerns.

To illustrate this in a better way lets see how can we implement a Component in VueJS

Template


<div id="app">

{{ name }}

</div>

Vue instance

var myVueInstance = new Vue({
  el: '#app',
  data: {
    name: 'NinjaDevs'
  }
})

result:

NinjaDevs

 

Simple right?. We just create an HTML template with some markup and then give it an id for reference later on in the Vue instance which is basically a configuration object with an { el } prop which is the element to be mounted via the CSS selector from the template and then another prop called { data }, The data object for the Vue instance. Vue will recursively convert its properties into getter/setters to make it “reactive”. The object must be plain: native objects such as browser API objects and prototype properties are ignored.

The Vue instance also proxies all the properties found on the data object:

When the instance is created you can access it like this

Instance

 myVueInstance.$data

Template

<pre>{{ $data | json }}</pre>

Handling Events

Remember our good old friend angular 1.x directives ? well Vue JS has a similar approach for listening to DOM events and assigning event handlers.

<button v-on:click="yoNinjaDevs">Yo to NinjaDevs!</button>

Now we can create the method that will bind to the v-on:click directive

var myVueInstance = new Vue({
  el: '#app',
  data: {
    name: 'NinjaDevs'
  },
  methods: {
   yoNinjaDevs: function() {
     alert('yo!' + this.name);
   }
  }
})

the v-on:* directive accepts all javascript DOM event listeners like v-on:submit / v-on:mouseover
if you find using this directive too often Vue provides a shortcut for that, just prefix the event listener name with an @ Symbol like this :

<button @click="yoNinjaDevs">Yo to NinjaDevs!</button>

One thing that I find really handy are the Modifiers:

Modifiers are a handy and declarative way of dealing with DOM events details, Modifiers allows us to remove DOM event handling from the methods, that way our methods will be more focus on data logic only.

Let’s see some examples to illustrate this in a better way:

  <a href="#" v-on:click="setCurrentNinja('ninja1', $event)">Ninja 1</a>

^ Note that also we can use inline JavaScript statements

var myVueInstance = new Vue({
  el: '#app',
  data: {
    currentNinja: ''
  },
  methods: {
   setCurrentNinja: function(name, event) {
     event.preventDefault(); // here we are dealing with event details, not part of our business logic actually  
     this.currentNinja = name;
   }
  }
})

Vue way :

  <a href="#" v-on:click.stop="setCurrentNinja('ninja1', $event)">Ninja 1</a>

The v-on:click.stop modifier will stop the click event propagation.

var myVueInstance = new Vue({
  el: '#app',
  data: {
    currentNinja: ''
  },
  methods: {
   setCurrentNinja: function(name, event) {
     this.currentNinja = name; // now the logic looks more clean.
   }
  }
})

Another useful case is when we are dealing with form submission events:

  <form v-on:submit.prevent="onSubmitHandler">

The submit event will no longer reload the page.

For the v-on directive Vue provides 4 Modifiers

stop
prevent
capture
self

Remember that you can also chain modifiers like this:

  <a href="#" v-on:click.stop.prevent="setCurrentNinja('ninja1', $event)">Ninja 1</a>

If you want to deep dive into Vue events this is the link Vue Events , you will find handy stuff.

Now that we have learned the raw basics we can start playing around, so let’s build a simple Vue App.

Our App will be a simple Github profile search 😀

See the Pen VueJS 2 github profile search by Marvin (@marvin-amador) on CodePen.0

In the next chapter we’ll be taking this simple app to the next level by :
Using ES6 syntax, creating reusable single file Vue components and routing.

Find this interesting ? have some bad words to say ? leave a comment 😀

Comments

comments

Powered by Facebook Comments