This is the mobile PDF version of Marina Mosti's Hands-on Vue.js for Beginners tutorial. This also includes the Vue.js for beginners intro slide by @juliobitencourt.
Download here: VueJS_Handson_For_Beginners.zip
Hands-on Vue.js for Beginners
Learning a new framework can be a very daunting process for any developer, especially for one that is still learning the base language (in this case JavaScript). This is why I have decided to create this series in which I will attempt to make the learning of Vue.js as easy and digestible as possible 🙂
I'm not a fan of making long drawn out introductions, so I will assume that if you're still reading:
You have some basic HTML/CSS/JS knowledge. You don't need to be an experienced front-end developer to take on on Vue as a development framework, but at the very least you need to be able to write your own HTML markup, understand the basic of how CSS works and, yes, how to write javascript. In the end, this is what this is all about.
That's it. No, really.
Vue as a library
There are several ways in which you can incorporate Vue into your web project. Let's start with the simplest one (which you will probably not end up using a lot).
Most tutorials/articles will assume that you have some understanding of how to set up a development environment in which you will use things like npm, webpack to set up your project - and while this is ideal because of what you get out of the box - we can start with a much simpler beginner-friendly approach. The reliable old <script> tag.
Go ahead and fire up your favorite code editor, and create a new file called index.html. If you don't have one yet, VS Code is a popular free choice.Â
[Read the complete tutorial...]
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue.js!</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>