#1 Vuejs's basic

Mostly of the concent comes from vuejs.org. Just used for personal study use.

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

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

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

Hello Vue!

Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now reactive.

#2 text interpolation, bing element attributes like this:

<div id="app-2">
    <span v-bind:title="message">
    </span>
</div>

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

The v-bind attribute you are seeing is called a directive.

Directives are prefixed with v- to indicate that they are special attributes provided by Vue.

v-bind:title means "keep this element's title attribute up-to-date with the message property on the Vue instance."

#3 Conditionals and Loops

    <div id="app-3">
        <p v-if="seen">Now you see me</p>
    </div>

    var app3 = new Vue({
        el: "#app-3",
        data: {
            seen: true
        }
    });

Vue can bind data to not only text and attributes, but also the structure of the DOM.
v-for directive canbe used for displaying a list of items using the data from an Array:

     <div id="app-4">
          <ol>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ol>
     </div>

    var app4 = new Vue({
        el: "#app-4",
        data: {
            todos: [
                { text: "Learn JavaScript" },
                { text: "Learn study" },
                { text: 'Build something useful'}
            ]
        }
    });

#4 Handling User Input

To let users interact with your app, use the v-on directive to attach event listeners that invoke methods on our Vue instance:

    <div id="app-5">
        <p>{{ message }}</p>
    </div>
    <button v-on:click="reverseMessage">Reverse Message</button>

    var app5 = new Vue({
        el: "#app-5",
        data: {
            message: "Hello Vue.js!"
        },
        methods: {
            reverseMessage: function() {
                this.message = this.message.split('').reverse().join('');
            }
        }
    });

Vue provides the v-model directive that makes two-way binding between form input and app state a breeze:

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message" />
</div>

var app6 = new Vue({
    el: "#app-6",
    data: {
        message: 'Hello Vue!'
    }
});

#5 Composing with Components

The component system is another important concept in Vue, because it's an abstraction that allow us to build large-scale applications composed of small, self-contained, and often reuseable components. If we think about it, almost any type of application interface can be abstracted into a tree of components:

| #page         |  a tree of components

In Vue, a component is essentially a Vue instance with pre-defined options.
Registering a component in Vue is straightforward:

    Vue.component('todo-item', {
        template: "<li>This is a todo</li>"
    });

Now you can compose it in another component's template:

    <ol>
        <!-- Create an instance of the todo-item component -->
        <todo-item></todo-item>
    </ol>

But this would render the same text for every todo, which is not super interesting. We should be able to pass data from the parent scope into child components. Let's modify the component definition to make it accept a prop:

    Vue.component('todo-item', {
        // The todo-item component now accepts a "prop",
        // which is like a custom attribute. This prop is called todo.
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })

Now we can pass the todo into each repeated component using v-bind:

    <div id="app-7">
        <ol>
            <!-- Now we provide each todo-item with the todo object -->
            <!-- it's representing, so that its content can be dynamic -->
            <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
        </ol>
    </div>

    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    });
    
    var app7 = new Vue({
        el: '#app-7',
        data: {
            groceryList: [
                {text: 'thingimadetoday.com'},
                {text: 'zapier.com'},
                {text: 'ribbonfarm.com'}
            ]
        }
    });

This is just a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface. We can now further improve <todo-item> component with more complex template and logic without affecting the parent app.

In a large application, it is necessary to divide the whole app into components to make development manageable.