1. Introduction

Surely, if you are using Javascript language then Vue.js is an indispensable framework. Especially when you have used ReactJS, the access to Vue.js is even easier.

And what is Vue.js?

Vue.js is a Javascript framework created by Evan You, which helps us to build user interfaces as well as build user-friendly Single Page Application , they build from libraries, implement components, functions. Its characteristic features are SFC (Single File Component). The current stable version of Vue.js is 2.6.10. Let’s go into the most basic knowledge of Vue.

Basic knowledge

2.1. Vue Instance, instance lifecycle

• Before getting into the basics when learning Vue.js, we need to know what an instance is.

Each instance or an object in Vue.js. To initialize an object in Vue.js we use the syntax:

The complete example to instantiate the Vue object includes data and DOM into HTML:

Above, Vue has done with a selector with id demo along with initializing a message data to be able to retrieve and render them.

An application in Vue.js will include a root node. Similar to the division of HTML node, from this root node, we will split into child nodes to reuse the options and data in this newly created object. The basic components will be explained below.

Life cycle of an Instance

The life cycle of a basic Instance consists of 4 main stages:

• Creating
• DOM mount (mounting)
• Update DOM when there is data change (updating)
• Destroy the instance (destroying)

Each stage will have corresponding function hooks. Hook here sounds confusing to newbies, you just simply understand it as a function to hook at specific times, perform specific jobs right at that time. For example, if you want to get data from the serve to print to the screen, you will write hook at the mounting stage. With the hook function mounted, it means when the DOM is mounted and the data is set up. We can insert the desired data into the page at this stage. As you write at an earlier stage, it will not be possible because the DOM is not mounted yet, so using DOM is not possible.

Temporarily not understanding, everyone can both do and feel okay =)))

Below I have written a separate article about the life cycle of an instance, people on this link refer

Life cycle of a Vue Instance

2.2 Template Syntax

Syntax is very important when learning a language or framework. With Vue.js we also have the syntax to help display and export data to the user page. To display a simple passage on the screen. By using two curly braces to render data to the screen:

Combined with the object initialization above, we get the sentence Đây là ví dụ khởi tạo một đối tượng trong Vue displayed on the screen. So if we want to render some HTML tags then what should we do. For example, want the word Vue be in the <b></b> tag to bold this sentence. Simply, we will use Vue directive. with v- Specific syntax:

Also to use HTML properties, we cannot use the curly brace syntax to display inside the html tag, but we use v-bind:parameter="value" . With the parameter here is the parameter attached to the value Example:

We can pass a function return a specific value for that property. Modifier: Modifier is a modifier that complements a directive to force it. The example below is to force each time submit for a form and do not want to send the form to another page.

There are also some ways to shorten directive: v-bind:href to :href , v-on:click to @click .

2.3. Methods

As above we have learned about how to write templates to render. Some paragraphs I mentioned the method. So how to install method, let’s find out. Method is the part of the processing when we want to do something, for example send the update data when we submit it. Recalculating the available data can also include methods for returning data, but this is rarely used (see computed and watchers below). To instantiate an object with the method, we do the following:

The above method returns us a new number every time we call updateNumber() with different parameters. This will be executed each time the method is called.

2.3 Computed properties and watchers, compared to methods

Computed properties:

First of all, please read the following code:

Above methods , the computed have a function x2Number with the same result. So which one should we use in this case?

Everyone must be like me when I first started learning and I always wondered why the god gave birth to a computed method =)) But when I read it for the second time in Vue’s main document, I accepted. As a result, computed computes have no pass parameters and when computed calls do not have the same x2Number parentheses as the x2Number() method, which is the biggest difference in use.

So if you go to Vue ‘s homepage to read the document, you will see computed properties. As I understand it also comes from calling computed to render data. In these 2 cases, I prefer to use computed . Because a computed has the ability to Cache data again when calling this function the first time so that next time it will retrieve the data in the cache that has been processed through computed . Otherwise, the method is not.

Finally, Computed usually works with the data in the instance to limit the computation and get the data in the cache.

Watchers:

Okay, and then there’s the watchers. Hearing the name, we can also understand what watcher is, right. Translated into Vietnamese is a follower) a bit banal but it does work as a follower.

Watcher functions perform change tracking of an object’s properties. We will declare them as methods and computed. Here, I want to monitor the entire object when any of the components changes, so I add the deep: true property.

In summary: methods, computed properties, and watchers can all declare internal functions, but depending on the specific use, we will apply them in the optimal way.

2.4 Binding, Render, Event Handling.

Binding:

When reading the template syntax above, everyone should see a v-bind directive syntax and it is that specifically binding data to a web element. We can bind class, binding style using v-bind: class or v-bind: style. Below I just talk about binding classes, with the same style

Example binding a classs:

with data

we will get:

Render:

To conditionally render data, we have 2 ways:

• Use v-if:

• Use v-show

These two ways both help to display data to the screen, but the difference is that when using v-if, Vue will not render if the condition is false. The v-show will still render regardless of true or false and will allow rendering through the CSS property’s display property.

We also have v-else-if, v-else to execute if we want to use it to compare against many different values.

Render out a list

When we render a list from an array or object we also have the v-for directive. function is exactly like loops in programming languages.

Form Input Binding:

Form manipulation is a very important part of web programming. And with Vue.js we have constraints on which form forms. Let’s go over a few basics.

• We use the v-model directive to bind data to the form.

Example to get data from input box and update data property of vue instance:

• In addition, modifiers can be used for v-model:

Event handling:

Interacting with HTML, event handling is all too familiar to javascript programmers. Vue.js has taken advantage of and built up a quite handy processing system, Simple example with click event:

In addition we can handle events when manipulating from the movie table. See more at: https://en.vuejs.org/v2/guide/events.html

2.5. Component

Similar to dividing each node in HTML, nodes can be nested into a tree like genealogy. then in Vue.js has built Component features that help us to use them as HTML. With such nested, there are ways to pass data from the parent component to the child component. Or send information from child components to the parent via events, use slots or you can use v-model in the component. Very convenient for building a Single Page Application.

I will write a separate post as well as specialize in Component. Everyone welcome to read it !!!

3. Summary

Thus, through the above 2 parts, we can grasp the basics of Vue.js, know how to initialize a Vue Instance, the basic syntax for rendering, conditional rendering, distinguishing Computed Properties, Methods and Watchers. There are also some more knowledge such as Filter, Plugin, Routing … I will continue to the following sections. Thank you everyone for following the article and if it feels good, please upvote me