Vue.js 101 - part 1: First step

I am now ready to begin my Vue learning journey :)

Click follow if you want to miss nothing. I will publish here on Dev.to what I learn from my Vue course the day before.

Without further ado here is a summary of my notes for day 1.

What is Vue.js

Vue.js is a progressive framework for JavaScript used to build web interfaces and one-page applications. Vue.js is also used both for desktop and mobile app development with Ionic and Electron framework.

Vue First Steps

To start learning the quickest as possible for now we will only working with the Vue CDN links. Later we will learn how to start a real production Vue app the right way.

So let's create a very basic Vue.js page

From your favorite code editor, Create a file name index.html. In that file create a basic html 5 file.

In this index.html head section we will add the Vue CDN link

 <script src="https://unpkg.com/vue@next"></script>

Still in index.html we will add this code to the body section

 <div id="app">

 </div>
 <script src="app.js"></script>

So a div with an id equal to #app and a script tag with source to app.js

Now in the same folder let's create a file name app.js
This file will contain our Vue.js code.

Once done, open the app.js and add this Vue initialization code

const app = Vue.createApp({

})

app.mount('#app')

So this code is simple. First we create an instance of Vue and then we mount the Vue app to the #app div that we just create in index.html.

So as you guess Vue will control/manage that div content.

Hello World Vue

A classic is a classic, we have to do a Hello World.

In index.html we will add this content to the #app div

<div id="#app">
    <h1>{{ message }}</h1>
</div>

The double bracket will tell Vue that this text is not a regular text but an Vue expression. Vue will then parse this expression and return the value in place double curly brace

In app.js add this code Vue.createApp

const app = Vue.createApp({
    data() {
        return {
            message: 'Hello World Vue'
        }
    }
})

The data function is where and how Vue return an object containing data. In this example data return an object with a property name message. The content of message is set to the string 'Hello World Vue'.

This message property can then be use inside our Vue code or outside our Vue code in the link mounted html element. (#app div)

To reference message property inside the Vue code we can use

this.message = 'Another message'

It's important to note that When this data changes, the view will re-render and show the new value.

To reference message property outside Vue code but inside link mounted html we can use double bracket

<div id="#app">
  {{ message }}
</div>

At run-time, Vue will replace the message property with is actual content.

Now let open index.html in our browser

For reference here is the full index.html follow by the full app.js

Render other variables type

Not just string can be render, numbers, date, array and any expression can be render by Vue in the dom.

For example let create couples more property. Open app.js and add those lines:

data() {
    return {
        message: 'Hello World Vue',
        number1: 500,
        number2: 250
    }
}

Open index.html and add those lines:

<div id="app">
    <h1>{{ message }}</h1>
    {{ number1 + number2 }}
</div>

Like mention early you can also put an expression inside curly bracket and Vue will render the expression result. In that case 750 will be display.

Conclusion

That's it for today. We did a small step but a very important one, tomorrow the journey continue and the pace will be a bit faster... See you! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: Follow @justericchapman