A development history of vue
1.1 vue
Vue is a progressive javascript framework . Vue's core library only focuses on the view layer , which is convenient for integration with third-party libraries or existing projects.
1.2 Quick summary of front-end knowledge core
Soc Principle: Separation of Concerns
HTML + CSS + JS: View: Refresh the data provided by the backend to show the user.
Network communication: axios
Page jump: vue-router
State management: vuex
Vue-UI: ICE , Element UI
1.3 Three Elements of a Web Page
1. HTML ( structure ): Hyper Text Markup Language (Hyper Text Markup Language), determines the structure and content of web pages
2. CSS ( performance ): Cascading Style Sheets (Cascading Style Sheets), set the presentation style of the web page.
3. JavaScript ( behavior ): It is a weakly typed scripting language. Its source code does not need to be compiled, but is interpreted and run by the browser to control the behavior of web pages.
1.4 Classification of js
1. JQuery: A well-known JavaScript library, the advantage is that it simplifies the DOM operation, and the disadvantage is that the DOM operation is too frequent, which affects the front-end performance; in the eyes of the front-end, it is only used for compatibility with IE6, 7, 8;
2. Angular: The front-end framework acquired by Google, developed by a group of Java programmers, is characterized by moving the back-end MVC model to the front-end and adding the concept of modular development . It cooperates with Microsoft and adopts TypeScript syntax development; for background programs Friendly to staff, not very friendly to front-end programmers; the biggest disadvantage is that the version iteration is unreasonable (such as 1st generation –> 2nd generation, except for the name, it is basically two things; Angular6 has been launched by the time of publishing the blog)
3. React: Produced by Facebook, a high-performance JS front-end framework; the feature is that a new concept [virtual DOM] is proposed to reduce real DOM operations , simulate DOM operations in memory, and effectively improve front-end rendering efficiency; the disadvantage is It is complicated to use because it needs to learn an additional [JSX] language;
4. Vue: A progressive JavaScript framework. The so-called progressive means to gradually realize new features, such as the realization of new features such as modular development, routing, and state management. It is characterized by combining the advantages ;
5. Axios: front-end communication framework; because the boundary of Vue is very clear, it is for processing DOM, so it does not have communication capabilities. At this time, it is necessary to use an additional communication framework to interact with the server; of course, you can also directly choose to use AJAX provided by jQuery communication function;
1.5 Front-end ui framework
1. Ant-Design: Produced by Alibaba, a UI framework based on React
2. ElementUI, iview, ice: Produced by Ele.me, based on Vue UI framework
3. BootStrap: An open source toolkit for front-end development launched by Teitter
4. AmazeUI: also known as "Sister UI", an HTML5 cross-screen front-end framework
1.6 Identical on three ends
Hybrid Development (Hybrid App)
The main purpose is to unify a set of codes at three terminals (PC, Android: .apk, iOS: .ipa) and be able to call the underlying hardware of the device (such as: sensor, GPS, camera, etc.). There are mainly two packaging methods:
1 Cloud packaging: HBuild -> HBuildX, produced by DCloud; API Cloud
2 Local packaging: Cordova (formerly PhoneGap)
WeChat applet
For details, please refer to the official website of WeChat. Here is a framework for UI development of WeChat applets: WeUI
1.7 Project Management Tools
1. NPM: project comprehensive management tool, similar to Maven
2.YARN: An alternative to NPM, similar to the relationship between Maven and Gradle
1.8 Mainstream front-end ui framework
1.Vue.js
2.iview is a powerful Vue-based UI library, which belongs to the mainstream front-end framework. It can be considered when selecting models. The main feature is that it supports more mobile terminals.
3. Element is a Vue UI component library maintained by Ele.me’s front-end open source. It belongs to the mainstream front-end framework. It can be considered when selecting models. The main feature is that it supports more desktops.
4.ice Feibing is a React/Angular/Vue-based mid-background application solution of the Alibaba team. The main component is React. As of February 17, 2019, the support for Vue is not perfect before the blog is updated. Currently Still in the wait-and-see stage
5. Vant UI is a Vue component library implemented by Youzan’s front-end team based on Youzan’s unified specifications, providing a complete set of UI basic components and business components
6.cube-ui is an exquisite mobile component library based on Vue js developed by Didi team
7. Flutter is Google's mobile UI framework, which can build high-quality native applications on Android and iOS in a very short time
8. mpvue is a front-end framework developed by Meituan for using and Vue.jsdeveloping small programs. It currently supports WeChat small programs, Baidu smart small programs, Toutiao small programs and Alipay small programs.
9. WeUI is a set of basic style library that is consistent with WeChat’s native visual experience. It is designed by WeChat’s official design team for WeChat’s internal web pages and WeChat applets, making users’ usage perception more unified
1.9 MV* mode
The MV* schema here is as follows:
1. MVC (mainly synchronous communication): Model, View, Controller
2. MVP (mainly asynchronous communication): Model, View, Presenter
3. MVVM (mainly asynchronous communication): Model, View, and View Model In order to reduce the complexity of front-end development, a large number of front-end frameworks have emerged, such as: , , , etc. The general principle of these frameworks Angular JSis Reactto Vue.jsfirst Ember JSlayer by type, such as Templates, Controllers, Models, and then split in layers
1.10 mvvm mode
What the View layer displays is not Modelthe data of the layer, but ViewModelthe data of the layer. It is responsible for interacting ViewModelwith the layer, which completely decouples the View layer and the Model layer. This decoupling is crucial, and it is an important part of the implementation of the separation scheme one ring.Model