DEV Community 👩‍💻👨‍💻

Cover image for Getting Started with Vue.Js
Abdur Rehman Khalid
Abdur Rehman Khalid

Posted on

Getting Started with Vue.Js

I am basically a Junior Angular Developer, but recently I looked at the code of the Application written in Vue.Js, the syntax of the application looked very simple and easy to understand, that was only one reason for giving some consideration about learning VUE. Being working on a first developer job, I have to learn new things in order to grow, so for the growing purpose it is very important to work on the side projects, so for side projects, I decided to learn VUE as I felt that it is quick to get started and easy to learn as well.

What is Vue.Js?

Vue.Js is a Progressive Framework for building a small scale, highly interactive, and fast applications. Vue.Js Starts with some core concepts to strong highly sophisticated concepts such as components and State-Management. Vue.Js is best for small single-page applications where the performance and the size of the build are very important.

In this Article We Will Be Looking at How to Get Started with Vue.Js and Writing and Understanding the Hello World Application using Vue.Js

So Let's Get Started

First of All, While Learning a New thing, it is very important to have all the resources that can be used to learn. So here I am providing the link to the official documentation of the Vue.Js. As the documentation is the best way to learn about anything.
Official Vue.Js Documentation

Step No 1

In this step, we will be adding the Vue.Js Library to our Application and there are multiple ways to do this, but for learning purpose and for the sake of simplicity we will be working with the CDN, that we can simply copy into our applications and get started with VUE.Js quickly.
Adding the VUE with CDN

Step No 2

Creating a Simple JavaScript file in which we will be dealing with Vue instance and data and adding that file just above the closing tag of the body.
Adding External Js to Start Work

Now As we are all Set Let's Start Writing the Hello World Application, sometimes it feels very boring to write the Hello World Application but it provided an excellent view of how the thing that we are going to learn will be after some time

Creating a Vue instance in External JS File

Getting Started With Vue.Js Instance

Here we are simplifying doing the following things.

  1. Creating a new Vue instance using the New keyword.
  2. We will be attaching this instance in HTML file with that element of div who has the Id of "app".
  3. In data, we have defined a simple property named "message" that contains the hello world message.

Rendering the Data in HTML

Rendering into HTML
Here we can see that a div has an id of app, that makes it associate with the el property in the JS file that made earlier in which we defined, el and data.
The 'message' in the double curly braces will be printing the string assigned to the message in the Js file.

So Writing and Getting Started with Vue.js is that simple and for the next post, we will be talking about how to render a list efficiently and easily in Vue and we will also be talking about directives in Vue.Js as well.

Top comments (3)

Collapse
 
perpetual_education profile image
perpetual . education

Vue is so elegant! It's fun to bust out a CodePen and just get to prototyping. If you're going to start building more complex stuff - you can check out this great course: dev.to/perpetual_education/vue-tra... - the value is insane.

Collapse
 
abdurrkhalid333 profile image
Abdur Rehman Khalid

Thank you very much for your suggestion, I will definitely check out the course that you have mentioned.

Collapse
 
perpetual_education profile image
perpetual . education

Jeffrey is a great teacher. We'd love to hear your review if you take it.

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. 👀

Join the Hackathon <-