Vue Js Basics

Posted on  by admin

The simplicity of Vue.Js and its light weight make it an indispensable framework for frontend development.

Handling User Input

Vue 2.0 was released in 2016 and has been contending in a race with ReactJS.

It is proved to be faster and leaner, comparing to ReactJs and Angular 2.0. In addition, Its learning curve is relatively shorter than ReactJs and has one of the most outstanding documentation out there; you could end up falling in love with it before you finish reading the documentation.

It allows structural flexibility and makes reuse of components easy in your application. In short, it does not get on your way.

You have the power to write and structure your application however you want it.

  • This freakish feature makes it suitable for building big and highly scalable web applications.
  • In this post, I put up some basics to ace you down the path.

One of the most important things you need to know about VueJs before building your first VueJs app is the Vue Instance. Every Vue application has a root instance called Vue.

Vue instance follows a Model-view -ViewModel (MVVM patterns) and I prefer to define Vue instance as the link between your data and view. A Vue instance can be created by issuing new Vue() with optional objects which can contain template, data, methods and life hook callbacks and event.In another word, we can see Vue instance as an intermediary between your data and view.

If we have a data object containing details of “user A” and an HTML view, we can define our user object as this:. and view template as:. To create a Vue instance, we supply our data, that is userA and the id of a section in our view we want Vue instance to bind to.

Getting Started

In this example, our id is ‘app’. There are two ways to bind data to view in VueJs: One-way data binding and two-way data binding. One-way data binding binds data directly from your javascript code to DOM. A good example of this is displaying a friendly thank you message to customers after submitting a feedback form. To bind our message to view, we need to create a Vue instance with a message object and the id of a view template we are binding to as parameters.

Two-way databinding binds data from your Javascript code to view and from view back to the code such that a change to the data in either of the two sides results in a global change.

For two-way data binding, Vue provides a v-model directive for this purpose. Let’s get back to our feedback form and make some few changes. At the console, You can watch name field changing reactively as you modify the field in your browser.

Directives are powerful features in Vue, they are binding expressions with v- attribute. In previous examples, we made use of v-model directive to reactively bind data to DOM and view.

  • Directives make working with the view and repetitive tasks a breeze.

Besides this, you also get to define your custom directives with few lines of code. The next thing is to handle how the feedback form is submitted and also a logic to prevent double submission using Vue directives.

Here come Vue directives and methods. We add v-on:click and v-bind:disabled directives to submit button in feedback.html as shown below. app.js becomes:. v-bind:disabled directive disables submit button when isSubmitted is set to true while v-on:click listens to a click event and executes submit() method defined in the Vue instance.

Now that we have covered 3 fundamentals of VueJs, you can head on to VueJs official documentation and start building your next web applications with VueJs.
VueJS Useful Resources. Selected Reading. VueJS is a progressive JavaScript framework used to develop interactive web interfaces.