Why vue.js, and why 46% of front-end developers use it?

1. What is vue.js?

Progressive framework

Bottom-up incremental design

Easy to learn

Easy to integrate

Vue.js (pronounced vju/curliest) is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, Vue is designed with bottom-up incremental development. Vue’s core library focuses only on the view layer and is very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.

2. What kind of interface is vue.js suitable for?

A. Numerous form items

B. Contents need to be modified according to user operations

Vue.js is a web version application used to build a web version similar to Zhihu, which has many form items and needs to be modified according to users’ operations.

What is a single page application (SPA)?

A page is an app (sub-app)

As the name implies, single-page application generally refers to a page is an application, of course, it can also be a sub-application, such as zhihu a page can be regarded as a sub-application. Single-page applications typically have a lot of interaction processing, and the content of the page needs to change dynamically based on the user’s actions.

4, I can also use JQuery to write the web version of Zhihu, why use vue.js?

A, the product is absolutely need to be repeatedly modified

B. Changes may cause changes in DOM association and nesting levels, making jquery structure-related code extremely complex

C, vue.js can solve this problem

Parent ().parent().parent().parent() When you first write, you feel that the page elements are not many, is not looking for the father of the father of the father of the element, I might as well write in the comments of the father of the father of the father of the element. But if, a few days later, your project leader or your product manager suddenly asks you to make changes to the page that will affect the structure of the page, that is, the DOM association and nesting levels need to change. So (‘ # XXX). The parent (). The parent (). The parent () may become $(‘ # XXX). The parent (). The parent (). The parent (). The parent (). The parent ().

That’s nothing. As the product iterates faster and changes more frequently, and pages have more than one DOM element associated and nested like this, the changes will be laborious. JQuery selectors also have a performance penalty for finding elements on a page and DOM manipulation, so you can open the page and get more and more stuck without knowing what to do.

If you learn vue.js at this point, these complaints will not exist.

What is the view layer in the front end?

We can separate the DOM from the rest of the HTML to create a layer called the view layer.

Vue’s core library only focuses on the view layer

6. How to develop a complete page using jquery?

A. HTML writing structure

B. CSS decoration

C, JS interaction

Speaking of JQuery, we have to talk about JavaScript DOM manipulation. If you are developing a Zhihu in JQuery, you will need to manipulate the HTML DOM structure using various DOM manipulation methods in JQuery.

Now let’s abstract a web application, then the DOM in HTML is actually a view, a web page is through the COMBINATION and nesting of DOM, the formation of the most basic view structure, and then through CSS modification, in the basic view structure “makeup” to make them look more beautiful. Finally, when it comes to the interaction part, JavaScript is needed to accept the user’s interaction request, and respond to the user’s interaction operation through the event mechanism, and modify various data in the event handler function, such as modifying the innerHTML or innerText part of a DOM.

7. Why can vue. js make it so convenient to develop front-end applications based on web pages?

A. declarative

B. Reactive data binding

C. Componentized development

D, Virtual DOM

This is because vue.js has declarative, responsive data binding, componentized development, and uses Virtual DOM, a technology that sounds fancy by its name.

8. What is the dynamic binding of data in vue.js?

Vue.js automatically responds to changes in the data and modifies all bound data and view contents based on the binding relationships that the user has written in the code. This binding is declared in the input tag’s V-Model property, so you might see people refer to vue.js roughly as a template engine for declarative rendering elsewhere.

9. Why componentize development in the front-end?

A. Uncomponentalized development code and workload are very large

B. It’s worse than death to modify

But now we do a single page application, page interaction and structure is very complex, a page has many modules to write, and often a module of code and workload is very large, if the original method to develop, it will be tiring. In addition, it is also very troublesome to modify the product requirements in the future. I am afraid that after moving one div, other div will follow the avalanche and the whole page will be completely chaotic, or due to the event bubbling mechanism of JavaScript, all kinds of puzzling and weird bugs will appear after modifying some inner DOM event processing functions.

10. How to componentize development in the front end?

A. Modular ideas in object-oriented borrowing from the back end (breaking up some big features into many functions and assigning them to different people to develop)

B. To split various modules in a single page application into a single component, we only need to write various component labels in the parent application and write parameters to be passed into the component label (just like passing parameters to functions, which are called component properties). Then write the implementation of each component separately (pit filling)

In object-oriented programming, we can use object-oriented thinking to package various modules into classes or break up a large business module into more and smaller classes. In procedural programming, we can also break up some big features into many functions and assign them to different people to develop.

In front end applications, can we also package modules like programming? This introduces the idea of componentized development.

Vue. Js through component, split the various modules in a single page application to a single component (component), as long as we write in the parent application first various components tag (pit), and write well in the component tag to the incoming of the parameters of the component (like incoming parameters to the function, the parameter is called the component properties), Then write the implementation of each component separately (pit filling), and the entire application is done.

11. Why Virtual DOM technology?

A, problem,

Speed is more and more fast, now many people are dozens or even hundreds of M optical fiber in the home, mobile phone is 4 g start, according to the way a web page to a few hundred K, and the browser itself will cache many resource files, why so few M optical fiber has been open, before open a slow have cached page or feel?

B, cause

(1) Browsers themselves have performance bottlenecks when dealing with DOM

(2) When using JQuery or native JavaScript DOM manipulation functions to manipulate the DOM frequently, browsers need to constantly render new DOM trees

This is because the browser itself has performance bottlenecks when dealing with the DOM, especially in traditional development, when using JQuery or native JavaScript DOM manipulation functions to manipulate the DOM frequently, the browser has to constantly render new DOM trees, causing the page to look very sluggish.

12. How to implement Virtual DOM?

A. Calculate various dom operations and render the last result (reduce dom rendering times)

The Virtual DOM is the English of the Virtual DOM. To put it simply, it is a kind of DOM operation that can be calculated and optimized through JavaScript in advance and the final DOM operation is calculated and optimized. Since this DOM operation is a pre-processing operation and there is no real DOM operation, it is called the Virtual DOM. Finally, the DOM operation is actually submitted after the calculation, and the DOM operation changes are reflected in the DOM tree.

13. How to use vue.js for single page application development?

In fact, you can directly watch the learning video to start, should be the best

A, introduction – vue. Js official documentation of the basic part of the brave read

My advice is to go through the basics of the official introduction-vue.js documentation first. Aside from the component section, which deals with a lot of obscure terms, the first few chapters treat vue.js as a template engine.

B. Basic usage of ECMAScript6, Webpack, NPM, and vue-CLI

Start learning the basics of ECMAScript6, Webpack, NPM, and vue-CLI, as well as node.js.

C, see all kinds of online combat video and articles and others open source code

Finally, the component part of the first general look, understand the components of what are the concepts, began to see a variety of online combat videos and articles and other people’s open source code.

What is ECMAScript?

The relationship between ECMAScript and JavaScript is that the former is a specification of the latter and the latter is an implementation of the former (other ECMAScript dialects also include Jscript and ActionScript). In everyday situations, the two words are interchangeable.

ECMAScript6 is the next generation of JavaScript.

15. What is Webpack?

A. Front-end packaging tool

Webpack is a front-end packaging and build tool. If you’ve been writing HTML, CSS, and JavaScript by hand, and importing CSS into your HTML files via the link tag, and external JS scripts via the SRC attribute of the Script tag, this tool will be unfamiliar to you. Never mind, let’s take a look at why we use Webpack first, and then learn why.

16. Why Webpack?

A, convenient management of various materials

B) Package to reduce browser visits

Having said that, creating a one-page application is inherently complicated, and there are bound to be a lot of materials and other third-party libraries to use. How do we manage these things?

Also, Webpack is a front-end packaging tool. Why does front-end code need to be packaged? Because a single page application used in a lot of material, if every material through to the SRC attribute in the HTML or link to introduce, then request a page, may browser will launch 10 requests for many times, these resources are often request some script code or very small pictures, these resources itself is only a few k, download don’t even need to 1 second, HTTP is the application layer protocol, but because of its lower level is the TCP transport layer protocol, TCP handshake and the consumption of wave process time may be longer than download resources itself, so you need to put all these small files into one file, such as long as one process of TCP to shake hands and wave, the multiple resources to download, In addition, since multiple resources share one HTTP request, head and other parts are also shared, which is equivalent to forming scale effect, making the webpage display faster and user experience better.

17. What are NPM and Node.js? What is the relationship?

Node.js is a server-side JavaScript runtime environment

Node.js is a server-side JavaScript runtime environment, through which you can write independent programs in JavaScript.

B, Node.js can write standalone applications (Webpack is written in Node.js)

As mentioned earlier, Webpack is written in Node.js, so as a front-end developer, even if you don’t write stand-alone applications in Node.js, you still need a Node.js runtime environment, because a lot of front-end tools are written in node.js.

C, NPM is a Node.js package manager (similar to Java’s Maven (package dependency management), PHP has a similar one).

NPM is a Node.js package manager. When we were in traditional development, jquery.js was mostly searched by Baidu and downloaded from the official website, or directly introduced CDN resources, which was too troublesome. If we come across other packages in the future, and the package code itself may call other packages (that package has dependencies on those other packages), it will be very difficult to introduce a package in our own projects. Now that we have the NPM package manager, we can directly pass through

NPM install XXX Package name

To introduce it, for example

npm install vue

What is VUe-CLI?

It is a vue.js scaffold tool. Basically a tool that automatically generates your project directory, configures Webpack, and dependencies for you

npm install vue-cli -g

-g means global installation, which means you can open the command line and call it directly from the vue command.

19. What are Vuex and VUE-route

Vuex is a state manager for VUE. Used to centrally manage various states in a single page application.

Vue-route is a front-end router for Vue. This router is not the router we use to access the Internet, but a thing that manages the mapping between the request entry and the page. It can replace parts of the page without refreshing, making users feel as if they were switching to a web page.

It will take a lot of space to explain these two things clearly, so here is just a brief mention, first learn vue.js itself is the most important.