Essential technologies for Web front-end development

What is 1.vue.js?

Vue.js (pronounced/vju?/, similar to view) is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks, Vue uses a design that is developed from bottom-up increments. Vue's core library focuses only on the view layer and is very easy to learn and easily integrates with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications with single-file components and libraries supported by the Vue ecosystem.

The goal of Vue.js is to implement the data binding and the combined view component of the response through the simplest possible API.

If you are an experienced front-end developer and want to know the difference between vue.js and other libraries/frameworks, look at comparing other frameworks.

This is an introduction to the official website, is not it feel very abstract very official? After reading it may still be a lot of people do not understand what the framework is used to do, what is the "progressive framework"? What is "bottom-up incremental development"? What is the "view layer"? What is a "single file component"? What is a "complex single-page application?" "Second paragraph inside" Response data binding and combined view component "What's this again?" he said. And the last phrase, "What is the difference between vue.js and other libraries/frameworks?"

Don't worry, if you take a slow look at all the questions and answers, you'll have a sense of what's going on in front of the jargon that you might never have heard before.

What the hell is 2.vue.js?

Presumably now can see my this article of the people, are using the app or Web version of the reading. Vue.js is a web-based application that is used to build a web-like version of this form, and the content needs to be modified according to the user's actions.

3. Single page application (SPA)

As the name implies, a single page application generally refers to a page is the application, of course, it can also be a sub-application, for example, a page can be considered as a sub-application. There is a lot of interaction in a single-page application, and the content in the page needs to change dynamically based on the user's actions.

4. The Web version you said before I can also write in jquery, why use Vue.js?

When it comes to jquery, you have to talk about JavaScript's DOM operations. If you use jquery to develop a knowledge, then you need to use the various DOM manipulation methods in jquery to manipulate the DOM structure of the HTML.

Now we have a Web application abstraction, then the DOM in HTML is actually a view, a Web page is a combination of DOM and nested, forming the most basic view structure, and then through the decoration of the CSS, in the basic view structure "makeup" to make them look more beautiful. At the end of the interactive section, JavaScript is used to accept the user's interaction request, and the event mechanism responds to the user's interaction, and various data modifications are made in the event's handler function, such as modifying the innerHTML or innertext portions of a DOM.

We can separate the DOM in HTML from the rest of the section by dividing it into a hierarchy called the view layer .

Vue's core library focuses only on the view layer

Why should we extract the view layer and pay attention to it alone?

Because in a Web page that has a lot of page elements and a very large structure, data and views are all mixed up in HTML like traditional development, so it can be very laborious to process them, and if there are entangled relationships between several structures, Then there is a bigger problem with the code, what's the problem?

Do you remember when you wrote jquery, you wrote $ (' #xxx '). Parent (). Parent () This code? When you first write, you think the page element is not many, is not to find this element of Dad's father's dad, I'm a big deal in the comments to write clearly this element of Dad's father's dad not good. But in the event of a few days after your project leader or your product manager suddenly made a change to the page you made, this requirement will affect the structure of the page, that is, the DOM's association and nesting level to change, then $ (' #xxx '). Parent (). Parent (). Parent () may become $ (' #xxx '). Parent (). Parent (). Parent (). Parent ().

It's not much, and it's going to be a lot harder to change as the product iterations get faster, more modified, and there's more of a similar association and nested DOM elements in the page. And the jquery selector looks for page elements and the DOM operation itself is also a loss of performance, you may open this page, will become more and more cards, and you do not start.

When you are writing a project to encounter this problem, you will be complaining, why the world there will be HTML such as the inception of the space like the dream of a lot of div nesting to make the language of the page, why the first time to learn jquery is its concise dom operation, but now do not think it is more concise, Did I learn a fake jquery? Why write a code so difficult, you want to hit the computer, you want a keyboard pat on the head of the product dog, blame him every day to change the need to let you originally flower fragrance tea clear taste of the code has become so smelly and long.

This time if you have learned vue.js, then these complaints will cease to exist.

5.vue.js Why is it so convenient to develop web-based front-end applications?

Because Vue.js has declarative, responsive data binding, and component development, it also uses the virtual DOM, which looks like a tall technology on the name.

But what are these nouns?

6. Response-style data binding

The response here is not a responsive layout in @media media queries, but Vue.js automatically responds to changes in some of the data in the page. As to how to respond, you can first paste the following code into a file with the extension HTML and then open with a browser, just enter some text in the TextBox, look at the page changes.

<!DOCTYPE html>

Will you find a magical phenomenon in which the text entered in the TextBox changes with the contents of the P tag behind it?

In other words, the label inside the p tag is bound together with the value in the input tag through the notation {{message}}, which changes, and the other data bound to it changes.

In conjunction with the title, Vue.js automatically responds to changes in data, and modifies all data and view content that is bound to each other based on the user's pre-written binding relationships in the code. This binding relationship is declared on the graph with the V-model attribute of the input tag, so you might see in other places that someone has roughly called vue.js as the template engine for declarative rendering.

7. Modular Development

Remember that in the traditional front-end development, we are everyone to make a page, and then finally into a variety of back-end template engine, such as PHP smarty or Java JSP and so on.

But now we do a single page application, page interaction and structure is very complex, a page has a lot of modules need to write, and often a module of code and workload is very large, if also in accordance with the original method of development, then will be exhausted people. And in the future, the product needs change, change it is also very troublesome, for fear of moving one of the Div, the other div followed the avalanche, the entire page all messed up, or because of the JavaScript event bubbling mechanism, resulting in modifying some of the inner DOM event handler function, There are all kinds of strange bugs.

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

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

Vue.js through the components, the various modules in a single page application are split into a single component (component), we just have to write the various component labels (occupy pits) in the parent application, and write the parameters of the component in the component label (just like passing parameters to the function, this parameter is called the component's properties), and then sub- Do not write the implementation of the various components (pits), and then the entire application even if done.

8.Virtual DOM

Now the speed of more and more fast, many people home is dozens of or even hundreds of m of fiber, mobile phone is also 4G started, according to the reason a Web page is hundreds of K, and the browser itself will cache a lot of resource files, then dozens of m of optical fiber why open a before already opened, already have cached pages or feel very slow? This is because the browser itself handles the DOM is also a performance bottleneck, especially in the traditional development, with jquery or native JavaScript dom operation function on the DOM frequently, the browser to constantly render new DOM tree, causing the page to look very lag.

Virtual DOM is the English version of the DOM, in short, he is a kind of pre-JavaScript can be used for various calculations, the final DOM operation is calculated and optimized, because this DOM operation is a preprocessing operation, and there is no real operation of the DOM, so called Virtual dom. Finally, the DOM operation is actually committed after the calculation is complete, and the DOM operation changes are reflected on the DOM tree.

For Vue.js's virtual DOM, the industry now has a mixed evaluation. Some people think that vue.js as a lightweight framework that introduces virtual Dom increases the size of the vue.js itself and consumes more CPUs (more power on the phone) (note: Consuming more CPUs does not mean that it will be more expensive, because JavaScript calculations are background calculations, his calculations don't make DOM operations lag), and while manipulating a single DOM element, it's a The calculation process will be slower. But some people think that basically will use vue.js development is the page content of a lot of elements, the operation of the DOM is generally larger, the average is more cost-effective.

9. How do I use vue.js for single page application development?

Said so much, I still do not know how to use it to make a page like that, ah, how to learn it?

Before we looked at a responsive data-binding case, it was just a demo, and there was no real sense, far from a real single-page application, how do you use it to develop real-world projects?

My suggestion is to first look at the basic part of the introduction-Vue.js Official document. In addition to the Components section, which involves a lot of obscure nouns, the first few chapters are all about using vue.js as a template engine.

Then start learning ecmascript6,webpack,npm and the basic usage of VUE-CLI, and it's best to know about node. js.

Finally, the component part of the first glance, to understand what the components inside the concept, began to look at the online various combat video and articles and other sources of open source code.

10. In front of you mentioned several times ECMAScript, what is this?

ECMAScript listen to the name seems to be similar to JavaScript, it is difficult for them to have any inextricably linked?

Yes, you guessed it, they really have a deep connection.

Quote Nanyi Teacher's words: (ECMAScript 6 Getting started)

To be clear about this problem, we need to look back on history. In November 1996, the creator of JavaScript, Netscape, decided to submit JavaScript to the International Organization for Standardization (ISO) ECMA in the hope that the language would become a global standard. The following year, ECMA released the first edition of Standard No. 262 (ECMA-262), which specifies the standard of the browser scripting language and calls this language ECMAScript, which is version 1.0.

The standard was developed for JavaScript in the first place, but is not called JavaScript for two reasons. One is the trademark, Java is the trademark of Sun company, under the license agreement, only Netscape company can legally use the name of JavaScript, and JavaScript itself has been registered as a trademark of Netscape company. The second is to embody the language of the creator is the ECMA, not Netscape, so as to ensure the openness and neutrality of the language.

Thus, the relationship between ECMAScript and JavaScript is that the former is the specification of the latter, which is an implementation of the former (in addition to the ECMAScript dialect and Jscript and ActionScript). In everyday situations, these two words can be interchangeable.

And ECMASCRIPT6 is a new generation of JavaScript language.

It is also highly recommended to learn ECMAScript6 when you refer to this book ECMAScript 6 Getting Started

11. I always hear webpack when I study vue.js, what is this?

Webpack is a front-end packaging and building tool. If you have been a handwritten html,css,javascript before, and have introduced CSS to your HTML file via the link tag, and introduced the external JS script via the SRC attribute of the script tag, you will certainly be unfamiliar with the tool. It does not matter, we first to understand why use Webpack, and then take the reason to study just fine.

12. Why Use Webpack

As I said earlier, making a single-page application is inherently complex, and when it does, it will certainly use a lot of material and other third-party libraries, how can we manage these things?

And here's the front. Webpack is a front-end packaging tool, why should the front-end code be packaged? Because a single page application to use a lot of material, if each of the footage is introduced in the HTML by the SRC attribute or link, then the request for a page, the browser will have to initiate more than 10 requests, often requested these resources are some script code or a small picture, these resources themselves only a few k, Download not required for 1 seconds, but because HTTP is the application layer protocol, its lower layer is the TCP Transport layer protocol, the TCP handshake and wave process may take longer than the download resources themselves, so need to package these small files into a file, so long as a TCP handshake and wave process, A number of resources to download down, and multiple resources because all are sharing an HTTP request, so the head and other parts are also shared, equivalent to form a scale effect, so that the page display faster, user experience better.

Before talking about Webpack and the built features, this has to mention the new version of JavaScript ECMAScript6, but now there are many people at home and abroad with the old version of the browser, these browsers do not support ECMASCRIPT6, So how do our front-end projects run on this browser? This requires Webpack's loader to automatically load a converter to convert our written ECMAScript6 into the old JavaScript language that the browser can support, the name of the converter is Babel, and if you hear or see the word later, It should be known that it is a ECMAScript6 to the old version of JavaScript converter. This is also the building function of Webpack. Of course, the front-end has more in-depth students will also know sass,less,stylus such as CSS preprocessor, we can also by writing in loader specific rules to automatically translate these CSS preprocessing language into the common browser can recognize the CSS code.

The introductory introduction mentions that Vue.js can use single-file component development projects, in fact, by webpack the single-file component of the template, style and JS into the main page

Of course Webpack not only this feature, it can also be installed by installing a variety of plug-ins to expand, such as hot-loading technology, is to liberate the keyboard F5 key. Let us modify the code, and press Ctrl+s save, the browser page automatically refresh changes, do not need us to manually refresh, there are some plug-ins can automatically add comments, the CSS code automatically added some browser kernel to CSS3 compatibility prefix, like webkit-xxx and the like.

What is 13.NPM and node. js? What is their relationship?

First of all, talk about node. js. We know that in general, JavaScript is running in a browser, so the ability of JavaScript is limited to the permissions that the browser can give it. For example, read and write local system files such operations, in general, the JavaScript code running in the browser does not have this permission to operate. What if we want to use JavaScript to write some programs that can run on the operating system and have the functionality of a programming language like Php,java? Node. JS solves this problem. node. JS is a server-side JavaScript runtime environment that enables you to write standalone programs with JavaScript through node. js. As we mentioned earlier, Webpack is a node. js write, so as a front-end development, even if you do not use node. js to write standalone programs, but also with a node. JS runtime Environment, after all, many front-end tools are written using it.

NPM is a node. js Package Manager. In the traditional development, Jquery.js are mostly Baidu search, then go to the official website to download, or directly into the CDN resources, this method is too cumbersome. If you encounter other packages in the future, the package code itself may also invoke other packages (also known as the package and the other packages have dependencies), then we have to introduce a package in our own project will become very difficult. Now that we have NPM, this package manager can be directly

npm install xxx包名称

The way to introduce it, for example

npm install vue

The package is automatically imported under the current project folder, and NPM automatically downloads the other packages that the Vue package relies on.

As for some people in accordance with the online NPM tutorial configuration when stepping on the pit, found that the download speed is very slow or completely download, that is because our country has a well-known reason, there are various solutions on the Internet to solve this problem, we use the search engine more.

As mentioned earlier, Webpack can install a variety of plug-ins to extend the functionality, in fact, it is extended in this way.

If you have learned PHP, NPM is similar to composer in PHP. It's similar to the Apt-get under CentOS and under the Ubuntu.

What is 14.VUE-CLI again?

It is a vue.js scaffold tool. It's an automatic help you build a good project directory, configure the Webpack, and a variety of dependent package tools, it can be

npm install vue-cli -g

installation, followed by-G means that the global installation means that you can call it directly from the Vue command after you open the command line.

15. Should I learn vue.js?

Now vue.js whether the development momentum or the author support is very good, and its own Chinese material is more, tutorials are many, now casually open a few and front-end development related to the column, basically can see related articles, the community is also very active.

As for you should not learn, depending on yourself, if you are currently only doing content display as the main project, or is all day with a variety of CMS building station imitation station, and later do not intend to replace better work, then you can temporarily do not learn. If you develop a project with a lot of interaction, and both front-end development has a clear understanding of the front-end separation, then you can boldly learn, and in the actual project application.

How did the 16.vue.js fire up?

On this issue, the Internet is a lot of talk, I think it is mainly the previous years, the front end of the transformation is too fast, and the recent year began vue.js+webpack this combination began to stabilize, and has a lot of Chinese material.

Compared to its rival angularjs, the old and new versions of the project cannot be upgraded smoothly, and the changes are too big for the user to feel secure.

The mainstream recommendation of react itself is JSX, which requires extra learning of a grammar (what?). Learn vue.js still need to learn ECMASCRIPT6? Now ECMASCRIPT6 is a trend, Not because vue.js to learn), and react itself with the use of the render writing template code, which makes a lot of accustomed to smarty and other backend template engine to use the feeling very uncomfortable, now it seems react itself in China some forum community of the popularity or not vue.js high.

Of course, it's not that the frameworks are bad except for vue.js. Like the new version is also used react development, he still have their own excellent place you can learn in depth after making their own judgments.

17. I also see VUEX and Vue-route in many places, and what are they?

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, which is not the router we use on the Internet, but rather a thing that manages the request portal and the page mapping relationship. It allows the page to be replaced with a non-flush, which makes the user feel like switching to a Web page.

To clarify these two things, but also to spend a lot of space, so here is simply to mention that the first to learn Vue.js itself is the most important.

18. I have seen Vue-resource and Axios in some places, and what are they?

In the traditional front-end non-detached development, the backend directly splicing the data through the template engine into the returned HTML. Now the single page application is a front-end separation development, then the data in this single-page application can be obtained through Ajax, but also through the way of Ajax submitted to the backend.

In the traditional development we are all through the XMLHttpRequest manual operation, or through the jquery Ajax method for data submission acquisition.

Vue.js itself does not encapsulate the AJAX operations library, so we want to use Vue-resource and Axios to do AJAX operations, and for various reasons, now vue.js2.0 has Axios as the official recommendation of the AJAX Library.

19. Should I study vue.js2.0 or 1.0?

Now many frameworks and languages are learning new and not learning old (Python has become so slowly), so if not to maintain the old project, it is recommended to learn vue.js2.0. and learned to vue.js2.0, and then to learn vue.js1.0 is not difficult.

20. What development tools and computers do you use to write Vue.js?

Front-end development basically does not need too high-end computer can be competent, now this era is a computer, installed an editor can do the front-end development.

Vue.js's component files are essentially normal code files, so it is sufficient for various editors to check with some syntax for the plugin. I am using sublime text 3, after installing some plug-ins can be implemented. Vue single-file component highlighting code and various auto-completion. Webstorm also have similar plug-ins, you can be in the online various teaching articles under the guidance of the configuration of the environment.

The theme I use is Monokai, and this theme is not very painful to watch the eyes for a long time on most monitors. I use the display is LG IPS236, some displays have brightness color standard adjustment, I this monitor to adjust to about 2.0 will be more comfortable, too low will cause the bottom of the tan background black, larger contrast more fatigue, too high will lead to poor contrast, the picture of white effect color

Essential technologies for Web front-end development