Day 2 of Vue.js

Day 2 of Vue.js

Event Handling with Vue

The v-on directive is used to handle events.

For example: you can write

<button v-on:click="addName">Add</button>

    <script>
        var app = new Vue({
            el: '#root',
            data: {
                newName: '',
                names: ['Joe', 'John', 'Abe', 'Ben']
            },

            methods: {
                addName() {
                    this.names.push(this.newName);
                    this.newName = '';
                }
            }
        });     
    </script>

To make things look even more neat, you can even write <button @click="eventName">

Attribute Binding

Data binding is done using the v-bind:[attribute-name] directive. For example:

<button :class="{ 'is-loading': isLoading }" :title="title" @click="toggleLoading">Hover over me</button>

Note here :class is the short hand version of v-bind:class.  An click event is registered on the button and it will trigger the toggleLoading method which will then toggle the boolean value of isLoading.

Computed Properties

You can add a computed: {} section to include any computed properties. These properties will be cached if the data is not changed. But it is still reactive to any changes.
An example:

    <h2>All Tasks</h2>
    <ul>
        <li v-for="task in tasks" v-text="task.description"></li>
    </ul>

    <h2>Incomplete Tasks</h2>
    <ul>
        <li v-for="task in incompleteTasks" v-text="task.description"></li>
    </ul>
data: {
tasks: [
                {description: 'go to store', completed: false},
                {description: 'go to school', completed: true},
            ]
}
computed: {
            incompleteTasks() {
                return this.tasks.filter(task => ! task.completed);
            }
        }

So the computed incompleteTasks will display the filtered tasks list.

Components

In Vue you can create components so that you can write something like this <task>text</task>

First you need to make the component. One way is to define a global Vue component.

Vue.component('task', {
    template: '<li><slot></slot></li>'
});
Vue.component('task-list', {
    template: `
    //The template content must be wrapped in one single element, therefore <div> here cannot be excluded.
        <div>
            <task v-for="task in tasks">
                {{ task.task }}
            </task>
        </div>
        `,

    data() {
        return {
            tasks: [
                {task: 'go to store', completed: false},
                {task: 'go to school', completed: true},
                {task: 'go to here', completed: false},
                {task: 'go to there', completed: false},
                {task: 'kill store', completed: true},
                {task: 'open store', completed: false},
            ]
        };
    }
});

Because the component is not linked to any specific Vue instance, you cannot just let data equal to an object, instead you need to make data equal to a function that returns some stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *