{{announcement.body}}
{{announcement.title}}

Vue.js Tutorial 1 — Hello Vue

DZone 's Guide to

Vue.js Tutorial 1 — Hello Vue

Get started with Vue the right way!

· Web Dev Zone ·
Free Resource


girl-staring-out-at-mountain-range

Get started with Vue

With the age of SPAs (Single Page Applications) at its rise, JavaScript appears to be in it’s prime. A programming language that wouldn’t be considered a real programming language only a decade ago is now one of the most used on this planet. 

Naturally, it’s not just JavaScript in its pure form that is at the forefront of the revolution. We have a number of frameworks built on top of JavaScript that bring some order to the chaos. The most popular are, of course:  

I have worked with React and Angular in the past. I have never had any experience working with Vue.js before. Therefore, I decided to create my first Vue.js project and take you with me on this exciting exploration. 

The plan is to get used to writing some basic Vue and then merge into a Laravel backend to create something more powerful. It’s clear at this stage that I’m a big fan of Laravel. You can read about why you should be one too here. 

You may also like: Vue.js Tutorial: Vue.js Development with Storybook and Applitools.

Step 1

Launch your favourite IDE and create intro.html file. I personally used PhpStorm for this. 

Intro.html file

Intro.html file

Now, let’s go back to your very first HTML class and add the basic HTML, head and body tags.

<html>
<head>
</head>
<body>
</body>
</html>


Step 2

Import the vue by inserting the following line inside your <head>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


Step 3

Let’s add a completely unexciting div to the body of our page.

Note: I suggest that you type up the code that I’ll be showing you, instead of copying and pasting it. You will get familiar with the syntax quickly.

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


Step 4 

Now, view your website in a browser and investigate your output… 

Initial output

Initial output

Step 5 

Text Interpolation

Now is the time to add fireworks to our static website, and sprinkle it with some script.

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


Refresh your website and celebrate the fact that you have just created your first Vue app. You have successfully linked the data and the DOM. That means if the value of the message is updated, the displayed message will get automatically refreshed. Let’s test this now. Launch the console in your browser and update the value of message. 

app.message = "Hello again!”


Ouput from console

Ouput from console

Isn’t that nifty?


Step 6

Directives

Attributes prefixed with v- are called directives and are provided by Vue. To test this, we’ll create another app and use our wit to name it “app2.”

<div id="app-2">
    <p v-bind:title="message">Hover over this text to view the load time</p>
</div>


Then, append the code

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'You loaded this page on ' + new Date().toLocaleString()
    }
})


This is the output you’ll get if you've done everything right


Test output #2

Test output #2

Again, those values are linked and can be updated in real time. Go to the browser console and update the value like this

Checking output in console

Checking output in console

Conclusion

In this tutorial we have barely scratched the surface of the true power of Vue.js. Nevertheless, we got familiar with the basics — importing Vue to a project, creating our first instance of Vue application and learning about directives. 

Stay tuned for the next tutorial where we’ll learn conditionals, loops and handling user input. 


Further Reading

Topics:
vuejs 2 ,vuejs 2 tutorial ,angularjs ,reactjs ,tutorial

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}