Frank Cheng's Notes: Vue.js

What is Vue?

Vue is a JavaScript framework that helps to make building interactive and reactive web frontends easier.
* JavaScript framework: a (third-party) library that provides some functionalities and a 'set of rules' on how to use it to build your JavaScript application.
* reactive: like the look and feel of mobile app. Your app is able to react to user input.

Why we need using Vue?

Traditionally, in web apps, you need to wait for a new page to load if you click a link.

Thanks for JavaScript, it can manipulate the HTML Structure (DOM) of the page.

Therefore, in modern JavaScript driven web application, we will not send a request to load a new web page.

Instead, we only do it once. Afterward, we just change the data using JavaScript.

But, using JavaScript may not be ideal!

Let's take a look of below example which we only use plain JavaScript:

index.html

    <body>
        <div id="app">
            <h1>To do List</h1>
            <input type="text" />
            <button>Add New Task</button>
            <!-- List -->
            <ul>
            </ul>
        </div>
        <script src="app.js"></script>
    </body>

app.js

    const buttonElement = document.querySelector("button");
    const inputElement = document.querySelector("input");
    const listElement = document.querySelector("ul");

    function addTask() {
        const itemElement = document.createElement("li");
        itemElement.textContent = inputElement.value;
        listElement.appendChild(itemElement);

        inputElement.value = "";
    }
    buttonElement.addEventListener("click", addTask);

You will notice that we need to write lots of code to achieve this tiny feature.

Then Vue, the JavaScript framework, can help.

Look at the rewriting version by Vue of the same feature.

index.html

   
     <body>
        <div id="app">
            <h1>To do List</h1>
            <input
                type="text"
                v-model="newTaskToAdd"
            />
            <button v-on:click="addTask">Add New Task</button>
            <!-- List -->
            <ul>
                <li v-for="task in tasks">
                    {{ task }}
                </li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
        <script src="app.js"></script>
    </body>

app.js

 
    new Vue({
        el: "#app",
        data() {
            return {
                tasks: [],
                newTaskToAdd: "",
            };
        },
        methods: {
            addTask() {
                this.tasks.push(this.newTaskToAdd);
                this.newTaskToAdd = "";
            },
        },
    });

As you can see, we only need to configure the Vue app, such as properties, methods, and the predicted end result in html. Then Vue will take over to figure out what needs to be created, added, or changed in the DOM.

That is why using JavaScript framework can save you lots of time for development.

Frank Cheng's Notes

Thursday, February 11, 2021

Vue.js - Introduction

What is Vue?

Why we need using Vue?

No comments:

Post a Comment