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:
1 2 3 4 5 6 7 8 9 | #Cài đặt vue-cli $ npm install --global vue-cli #Khởi tạo một project mới với template "webpack" $ vue init webpack test-vuejs #Trỏ đến thư mục project vừa tạo $ cd test-vuejs #Chạy server nào! $ npm run dev |
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:
1 2 3 | $ php artisan serve $ npm run watch |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template> <div id="my-text"> Hello world </div> </template> <script> export default { data() { return { msg: 'Demo Vuejs' } }, beforeCreate() { console.log("Hello Viblo") console.log(this.msg) } } </script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template> <div id="my-id"> Hello world </div> </template> <script> export default { data() { return { msg: 'Demo Vuejs' } }, created() { console.log("Created") console.log(this.msg) console.log(document.getElementById('my-id').innerHTML) } } </script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <template> <div id="my-id"> Hello world </div> </template> <script> export default { data() { return { msg: 'Demo Vuejs' } }, mounted() { console.log("mounted") console.log(this.$el) console.log(document.getElementById('my-id').innerHTML) } } </script> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <template> <div id="my-id"> {{ count }} </div> </template> <script> export default { data() { return { count: 0 } }, created() { setInterval(() => { this.count++ }, 1000) }, beforeUpdate() { console.log("Số lượng:" + this.count) } } </script> |
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().
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <template> <div id="my-id"> {{ count }} </div> </template> <script> export default { data() { return { count: 0 } }, created() { setInterval(() => { this.count++ }, 1000) }, beforeUpdate() { console.log("Số lượng beforeUpdate:" + this.count) }, updated() { console.log("Số lượng updated: " + this.count) }, } </script> |
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!