2. Why I want to learn vue.js
2.1 What is vue.js
- Two major characteristics of vue: reative programming and componet system.
- Advantages of vue:
- lightweight framework, easy to learn, two-way data binding, componentization, separation of data and structure, virtual DOM, fast running speed.
- Vue is a single-page application, which makes the page partially refresh, without having to request all data and dom every time the page jumps, which greatly accelerates the access speed and improves the user experience.
2.2 vue.js vs react
From this article:
2.3 vue.js vs angular
From this article:
Vue provides higher customizability and hence is easier to learn than Angular or React. Further, Vue has an overlap with Angular and React with respect to their functionality like the use of components. Hence, the transition to Vue from either of the two is an easy option
2.4 My opinion
I want to choose the framework that is easy to learn, and I can use it to solve my problem quickly, so I choose vue.js.
3. vue.js Learning resources and guide
3.1 Books of vue.js
You can get more books about vue.js from this list.
3.2 Guide for beginners of vue.js
Here is a guide for beginners who want to learn vue.js:
You should read through the basics of the official guide. Don’t use any build tools, just use the simplest
According to the examples on the official website, think of some similar examples yourself, imitate the implementation to practice your hands, and deepen your understanding.
Read the first half of the advanced part of the official tutorial until the “Custom Directive”. Focus on understanding Vue’s reactive mechanism and component life cycle. “Render Function” can be skipped if it is difficult to understand.
Read the chapters on routing and state management in the tutorial, and then learn vue-router and vuex as needed. Similarly, don’t worry about the build tool, just follow the examples in the document to understand the usage.
After completing the basic documentation, if you are not familiar with Node-based front-end engineering, you need to make up a lesson. The following is strictly not the content of Vue itself, nor does it cover all front-end engineering knowledge, but it is a prerequisite for large-scale Vue projects, and it is also the knowledge that a qualified “front-end engineer” should have.
And if you have passed the above process, then you should:
- Learn how to use the command line. It is recommended to use a Mac.
- Learn the basics of Node.js. It is recommended to use tools such as nvm to manage the Node version on the machine, and to configure the npm registry as Taobao’s mirror source. At least understand the common commands of npm, how to use npm scripts, semantic version number rules, CommonJS module specifications (understand the similarities and differences between it and ES2015 Modules), Node package parsing rules, and Node’s common APIs. You should be able to write some basic command line programs yourself. Note that the latest version of Node (6+) already supports most of the features of ES2015, which can be used to consolidate ES2015.
- Learn how to use/configure Babel to compile ES2015 to ES5 for browser environment.
- Learn Webpack. Webpack is an extremely powerful and complex tool. As a starting point, understand its “everything is a module” idea, and have a basic understanding of its common configuration options and loader concepts/use methods, such as how to use Babel with Webpack. One of the challenges of learning Webpack is the confusion of its own documentation. It is recommended to search more, and there should still be good quality third-party tutorials. It is recommended to read the documentation of Webpack 2.0 if English is good. It is a great improvement over 1.0, but you need to pay attention to the incompatibility with 1.0.
In this post, I started learning vue.js, I showed why I choose vue.js instead of angular.js or react.js, and I also show the guide for beginners who want to learn vue.js. Thanks for your reading. Regards.
Index of vue.js tutorials for beginners:
- Learn vue.js with me tutorial 1 - introduction to vue.js learning
- Learn vue.js with me tutorial 2 - setup your first vue.js project and print ‘hello world’