Basic Data Binding In VueJS

I started learning VueJS recently and thought I would share what I learn here. If you are interested in VueJS too, here’s something very basic you can look into.

I am assuming you already have some knowledge on JavaScript. If you don’t have any, it will not be a good idea to look at a framework right now.

This is a quick preview on how you can do basic data binding with VueJS.

First things first, let’s create a basic HTML Structure. Something like this.

Now, we have to include VueJS in our HTML.

There are several ways to do that. For now, let’s just load it from CDN like this.

Now, we have VueJS in our HTML.

We have a div in our HTML with ‘main’ ID. We want to work with that div. So, we have to create a new instance of Vue and let it know that we want to work on the element with an ID of ‘main’.

For now, we’ll just add our code in script tag for simplicity.

So, we let VueJS know that we are working on element with an ID of ‘main’. We have also added little data that we’re gonna use.

We are gonna create an input field and use a VueJS directive to bind our ‘message’ with that field. Here’s how we are gonna do that.

Now if you open the HTML in a browser, you will see that our message is shown in the input field.

Let’s create a paragraph to show our message from input field.

Here, in place of {{ message }} , our message will be shown.

We can do more here.

If you edit the text in the input field, you will see that the message in the paragraph also changes.

I have put together a little fiddle to show you how it works.

Go ahead, change the text in the input field.

I am really having fun with VueJS.

Although, this is really basic stuff, I hope you had fun.

If you have any thoughts or suggestions, please let me know through comments.

Leave a Reply

Your email address will not be published. Required fields are marked *