First, start with history

Web is short for World Wide Web. It can be understood in terms of the following epochs

  • The Stone Age
  • civilization
  • Industrial Revolution
  • A hundred flowers bloom

The Stone Age

Stone Age refers to our static web pages. Take a look at Apple’s website in 1997

The earliest web pages did not have databases, so it was understood that the achievement was a newspaper that could be browsed on the web, until the advent of CGI, which used CGI Perl to run a small piece of code to interact with a database or file system, such as Google (1998).

civilization

ASP, JSP we should not be too strange, the first appeared in 2005 or so, has appeared Microsoft ASP and Java Server Pages [JSP] and other technologies, instead of CGI, enhance the security of WEB and Server interaction, similar to the following, It’s Java plus HTML

`<%@ page language=”java” contentType=”text/html; charset=utf-8″

pageEncoding=”utf-8″%>

A big disadvantage of JSPS is that they are not very flexible, because JSPS are executed on the server side and usually return an HTML text to the client. Every time we request for data and content loading, the server returns the DOM after rendering, which greatly reduces the flexibility of our website development. In this case, in the same year: Ajax took off (small detail, why say the fire here, because Ajax technology did not appear in 2005, it was the prototype of 1999), now common technology, was precious at the time

Industrial Revolution

Mobile devices, Jquery, SPA (Single Page Application), Backbone EmberJS, AngularJS, and other front-end frameworks have emerged. But then SPA road go bad, such as SEO, SPA too many pages, the View of binding under complex scene, etc., are not very good deal with after these years of rapid development, the developers a lot of energy saving, reduces the developers and the threshold of the development process, greatly improves the development efficiency and speed of iteration, we can call of the industrial age

A hundred flowers bloom

There’s no text here. Put a picture here to feel it

PS: Why do you want to say so much about the history of the Web? We can see that the Web technology is changing so fast. Each new technology is a solution to some specific scenes. Let’s move on

What is VUE

Vue. Js (/vju /, or Vue for short) is an open source JavaScript framework for creating user interfaces, as well as a Web application framework for creating single-page applications. A 2016 survey of JavaScript found that Vue had a 89% developer satisfaction rate. The project averages 95 stars per day on GitHub, making it the third most popular project on GitHub ever. It is also a popular JavaScript front-end framework designed to better organize and simplify Web development. The core of Vue’s focus is the view layer in the MVC pattern. It also makes it easy to get updates and interact with the model through component-specific methods. He says his idea was to take what he liked about Angular and build a fairly lightweight framework that was first released in February 2014

Iii. Vue core features

Data Driven (MVVM)

MVVM stands for model-view-viewModel

  • Model: The Model layer, which processes the business logic and interacts with the server side
  • View: The View layer is responsible for turning the data model into a UI for presentation, which can be easily understood as HTML pages
  • ViewModel: The ViewModel layer that connects the Model to the View and acts as a communication bridge between the Model and View

This requires an intuitive diagram, as follows

componentization

1. What is componentization? In a word, it is to abstract all kinds of graphic and non-graphic logic into a unified concept (component) to realize the development mode. In Vue, every. Vue file can be regarded as a component 2. The advantages of componentization

  • Reduce the coupling degree of the whole system, under the condition of keeping the interface unchanged, we can replace different components to quickly complete the requirements, such as the input box, can be replaced by calendar, time, scope and other components for specific implementation
  • Convenient debugging, because of the whole system is through the components together, in the event of a problem, can be used directly to remove components of exclusions or rapid positioning problem according to the error of the components, are able to quickly locate, because low coupling between each component, single responsibility, so logic than the analysis of the whole system is simple
  • Increased maintainability, because each component has a single responsibility and components are reused in the system, optimizing the code can result in an overall upgrade of the system

Command system

Directives are special Directives with a V-prefixed effect that act on the DOM in response to changes in the value of the expression

  • Common instructions

    • Conditional render instructionv-if
    • List render instructionv-for
    • Property binding directivev-bind
    • Event binding instructionv-on
    • Two-way data binding instructionsv-model

What did we do before we were told? Do you need to get the DOM first and go to…. Do what

Iv. Differences between Vue and traditional development

A revolution without landing use scenarios is not a good revolution, let’s use a high-frequency application scenario to illustrate the need to register an account we should be familiar with, as follows

Using jquery to realize the general idea is to select the process DOM object, click the button to hide the current activity process DOM object, display the next process DOM object as shown below (code is not on, on the article is not..)

We know that VUE basically does not operate DOM nodes. Bidirectional binding allows dom nodes to control various attributes of DOM nodes by modifying the value of variables after they are bound to the view. Therefore, the implementation idea is as follows: The view layer uses a variable to control whether the DOM node is displayed or not. Click the button to change the variable, as shown in the following figure

The summary is:

  • All interface events in Vue only manipulate data. Jquery handles DOM
  • All interface changes in Vue are automatically bound based on data. Jquery manipulates DOM

Vue vs. React

Here are a few simple analogies, neither good nor bad, but in different contexts

The same

  • All have the idea of componentization
  • Both support server-side rendering
  • They all have a Virtual DOM
  • Data-driven view
  • Both have solutions that support Native:Vuetheweex,ReacttheReact native
  • Each has its own build tool:Vuethevue-cli,ReacttheCreate React App

The difference between

  • Different data flows.reactSince its birth, it advocates one-way data flow, whileVueIt’s a two-way data stream
  • Data changes are implemented on different principles.reactUsing immutable data, andVueWe’re using variable data
  • Differences in componentized communication.reactWe use the callback function to communicate, andVueA neutron component can pass messages to its parent in two ways: events and callback functions
  • Diff is different.reactThe DIff queue is mainly used to save which DOM needs to be updated, obtain patch tree, and then update DOM in batches in a unified operation.VueUse bidirectional Pointers to compare and update the DOM

reference

  • Segmentfault.com/a/119000001…
  • Zh.wikipedia.org/zh-cn/Vue.j…
  • zhuanlan.zhihu.com/p/20197803
  • zhuanlan.zhihu.com/p/38296857

This is a 33-part interview series at github.com/febobo/web-… Discussion and suggestions are welcome