Vuejs and beginners’ knowledge (P1)

Talking a little bit about Vuejs, this is a framework of Javascript used to build the user interface. With Vuejs, the need to build a Single Page Applications is extremely appropriate. In this article, I would like to introduce to you some of the knowledge that I think will be suitable for those who are new to learning about this framework.

Create new projects with vuejs

First we need to create a vue project, to install vuejs on your computer you need to prepare npm or yarn (this is a tool to manage javascript libraries for nodejs) and also install nodejs for your computer. To check if the installation is complete

Next is the vue cli this is a command line tool (CLI – Command Line Interface), it helps us to build templates quickly, for example with PHP we have artisan and Vuejs we have Vue cli . We can install it via npm or yarn

To check whether the installation was successful or not, by typing the command

To initialize a Vuejs project

Ok now let’s test the program up by

Visit http: // localhost: 8080 / # / to see if the program has run yet. If run like this, you have successfully initialized the project with vue already.

Directory structure

A brief introduction to the directory structure of a Vuejs project.

node_modules : This is the directory containing all the libraries needed to build Vue.

public : This is the directory containing the static assets that you do not want to run through webpack

index.html : For SPA applications (Single Page Application), there is only 1 page. After that, the content of the page is changed without reloading the page, this is the only page.

src: This is the directory containing the project source code. Inside there are folders

• assets : This is where you will work with Webpack
• components : This is the directory containing the project’s UI components
• router : This is where to write routes and connect them to Components
• App.vue : This is the entry point component. A place to initialize all other components. Understand na is the main file of the project.
• main.js : Entry point file to mount App.vue. This is the render file of the App.vue component.

Single File Components

By default, the Vue project will run into App.vue and call src/components/HelloWorld.vue defined by the router at src/router/index.js , we briefly rewrite the HelloWorld.vue file as follows:

This is the common structure of a component. You notice here there will be 3 separate parts: the template , the script and the style , these sections create a component file, the template for us to create the interface, the script to handle the logic, the style for css format. Three separate blocks form a cohesive and maintainable component.

Note : In Vue, all the data in the <template> tag must be put in a tag called the root element of the component. If deliberately left in the root element will immediately report an error.

For example:

The result will give an error in the console that is Component template requires a root element, rather than just text.

Binding data

As in the above example, we will write the text directly Xin chào tất cả mọi người in the template , then we have another way as follows

Instead of writing the whole text, here we will use a variable that is msg put in the data with the data type as the key-value with the corresponding key is msg and the value is the value we want to print. To print the value of msg in the template we only need to use {{}} to print the value of this variable. In the future, the data like this will be stored in the data .
Besides, you can also use javascript expression in {{}} . For example is

Directive

This is a command to insert elements in the DOM. Its syntax begins with the keyword v- . For example, as the code above also prints out the Welcome to Your Vue.js App , then we can also use the directive to print out with v-text .

It will also print the result as if you used {{}} to print it.

There are 2 types of directives that we can divide:

• Data Directive – specialized for data processing.
• Event Directive – specializes in capturing element events.

Data Directive

Or we may also want to print a value depending on the condition then we can use v-if

In this case we will print the msg if seen as true . In contrast to v-if , there will be v-else . If seen is false then msg will not be printed. Instead, nodata will be printed. Similarly we also have v-else-if .
Similar to v-if , we also have v-show .

The result is still the same as v-if , so what’s the difference here?
Compare v-if and v-show With v-if , when we inspect the HTML up, whichever condition occurs, that element will appear.
As for v-show when we inspect HTML, we will see the element of the remaining condition still appears hidden css with style display:none
=> v-if will check the condition and then will confirm whether it will render or not v-show will render all will depend on the condition and then let it hide or not.

Event Directive

Suppose when we want to click on the button to make the contents of msg change, we can be as follows