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.
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.