Creating Our Very First Vue App: The Vue Instance and Data Binding

Hello Friends 👋,

I welcome you to this tutorial on building web-apps with Vue.js. Along with building the web-app with vue, we will also understand the fundamentals of Vue.js and how it works. This story is part of the group of stories where we will master vue.js while building awesome apps and having great fun.

Creating our first vue app is actually very easy. In this story we will create our first vue app and also learn the basics of Vue.js — The Vue Instance and Data Binding. But before we begin, if you are still wondering why should you consider vue or looking for template to get started with, please check out Why Vue? and Awesome Vue.js Open Source Projects.

Creating Our Very First Vue App: The Vue Instance and Data Binding

First Things First

Let’s quickly explain what we did. In the gist above the line <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> imports the vue.js file from the jsdeliver content delivery network.

The Vue Instance

Let’s create a container div with id app and put it under control of vue. Modify your body tag as shown in following gist.

In code above, we have created the vue instance and stored it in myVue. The object passed as argument to Vue() function with field el associates vue with element in the DOM. The value of el is a string representing the CSS selector of the element.

Data Binding

So, we will create just one field called name and see how it re-actively changes to what we type. Modify the div with id app and the object passed to the vue instance as follows.

Hip hip hooray! We have created our first vue app. play around with it on this jsfiddle.

Okay! Okay! Okay! We have created our first app and it’s pretty awesome and easy to create. But now let’s have a look at some finer points. Did you notice that you can refer to the field of data object that we passed to new Vue() directly from HTML by just typing in it’s name? This is not how HTML works. This is the magic of vue. It makes all the field of data object and methods object directly accessible from HTML. In next story we will see more about how to refer to these objects from within the object that we pass to Vue.

With this I thank you very much for reading and following along and in the next story we will create a simple todo app and learn a few more concepts of vue.

You can get list of all the stories associate with this series in following article.

Resources

Vue.js Developers

Helping web professionals up their skill and knowledge of…

Sign up for Vue.js Developers Newsletter

By Vue.js Developers

A weekly publication with the best Vue.js news and articles. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Mayank Kumar Chaudhari

Written by

https://mayank-chaudhari.web.app/

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Mayank Kumar Chaudhari

Written by

https://mayank-chaudhari.web.app/

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store