Without further ado, let’s get started!

First, how did I learn VUE? What did I think before I learned VUE?

1. When VUE technology first came out, my first question was, What is VUE? What does this framework do?

2. Without the framework of VUE, how did we do it before and what bad problems did we meet?

3. How to learn more effectively, how to master it quickly, and then use it to get things done?

First question: What is a VUE? What can be done?

Vue is an incremental framework. How to understand this progressive framework, based on my own understanding and research on the Internet, my simple understanding is that, one, you can use it as a JS library, just like we introduced jquery, with some of the functions in it; Second, you can build new projects entirely using the functionality provided by this framework. It’s easier to understand with a scenario

Scenario 1:

If your technology team is conservative in its technology selection and does not have new technology scenarios, such as asking you to maintain an administrative background. Management background, daily is to submit various forms, this part of the existing scheme, such as form submission or jquery information collection Ajax submission. You can use vUE as a JS library for form collection and form validation.

Scenario 2:

In scenario 1, you get a taste of the sweet stuff. In the heart dark cool, can also play so. After sharing with others, the team began to accept the use of VUE and promoted it on a small scale. Play strange upgrade this encounter small boss, the leadership said, the boy background do more and more efficient, to undertake some routine business development, to the regular army and other small partners together to do news list and news details page.

In this project, you have to be bold enough to manage the dom of the entire page in Vue. You find that jquery is useless, lists are looped in V-for, and comments are split into small pieces. The comment interaction is a bit more complex, but your focus has changed from jquery DOM manipulation to data-driven dom manipulation.

Scenario 3:

After scenario 1 and scenario 2, you’re getting more and more trusted, and the boss is calling you again. Look at the news project, you have done a good job. The mobile station also needs to be reconstructed. You can build a mobile terminal M station, which can be used by wechat and App sharing. At this point, you need to make a mobile WebApp. When you look at Webpack Vue-Router, you see that the front end can control routing. Webpack, which can be used for engineering builds of front-end development.

Scenario 4:

After scene 3, you shine on the tech team, and the company thinks more and more of you. The end of the year leadership to look for you again, the boy hit, want not to take the end of the year award, want to do a news broadcast room for me. The requirements are simple: a rolling broadcast of news, with users commenting in real time. With scenario 3 and the previous experience, you are a little overwhelmed. You are communicating with the back end interface more and more frequently. The newsroom needs a lot of data to share data between components.

Scene 5: Year-end bonus, got it, promoted and raised after The Spring Festival. With a 20-person front end team, you start to focus on user data growth with the rest of the company. You made a mistake in Scenario 2. While the entire page is easy to develop with Vue management, the page has a long white screen, and underlying pages like this are not good for SEO. Start thinking about using vue2.0 SSR. In order to ensure high quality output for your team, you start researching how to write single tests to the VM…

Scenarios 1-5 start with using the front-end JS library just to look at you for a second, right up to the final large project solution.

Second problem: without vUE, we have two ways to load page fragment 2 using iframe. Request page fragments using Ajax. The common problem is that the JS logic inside is not easy to deal with, the ID name is repeated, and the code is not standardized. Vue doesn’t have this problem

The third problem: 1. While understanding, while writing code, while watching the effect, continue to understand, and then write notes, output their own understanding.

Vue is mostly used to develop single-page applications, not just single-page applications.

If the company does not have SEO requirements, it can use VUE to build the system. Mobile site, background management system is particularly suitable for development with VUE.

Finally, the above is the author to share advanced architect learning circuit, sharing a wave of advanced circuit map, then resources must also be indispensable, if you are interested in technical improvement, xiaobian here provides an advanced video for the architecture of the above map, Resource sharing includes but is not limited to (distributed architecture, high scalability, high performance, high concurrency, Jvm performance tuning, Spring, MyBatis, Nginx source code analysis, Redis, ActiveMQ, Mycat, Netty, Kafka, Mysql, Zookeeper, Tomcat, Docker, Dubbo, Nginx).

Access to information: private chat author free access to information!