Introduction to Vue.js

Added 7 months ago By Pelumi Ezekiel

Tags

Getting Started with Vue - An Overview and Walkthrough Tutorial

VUE is a javascript library framework. We're in a golden era of JavaScript libraries and frameworks. More and more companies are building out full, dynamic web apps in addition to - or in lieu of - traditional desktop applications. This means things are constantly changing and frameworks are going in and out of vogue, but the core aspect of what we're trying to accomplish remain similar.

Previously, I wrote a Getting Started with JavaScript guide that helped out a lot of beginner and intermediate developers. Vue.js is going toe-to-toe with React for popularity among JavaScript developers, so I'd like to offer the same straight forward and concise introduction for those who'd like to learn Vue as well. Let's get started!

Prerequisites Knowledge of HTML & CSS

Knowledge of basic JavaScript

Familiarity of ES6+ features and syntax Node.js and npm (or yarn) installed globally

Familiarity with REST APIs would be helpful, but we'll go over it.

Goals We're going to learn how to install Vue on our machine.

How to set up Vue

What is Vue? Vue (or Vue.js) is an open-source front-end JavaScript framework Vue is the view layer of an MVC application (Model View Controller) Vue is currently one of the most popular JavaScript libraries/frameworks Unlike other popular JavaScript projects, Vue is not backed by a large corporation like React (Facebook) or Angular (Google). Vue was originally written by Evan You and the open-source community. Setup and Installation There are two main ways to set up Vue - in a Node project, or directly injected into a static HTML file. I'd first like to take a look at setting up Vue in an HTML file, as it's the simplest setup and introduction. Those who have only ever used a library like jQuery will be most familiar with this method. If you've already used React or another JavaScript framework, feel free to skip to the next section.

We can just create a basic HTML file and add a link to a Vue CDN in the head, and create a with an id of app.

Static HTML File index.html

<title>Vue App</title>

We can create a simple "Hello World" with Vue. Using double brackets, we'll render message in app. In the tag, we'll link the data and the DOM. We create a new Vue, and the message property on data will

index.html

<title>Vue App</title>
<script>
  const App = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
    },
  })
</script>

At this point, it's not very impressive, and it's what you'll learn in the introduction of the documentation, but it drives home the important point that Vue is just JavaScript, and there's no need to get nervous about Node, Babel, Webpack, and so on.

We have come to the end of the lesson for today and when next I would be posting an article, I would discuss more on VUE.JS

đź’— From Jade Sass

Introduction to Vue.js was Authored by Pelumi Ezekiel
Get to know more about Pelumi Ezekiel
Author's Avatar

Pelumi Ezekiel

An avid gamer and a vue developer 

See All Pelumi Ezekiel Articles

All Tags

If you are looking for more, browse through our available tags.

Frontend Backend Fullstack Devops Mobile Career
0
193
1

Subscribe To Our Newsletter

Subscribe to our newsletter... Get weekly helpful tips on programming and video updates... We promise never to bug you. Just about two to three messages per week.