Event Listeners in VueJS


Bookmark and Share

Vue.js is a Javascript framework for user interface. There are many directives in Vuejs. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes. You can use the v-on directive to bind event listeners to DOM events.

We are binding a click event listener to a method named clickMe. Here’s how to define that method in our Vue instance. Here we have a counter variable initialized to zero. Inside the method, we are incrementing the value of the counter. So for each click on the button, the method is invoked. You will get the code here.

Here in this example, we are using two button and methods. One for incrementing the count and other for decrementing. You can see code here.

Note :-

For example,

This will give same result as before.

We can see another example. Here we have an input field where we type the url which is bound to the Js using v-model.  We have a button with click event listener which is bound to the method humanizeUrl. We have two urls, url and cleanUrl. url  is what we type in the input field and …

Read More

Two way binding in Vue.js


Bookmark and Share

Vue.js is a JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js is much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js supports Two-way binding. That is it keeps your data in sync with your DOM without you having to do anything. Two-way binding in Vue.js is MVVM pattern. That is Model View View Model. Like MVC, Model is the data object and view is what is displayed up. The Model can tie to the View and the View can tie back to Model.

In one way binding, JS variable is bound to the DOM.

Here when you change the data in JS, it will also update in the DOM. So you will get the updated message on the page. You can get the basic code here.

But in two way binding, Js variable can be bound to the DOM and data is also bound from the DOM back to JS.

Now, if you type anything into your input, your JS variable is updated with the change, which in turn updates your span. You can …

Read More

Getting Started with Vue.js


Bookmark and Share

 

Vue.js

What is Vue.js?

Vue.js is yet another JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js pronounced as “view.js”  is a much flexible and less opinionated framework than Angular. It’s similar to React but much simpler.

Vue.js gives you more freedom in designing your app, unlike Angular. So that you are not forced to do everything in their way. It can be adapted very easily to your existing application. You don’t need to know JSX, unlike React. All you have to do is to drop the link into your HTML page header and you are up and ready.

Overview

This is the basic folder structure.

– index.html

This is the main HTML template for your application. You can link your static assets inside the head tag while your processed assets will be auto injected in the body.

– src/router/index.js

This is the file which initiates vue-router with the given …

Read More