Let's complete a quick practical exercise with Vue. This will give you an idea of how easy it is to get started:
- Create a new folder called 01-hello-vue. Inside this folder, create an index.html file with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue!</title>
<!-- development version of Vue.js -->
<script src="https://cdn.jsdelivr.net/
npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
});
</script>
</body>
</html>
You have just written your first Vue application! Yes, it really is that simple.
- Now, open the page in your web browser to see the result. You should see the following interpolated message:
Hello world!
- Now, open up the Developer Tools (F12), go to the Console tab, and type in the following:
app.message = "Cool!";
The message on the page should have changed. Isn't that nice?
Thanks to this little experiment, we already know that Vue apps are dynamic and reactive.
Just for fun, you can also try defining two different Vue applications in a single page; there's nothing wrong with that:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A story of two Vue apps!</title>
<!-- development version of Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="otherApp">
{{ otherMessage }}
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
});
const otherApp = new Vue({
el: '#otherApp',
data: {
otherMessage: 'Foobar'
}
})
</script>
</body>
</html>
In the preceding code, app and otherApp are defined as two separate Vue applications that take care of different parts of the actual DOM tree.
If you're using VS Code, then take a look at the Vetur (https://marketplace.visualstudio.com/items?itemName=octref.vetur) plugin. It provides syntax highlighting, code snippets, linting, auto completion, debugging support, and more.
Now, let's learn about the core concepts of Vue.