Vue from the TOP — Introduction

Vamshi Krishna
Dec 11, 2018 · 6 min read
Image for post
Image for post

Hello, welcome to VUE from the TOP. An introductory series on Vue JS. This series will consist of introducing Vue JS to upcoming web developers and teach Vue JS to experienced Front End Developers.

This series is aimed at beginners and will progressively get deeper into the subject matter and the library.

Framework

Frameworks exist to remove the hassle to re-invent the wheel every time you want to implement a grid system on your website. You can just import the bootstrap framework/library and you can build your website on top of it.

Front-End Framework

One good example of a single page application vs a normal website would be Youtube.com vs Amazon.com

Amazon

Image for post
Image for post
Amazon.in

Youtube

Image for post
Image for post
Youtube.com

In the case of Youtube we are not re-rendering a lot of components, once the ‘components’ or the parts of the website are loaded, we are just replacing the content that resides in them. Resulting in much faster page loads and much snappier feeling. On the other hand, Amazon reloads the whole page, with all the components. ( They must have had their reasons to do so, but this example was just for explanation ).

Most Front-End Frameworks use Virtual DOM to manipulate the actual DOM. The way this works is, the framework creates a virtual dom for the developer to work with, making it relatively easy for the developer to add reactivity/ other features that would, in fact, be much more troublesome and would include a lot of code. The framework does all the hard work for us and gets the results we were aiming for.

Popular Front-End Frameworks

Vue is created by Evan You from there on it has been adopted by huge companies such as Alibaba, Netflix, Xiaomi, Adobe, etc. Even Facebook has its timeline built with Vue. ( source ).

Why Vue JS

Vue is as powerful as React and Angular. It’s even efficient in certain aspects.

Vue has its own state management system Vuex just like React’s Redux.

The support for .Vue files make maintaining larger projects easier.

There is a lot less boilerplate when compared to the other two.

It’s very flexible, as in, it can be used as a small part in your existing website/application or you can create your entire project around it.

Ready to give it a shot? Let’s go!

In this post, we will be looking into how to integrate Vue into an existing project. This method doesn’t usually need any sort of installation and can be done relatively quickly.

First things first, let’s create a simple HTML page, with absolutely nothing in it. So consider this as an example of how you might want to integrate Vue into your own project.

In our HTML page, we have to include the VUE CDN, you can grab the CDN source link from here.

https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.min.js

Include it in the Script tag and add it to the end of the body tag. It should look something like this.

That’s it, we have successfully integrated Vue into our page. Simple isn’t it. Now going ahead to actually using it.

We can use Vue by creating a new Vue instance in the script tag outside the HTML tag.

Vue has its own way of templating, so it has its own way of organizing variables, functions and other properties which we will soon be looking in further tutorials.

We can create a new Vue instance as follows.

new Vue({})

Inside the Vue instance, we need to tell Vue which DOM it should be associated with. So here we will create a new div with an id of #app.

We can bind the div to he Vue instance so that Vue can then create a virtual dom for that div and we can fully utilize the capability of the framework. We do this by using the ‘el’ property inside the Vue instance and directing it towards our preferred div’s id.

new Vue({
el: '#app'
})

Now the div with the id of #app is bound to the Vue instance. The Vue instance consists of multiple properties which we can use to manipulate the DOM. One of those properties is the Data property.

The Data property is used to hold the variables, that you would like to use inside the bound div. These variables inside the data property are ‘reactive’, in the sense, Vue places a watcher on them, noting of their changes and whenever any variable is changed, all the other properties associated with it change as well.

Data Property

new Vue({
el: '#app',
data(){
title: 'Hello World'
}
})

Now we can use the variable ‘title’ inside the DOM using the double curly braces, also known as mustache braces. So we can go..

<h3>{{title}}</h3>

The overall HTML page, for now, should look something like this.

Two Way Data Binding

Now as we discussed earlier, Vue is reactive by nature, so whenever a particular variable gets changed, all the components linked with the variable will get updated as well.

First, we will look into how to store the value of the input field into a data property.

We can do that by using the v-model directive. The v-model directive binds the input field to a data property, by then, it adds an event listener to the input field so that whenever the input field changes, the data property gets updated as well.

Let’s create a new data property and let’s name it input. And let’s bind it to the input field using the v-model directive.

<input type="text" v-model="input" placeholder="Enter Text">

Now whenever you enter any text into the input field, it automatically gets stored into the input data property.

Now we can either console.log the value and see it update as we type in, or we can bind it to a <p> tag. And can see it update in real-time.

Now we are going to use two directives that we have learned above and use them in unison. We will take the input from the input field, store it in a data property, then bind the data property to a paragraph tag. It should look something like this.

Image for post
Image for post

Alright! That's it for this post. I'm intentionally keeping it short so it will be more interesting and quick to understand. Follow me here on Medium to get updated when I post the next one. ( should be in another couple of days ).

My Point of Vue

Everything Regarding Vue JS and its counterparts.

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