A personal note on "The Vue Handbook: a thorough introduction to Vue.js" on Freecodecamp

vue-handbook-note.md

Vue notes

Reference: Freecodecamp Vue handbook

Why developers love Vue

First, Vue is called a progressive framework.

• It adapts the needs of the dev. Other fw requires a complete buy-in from a dev or team and often want you to rewrite an existing application because they require some specific set of conventions. Vue happily lands inside your app with a simple script tag to start with, and it can grow along with your needs, spreading 3 lines to managing your entire view layer.

• Vue.js is probably the most approachable front-end fw around. Some people call Vue the new jQuery, because it easily gets in the app via script tag, and gradually gains space from there.

• Vue was built by picking the best ideas of fw like Angular, React and Knockout, and by cherry-picking the best choices those fws made.

Where does Vue.js position itself in the frameworks landscape?

Vue took many good ideas from React, most importantly the Virtual DOM. But Vue implements it with some sort of automatic dependency management. This tracks which components are affected by a change of the state so that only those components are re-rendered when that state property changes.

In React, on the other hand, when a part of the state that affects a component changes, the component will be re-rendered, and all its children as well.

One big difference with React is JSX. While you can technically use JSX in Vue, it's not a popular approach and instead the templating system is used.

• Any HTML file is a valid Vue template. JSX is very different than HTML, and has a specific learning curve.

• Vue templates are very similar to Mustache and Handlebars.

The official state management library, Vuex, follows the Flux architecture and is somewhat similar to Redux in its concept. While you can use Redux with Vue, Vuex is specifically tailored for Vue and its inner workings.

One things that puts Vue in a different bucket compared to React and Angular is that Vue is an indie project: it's not backed by a huge corporation like Facebook or Google. It's completely backed by the community, which fosters development through donations and sponsors. This makes sure the roadmap of Vue is not driven by a single company's agenda.

Introducing to Vue components

Components are single, independent units of an interface. They can have their own state, markup, and style.

How to use components

Vue components can be defined in 4 main ways. Let's talk i code:

• The first is:

new Vue({ ele: "app", data: {} });

• The second:

Vue.component("component-name", {
  /*options*/
});

• The third is by using local components. These are components that are only accessible by a specific component, and not available elsewhere (great for encapsulation).

• The fourth is in .vue file, also called Single File Components.

Let's dive into the first 3 ways in detail.

Using new Vue() or Vue.component() is the standard way to use Vue when you're not building an application that is not a single page app (SPA). You use this method, rather, when you're just using Vue.js in some pages, like in a contact form or in the shopping cart. Or maybe Vue is used in all pages, but the server is rendering the layout, and you server the HTML to the client, which then loads the Vue application you build.

In an SPA, where it's Vue that builds the HTML, it's more common to use Single File Components as they are more convenient.

You instantiate Vue by mounting it on a DOM element. If you have a <div id="app">, you will use:

new Vue({ el: "#app" });

A component initialized with new Vue has no corresponding tag name, so it's usually the main container component.

Other components used in the application are intialized using Vue.component(). Such a component allow you to define a tag - with which you can embed the component multiple times in the application - and specify the output of the component in the template property.

Local components

Any component created using Vue.component() is globally registered. You don't need to assign it to a variable or pass it around to reuse it in your templates.

You can encapsulate components locally by assigning an object that defines the component object to a variable.

const Sidebar = { template: "<aside>Sidebar</aside>" };

and then make it available inside another component by using the components property:

new Vue({
  el: "#app",
  components: {
    Sidebar
  }
});

You can write the component in the same file, but a great way to do this is to use JS modules:

import Sidebar from "./Sidebar";

export default { el: "#app", components: { Sidebar } };

Reusing a component

A child component can be added multiple times. Each separate instance is independent of the others:

Vue.component("user-name", { props: ["name"], template: "<p>Hi {{name}}</p>" });

The building blocks of a component

So far we've seen how a component can accept the el, props and template properties.

• el is only used in root components initialized using new Vue({}), and identifies the DOM element the component will mount on.

• props lists all the properties that we can pass down to a child component

• template is where we can set up the component template, which will be responsible for defining the output the component generates.

A component accepts other properties:

• data: the component local state

• methods: the component methods

• computed: the computed properties associated with the component

• watch: the component watchers.

Single File Components

A Vue component can be declared in a JS file (.js) like this:

Vue.component("pew-pew", {
  /*options*/
});

or also:

new Vue(/*options*/);

or it can be specified in .vue file.

The .vue file is pretty cool because it allows you to define:

• JS logic

• HTML code template

• CSS styling

all in just a single file.

<template>
  <p>{{ hello }}</p>
</template>

<script>
export default {
  data() {
    return { hello: "Hello World!" };
  }
};
</script>

<style scoped>
p {
  color: blue;
}
</style>

All of this possible thanks to the use of Webpack. The Vue CLI makes this very easy and supported out of the box. .vue files cannot be used without a Webpack setup, and as such, they are not very suited to apps that just use Vue on a page without being a full-blown single-app app.

Your CSS can be defined using SCSS or Stylus, the template can be built using Pug, and all you need to do to make this happen is to declare to Vue which language preprocessor you are going use.

We can use modern JS regardless of the target browser using the Babel integration, and ES module too, so we can use import/export statements.

We can use CSS modules to scope our CSS.

Speaking of scoping CSS, Single File Components make it absolutely easy to write CSS that won't leak to other components.

May be your JS is huge because of some logic you need to take care of. What if you want to use a separate file for your JS?

You can use the src attribute to externalize it:

<template><p>{{ hello }}</p></template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

Notice how we used

export default {
  data() {
    return {
      hello: "Hello World!"
    };
  }
};

// or
export default {
    data: function() {
        return { name: 'Flavio'}
    };
}