Vue from the TOP — Introduction
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
A framework is like a pre-built platform so you don’t have to do the same stuff over and over again. One of the best examples of a framework is the CSS framework used to create responsive websites — Bootstrap. It consists of a grid system, that helps developers to structure the content based on the device.
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
A Front End Framework is used to help developers build scalable web applications. A web application is similar to your mobile applications in a lot of ways. They are more efficient than standard websites and they run and load a lot quicker. These web applications are also called as SPA ( Single — Page -Applications).
One good example of a single page application vs a normal website would be Youtube.com vs Amazon.com
Amazon
Youtube
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
By now I’m sure you must have heard about the mighty Angular and React. They are very popular frameworks with huge communities on their own. Angular is backed by Google whereas React is backed by Facebook. Vue, on the other hand, is backed by a huge community of actively contributing developers. The community for Vue is so strong that, in terms of industry adoption rate and development rate, it’s on par with React.
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
You might be wondering why do you need to consider Vue for your next project or to take up Vue as a career option. Here are a few reasons.
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.jsInclude 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
We can specify the data property inside the Vue instance to return the ‘reactive’ variables.
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 we will look into how to take the value from an input field and plug it into a data property a.k.a variable.
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.
Alright! That's it for this post. I'm intentionally keeping it short so it will be more interesting and quick to understand.
If You enjoyed this post, consider checking out my full course on Vue JS Fundamentals for Beginners on Cynohub.
