Intro

All right! Here comes the good stuff 😁.

¡Hola Mundo!

Our journey begins with what we'll call a Vue instance. This is where all the magic happens, and we create one by doing something like this in a JS file, or within <script></script> tags (don't mind the formatting):

new Vue(
    {
        el: '#my-app',
        data: {
            messasge: 'Hello from the Vue instance!'
        }
    }
);

The highlighted part of the code above is called the configuration object; basically the arguments we use to have our very own instance of Vue. In the coming example you'll notice this is what we use to tell the browser that this is going to be our app. This is often referred to as "the main instance" or "the root instance".

You can have as many of these as you want, but just need to remember to have a mounting point, in other words a DOM element you can attach your JS code to , so:

    <div
        id="my-app"
        ></div>

Line 2 in the markup and line 3 on the JS snippet must be the same id to make it work. Your Vue instance will live inside that div right there.

Perfect time to introduce you to the pen embeds from codepen we'll see throughout this site. The idea is that you can get your hands on real code as quickly as possible and I don't bore you with my text.

I have included many comments that I feel like will guide you through reading the code, and I trust you will be able to figure out most of the things presented in there, but I will probably add an overview about what is going on like I did above (and perhaps throw in there a video explanation 😉).

See the Pen 00. Importing Vue.js by @ackzell on CodePen.

WARNING

We will consider for this first part that we are importing Vue.js as a lib, from a place like a CDN like in the pen above. So no extra tooling needed just yet (how cool is that?!?).

We will move into a more advanced setup with stuff like Node.js and a CLI and those things we won't touch right now on the Development Workflow section.

This Building Blocks section is going to be explained in a certain order to give a general perspective of what to expect from working with the framework.

As we move on and dive more into the implementation of more complex examples, the more extensive use of these building blocks will naturally provide you with the experience of finding more use cases and better understanding of how they fit together.

These are the concepts we will cover in this section:

• Directives
• Methods
• Computed properties
• Watchers
• Filters
• Components
• Events
• Lifecycle hooks
• Mixins
• Custom directives
• Slots
• Animations and transitions

By the way, if you wanted to see a collection of all the pens in one spot, I've put them together in an awesome site called slides.

All right, let's get started!