Learn the basics of VueJS (Part 1)

Tram Ho

Vue.js  is a framework  used to build user interfaces. Unlike monolithic frameworks,  Vuejs was designed from the outset to allow and encourage step-by-step application development and for flexible design constructs. It allows you to design everything from scratch and succeed in developing large projects.

Install and test run:

1. Method 1: Using a CDN

Use  CDN which is the library file of Vuejs which has been shared on  server  and you can directly use it online by pasting the following command:

<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js”></script>

When you publish version production for your project, change vue.js for vue.min.js to speed up processing.

2. Method 2: Using NPM and CLI

NPM is recommended by everyone when you want to build a large project with Vuejs. NPM works very well with* module bundler* (module bundling tools) like  Webpack  or  Browserify. Vue  also provides tools for writing  single file components. Just run the following command:

$ npm install vue

After that, install  Vue-CLI  with the following commands:

And here is the result after installing and run server success:

Note, to use NPM, please check if your computer has installed NodeJs or not with the command node -v. If not, you can download it at here.

If you install Vuejs in Laravel , you only need the command npm install because Laravel already supports Vuejs integration, the installation is very simple right. To run the program Vuejs in Laravel you run the following commands in turn:

The lifecycle of an object in Vuejs:

To better understand the nature of Vuejs and how it works, we need to understand what the life cycle of Vuejs is like. Here is the lifecycle image of Vuejs I got on the homepage of  Vue:

Initialization process:

1. beforeCreate():

The beforeCreate function will be synchronized as soon as Vue is initialized. During this process, the  data (data) and  event (events) will not be set.

Then check the results:

We can see that this.msg no data received in data from the beforeCreate function.

2. created():

The created function can now use and manipulate data and event and you have set up earlier.

Then check the results:

Although the data has been printed, the  templates and Virtual DOM(Document Object Model) have not been mount and render so you cannot access it.

Mounting process:

During this process Vue allows access to the component immediately, after component rendered for the first time. Use when you want to change DOM(Document Object Model) before or after rendering. Unusable when Related to  data.

1. beforeMount(): This function is called after the component  is compiled and before the first render . However, elements such as template and DOM are still not accessed.

2. mounted():

In this function, we can have full access to component, template and DOM through this.$el. This function is used often when we can write  Jquery  statements that access the  DOM.

Updating process (Change and Re-render):

This process will be called when a change in the component causes it to re-render.

1. beforeUpdate():

This function is called as soon as there is a change in the data in component and will be executed before re-render.

As the example above, we will increase the value count up 1 in every second. Function created() is run first and changes the value of  data. As soon as the  component’s data change is obtained, beforeUpdate() hook will get the newly updated data and log it to the console. Finally, go to  DOM re-render  and display the value in  template.

2. updated(): This function is executed immediately after the  DOM  has re-rendered. Retrievable data is the data that has been modified by the component, which is also the data obtained in the component beforeUpdate().

The results show that the function updated() execute immediately after the functionbeforeUpdate(), after* DOM re-render* and their data also match.

Destroy process (cancellation):

1. beforeDestroy(): This function is called just before the component is aborted. This is the most suitable time for us to remove unnecessary  data and event when the component is destroyed.

2. destroyed(): This function is called when the component has been removed from the DOM.

Commonly used functions and needing attention:

As you can see, Vue provides quite a few functions for the entire life of 1 component, but mainly we will use the following functions:

  • created(): commonly used to call api get data from server, listen for events.
  • mounted(): commonly used to write Jquery statements to query the  DOM.
  • beforeDestroy(): commonly used to remove data and event in component.

Summary:

So in this article, I have introduced you to the installation methods of Vuejs and the life cycle of an object in Vuejs to help you understand more about it. I look forward to receiving your comments. Thank you for listening to my sharing. Good luck!

References:

https://vi.vuejs.org/v2/guide/

Share the news now