DEV Community

loading...
Cover image for Vue.js 101 - part 1: First step

Vue.js 101 - part 1: First step

Eric The Coder
Businessman and blogger #Javascript, #Python and #PHP. My favorite frameworks/librairies are #React, #Laravel, and #Django. I am also a fan of #TailwindCSS
Updated on ・3 min read

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

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

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

Enter fullscreen mode Exit fullscreen mode

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

 <div id="app">

 </div>
 <script src="app.js"></script>
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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'
        }
    }
})
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Now let open index.html in our browser
Hello World

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

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
    }
}
Enter fullscreen mode Exit fullscreen mode

Open index.html and add those lines:

<div id="app">
    <h1>{{ message }}</h1>
    {{ number1 + number2 }}
</div>
Enter fullscreen mode Exit fullscreen mode

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

Discussion (2)

Collapse
daniel_j_4b5a2174bf88d3c4 profile image
Daniel J

I tried to follow along, but I had to change the CDN script to use Vue3 to make it work.

  <script src="https://unpkg.com/vue@next"></script>
Enter fullscreen mode Exit fullscreen mode
Collapse
ericchapman profile image
Eric The Coder Author

Oups... You are right. I will change it.,Thanks