Vue.js For Absolute Begineers 
Tags: javascript, vue, tutorial, codenewbie
Published: 2020-07-30 15:51:35

I've got my hands on vue.js lately and most tutorials I'd seen out there are not so beginners friendly, so i'd decided to start this series to help #codeNewbies go from beginners to intermediate in Vue.js.

> **Please Note ⚠️:** You should have a basic understanding of HTML, CSS and JavaScript before learning Vue.js. If you do not, [here](https://www.w3schools.com/) are great resources to help you get started.

## Introduction

Vue.js is a pogressive JavaScript framework for building interactive user interface. Vue.js is considered as a goto framework by many developers because it is:
- Easier to learn compared to other frameworks/libraries like react, angular,... 
- Have an easily understandable structure.
- Better runtime performance ...

### What can i build with Vue.js ?

Below are some stuffs you can build with vue.js
- Single Page Applications (SPA)
- Multi Page Applications
- Native Android and iOS application - With Vue native

_____

## Getting started
Open your favourite text editor, create a new `index.html` file and copy the basic html code below.
```html
<html>
  <head>
    <title>Vue.js Tutorial</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <div id="wrapper">
    </div>
  </body>
</html>
```
And, lets include the vue.js library source file in our code.
```html
[+...]
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
```
Now, lets go ahead and create a new vue instance using the `new` keyword.
```html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
[+...]
<script>
  var app = new Vue({
  el: "#wrapper",
  data: {
     myMessage: "Welcome to my vue app."
  }
});
</script>
```

### So what have we done?

The `new Vue(..` keyword is to create a new instance from the Vue class. And this requires **one important** parameter which is the `el`.

The `el` is to specify where we want to wrap our vue application, and in this case it's our `<div>` with the attribute id = wrapper

> **Recall:** In [DOM manipulation](https://www.w3schools.com/js/js_htmldom.asp) that `#` (hash) is to id, while `.` (fullstop) is to class. So that's why our `el` value is #wrapper.

### Data

During our new vue initialization, we'd added a second parameter `data` - This is basically where we are going to house all the local properties we will be using while rendering our application, which is 100% reactivate (more on this later).


To access our property *myMessage* for example, our `index.html` file should look like this.
```html
<html>
  <head>
    <title>Vue.js Tutorial</title>
  </head>
  <body>
    <h1>Hello World</h1>
    <div id="wrapper">
        <p>{{myMessage}}</p>
    </div>
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  var app = new Vue({
  el: "#wrapper",
  data: {
     myMessage: "Welcome to my vue app."
  }
});
</script>
```
You'll notice we wrapped our myMessage in a mustache `{{}}` structure. Other ways we can display our local properties is using the `v-text` and `v-html` attribute.
The difference between the v-text and v-html is that.
- v-text will display the data as plain text, while
- v-html will output the real html.
> Run the pen below to see the difference in action.
{% codepen https://codepen.io/asaoluelijah/pen/abdgaNE %}

## Conclusion
This article is just an introduction to what vue.js is, and how to get started. In coming articles, I'll be covering crucial topics under Vue.js including:
- Binding data
- Methods
- Components
- Looping in Vue
- Conditional rendering (if & else)
- Vue CLI
- Nuxt.js maybe?

And... we will be learning all this by building real world applications 🎊

Okay, why not follow me on [twitter](https://twitter.com/asaolu_elijah) so you'll be notified first when I write a new article.


Thanks for reading 👏