Posted on Jul 30, 2020

Vue.js For Absolute Begineers

#javascript #vue #tutorial #codenewbie

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 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>
  <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.

[+...]
<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.

<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 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>
  <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.

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: