Introduction
"Simple yet elegant, small but not lacking in master craftsmanship".
The most popular front-end framework in 2016 is Vue.js. Many programmers who have used vue commented on it, "vue.js combines the advantages of angular.js and react.js, and eliminates their shortcomings." The vue.js that has been awarded such a high rating is also the pride of the Chinese in the open source world, because its author is a Chinese - Evan You.
Vue.js is a JavaScriptMVVM library, a progressive framework for building user interfaces. It is built with data-driven and componentized thinking, with a bottom-up incremental development design. Compared with Angular.js, Vue.js provides a simpler and easier-to-understand API, allowing us to quickly get started and use Vue.js; at the same time, Vue.js is more lightweight than the relatively complex architecture of React + Redux It is also easier to use and is the preferred front-end framework for start-up projects. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. And the author is Chinese, Vue has the most friendly api documentation and official tutorials for Chinese developers.
Debug plugin
In terms of vue debugging, you can choose to install the chrome plugin vue Devtools. Open the vue project and select the vue panel in the console console. In the Devtools tool, you can select a component to view the data information in the corresponding component. You can also select the Vuex option to view the state variable information of Vuex in the project.
UI component library
In terms of the vue component library, I personally do not recommend using the UI component library. After all, the process of building a wheel by yourself is still very fulfilling. Of course, if you pay more attention to development efficiency and choose vue2.0 as the front-end framework, then the Element component launched by Ele.me is a very good choice. Its github project ( https://github.com/ElemeFE/element ) is updated frequently. Although the project will be a little unstable, element is by far the best UI component that supports vue2.0. Just like its slogan, "rapid prototyping, just to make you work less overtime".
Vue, React, Angular1 comparison
Performance comparison
In Angular1, every data change in the scope scope will trigger the recalculation of the watcher. Angular encapsulates the commonly used dom events, xhr events, etc., and triggers the digest process that enters angular. In the digest process, it will traverse from the rootscope to check all watchers. Also, if some watchers trigger another update, the dirty cycle may run multiple times. Vue does not have this problem because it uses a dependency tracking-based observation system and asynchronous queue updates, and data changes are penalized independently unless there are explicit dependencies between the data.
Vue officially claims that the rendering performance of Vue is better than that of React. In order to be reasonable and convincing, the vue development team built a simple performance comparison project ( https://github.com/chrisvfritz/vue-render-performance-comparisons ), which is responsible for rendering 10,000 list items 100 times. Vue officially runs each reference project 20 times and takes the best result as shown below: 
It can be seen that the performance of Vue is much better than Angular1, and slightly better than React.
community outreach comparison
Google is behind Angular 1, so the community base is nothing to worry about, and the number of questions from Tutorial to StackOverflow reflects the integrity of the ecosystem. The 2.0 version after Angular1 is almost a framework for overturning and redoing. For projects using the 1.X version, it should be very difficult to smoothly upgrade and transition to the 2.0 version. At present, the number of online applications of Angular2 is not too many, and the mainstream coding is still mostly in the 1.X version. This huge difference in versioning also indirectly affects developers' confidence in angular.
Both Vue and React have strong community support. React has state management libraries Flux, ReduxVue, and correspondingly, Vue has vuex. Both Vue and React provide powerful routing libraries for large applications. However, Vue's routing library and state management library are both officially maintained and supported. React chose to leave these issues up to the community to maintain, thus creating a more decentralized ecosystem. But in contrast, the React ecosystem is more prosperous than Vue. In addition, Vue provides Vue-cli scaffolding, including Webpack, Browserify, and even a routing library, which allows you to build projects very easily.
Learning steepness contrast
In terms of directives and components, Vue divides directives and components more clearly. Directives only encapsulate DOM manipulation, while components represent a self-contained self-contained unit with its own view and data logic. In Angular 1 there was a lot of confusion between the two. In terms of API and framework design, angular1 is much more complicated than vue. From a personal point of view, the learning curve of angular1 and React will be relatively steep, and the coding method of vue will be closer to the programming habits of front-end developers.
Because the author of vue is Chinese, the official website, tutorial and api of vue are definitely the most complete and easy to understand. In addition, every major version release will be accompanied by a detailed migration documentation, including many detailed explanations, many migration examples, and even migration tools. Don't you feel blushing from the Angular development team...
The use of Vue is very simple, create a local .html file, and then import Vue as follows:
In this way, the hello world application of vue is generated.
Rendering Capability Comparison
ReactNative enables you to write natively rendered apps (iOS and Android) using the same component model. Being able to develop across multiple platforms at the same time is great for developers. In order to make up for this deficiency, during the JSConf2016 held in September 2016, You Yuxi, the author of vue.js, announced that he would join the Weex team as a technical consultant. The two parties will cooperate more closely to build a development ecosystem. Weex is Ali's cross-platform user interface development framework. Weex's JavaScript framework uses Vue for runtime. After that, with the help of Weex, components developed using Vue syntax can not only run on the browser side, but can also be used to develop native applications on iOS and Android.
Yuxi You, author of Vue.js, said: "Weex chooses Vue as its JavaScript runtime framework is one thing that makes me very happy. Vue's component development model has been widely recognized by the web developer community, and the Vue development experience Extending to native platforms is something I've always wanted to do but haven't had the energy to do. I'm excited to think that Weex will allow developers to write common components across Web/Android/iOS using Vue's syntax. "
Disadvantages of vue
Vue is so good, isn't there any downside? Of course, although Vue is very popular in 2016, compared to angular and react, neither maturity nor community activity is an opponent. In addition, Vue explicitly stated that it dropped support for IE8. Looking at the current recruitment websites, how many writings require angular experience, and how many require Vue experience, it can be seen that the influence of Vue is far worse than that of Angular and React.
Vue family bucket and project architecture
Vue has a famous family bucket series, including vue-router ( http://router.vuejs.org ), vuex ( http://vuex.vuejs.org ), vue-resource ( https://github.com/ pagekit/vue-resource ). Coupled with the build tool vue-cli, it is the core component of a complete vue project.
vue-router routing
It is recommended to use the npm tool to install vue-router
npm install vue-router
Import and define the Vue module, vue-router module and components to be used through import, in this case, the Goods, Ratings and Seller components respectively. Finally, if you use it in a modular project, you must explicitly install the routing functionality via Vue.use().
import Vue from 'vue'
importRouter from 'vue-router'
import Goods from ‘@/components/goods/goods’;
import Ratings from ‘@/components/ratings/ratings’;
import Seller from ‘@/components/seller/seller’;
Vue.use(Router); // You need to import Vue and Router, otherwise an error of undefined will be reported
. Define a route through const router= new VueRouter(), and pass in the corresponding configuration, including path path and component components.
Finally, when using newVue to create and mount the vue root instance, remember to inject the route through the router configuration parameters, that is, the route object exported in the router, so that the entire application has the routing function.
vuex state management
Vuex is a state management pattern developed for Vue.js applications. It uses a centralized store to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner. As mentioned earlier, Vuex has been integrated into vue Devtools, the official debugging tool of Vue, so that you can easily view the state changes of Vuex in the project.
Suppose there is such a scenario: our project is relatively large, there are multiple parent components, and each parent component also contains multiple child components. How to keep track of all the time will become difficult. Which event is dispatched by which component, and which component should listen for which event? The parent component will become more and more coupled with the child component, because it needs to explicitly dispatch and listen to certain events of the child component. The project logic is scattered among various components, which can easily lead to confusion of logic, which is not conducive to the maintenance of our project.
That's what Vuex is designed to solve. The four core concepts of Vuex are:
The state tree: Vuex uses a single state tree, which contains all application-level state with one object. So far it exists as a "single source of data (SSOT)". This also means that each application will contain only one instance of the store. The single-state tree allows us to directly locate any particular piece of state, and to easily take a snapshot of the entire current application state while debugging.
Getters: Used to get Vue component data from store.
Mutators: Event handlers are used to drive state changes.
Actions: Functions that can be used by components to drive event handler mutations
Vuex is different from a simple global object. When Vuex reads the state value from the store, if the state changes, then the corresponding component It will also update efficiently. Also, the only way to change the state in the store is to commit mutations. This allows us to keep track of every state change. As long as there is a state change, it must be accompanied by the submission of the mutation.
Let's take a look at the simplest vuex example:
After installing Vuex, let's create a store. The creation process is straightforward - just provide an initial state object and some mutations: 
now, you can get the state object via store.state and trigger state changes via the store.commit method:
Introduction to vue-resource
Vue-resource has the characteristics of small size, supports browsers above IE9, and supports the promise feature. It is also recommended to use npm to install Vue-resource.
$ npm install vue-resource
After installing and introducing vue-resource, you can use http based on the global Vue object, or you can use http based on a Vue instance. 
After sending the request, use the then method to process the response result. The then method has two parameters, the first parameter is the callback function when the response is successful, and the second parameter is the callback function when the response fails.
The request API of vue-resource is designed in REST style, it provides 7 kinds of request API:
get(url,[options])
head(url,[options])
delete(url,[options])
jsonp (url,[options])
post(url,[body], [options])
put(url, [body],[options])
patch(url,[body], [options])
vue project directory structure
The following figure is the general structure of a simple vue project. The following briefly introduces what content is generally stored in each folder. 
The components/ folder is used to store Vue components. Personal suggestion, put the image image used in each component into the corresponding component sub-file directory, so as to facilitate unified management
of the project's dependency library
vuex/ folder installed by Node_modules/npm stores things related to Vuex store (state object, actions, mutations)
The router/ folder stores the routing configuration items related to vue-router. The
build/ file is the packaging and compilation configuration file of webpack. The
static/ folder stores some static, less-changing images or css The file
config/ folder stores some configuration items, such as the port configuration for server access, etc.
The dist/ folder does not exist at the beginning. After our project is
built, the root component of App.vue will be produced, and all sub The components will be referenced here
. The entry file of the entire project index.html will reference the js logic of our root component App.vue main.js
entry file, which will be injected into index.html after webpack packaging
Application of less in vue
You can also use less precompilation in the vue project, but you need to use npm to install the less-loader plugin. After the installation is complete, the css module in vue is simply configured, so that you can directly use less to write style sheets. When packaging and compiling, the corresponding css style will be automatically generated.
Vue and examples explain the core functions of Vue
There are many functions of Vue, and it is difficult to explain them in detail. The following is an explanation of several core functions of Vue based on the project example at work and combined with the code.
computed property
Suppose there is the following shopping cart settlement scenario. The total amount of products selected by the user varies according to the number of products, the number of selected product types,
and the unit price of the product. However, the objects such as quantity, quantity of selected types and unit price are all dynamically changed according to the user's choice. If the front-end template is used to calculate the final total amount of goods, these dynamically changing variables (quantity of goods, unit price of goods, Select the product type), which will make this logic complicated and difficult to maintain. In this case, the template is no longer concise and clear. Vue provides a solution for this scenario. In any complex logic, Vue recommends using computed properties. 
As shown in the figure above, in html, we only need to use the {{totalPrice}} computed property to represent the final total merchandise amount. We don't need to pay attention to the value change of this variable. The logic of the variable totalPrice is written in the corresponding computed property.
There may be doubts, isn't this computed property similar to defining a method? The biggest difference between the two is that a computed property is cached based on its dependencies. A computed property is only re-evaluated when its associated dependencies change. In this example, the calculated property totalPrice will recalculate the new value only when the price and quantity count of the selected item change. This means that as long as the value of totalPrice has not changed, accessing the computed property multiple times will immediately return the previous computed result without having to perform the computation again.
Template syntax
Vue.js uses an HTML-based template syntax that allows developers to declaratively bind the DOM to the underlying Vue instance's data. All Vue.js templates are valid HTML, so they can be parsed by spec-compliant browsers and HTML parsers. Vue's template syntax includes inserting text with double curly braces, inserting plain HTML content with v-html, inserting objects with v-bind, angular-like v-if, v-show, v-for directives, and filters, etc. .
componentized
Components are the most powerful feature of Vue.js. Components can encapsulate reusable code, and achieve component reuse by passing in different objects.
To give a simple assembly example, we first write a star component, which is an ordinary star.vue file. Its role is to simply implement a five-pointed star.
How to use this star component in other vue files? As shown in the figure below, first import the star component object through import, and declare and register the star component in the vue file that wants to use the star component. Now you can happily use the star component anywhere in the vue file through the tag. Where you want to display a five-pointed star, use a star tag, which can easily be done.
Component instances are scoped in isolation. This means that the parent component's data cannot be directly referenced within the child component's template. To let the child component use the parent component's data, we need to pass the child component's props option. As shown in this example, the child component star has to explicitly declare the data it expects using the props option. Here it refers to the two variables "size" and "score". We can customize the child component by passing the two objects of size and value to the child component star from the parent.
transition effect
Vue provides a variety of different ways to apply transition effects when inserting, updating or removing the DOM. You can achieve cool transition effects with a few simple lines of code. Vue provides encapsulation components for transitions. When using v-if, v-show and other methods to make dom elements inside transitions change, you can add entering/leaving transitions to any element and component.
When the content in v-show changes, the elements in the transition component will change state. After applying the transition package, Vue will automatically identify whether the CSS transition effect animation is applied to the target element. If so, it will be at the right time. Add the entering/leaving class to achieve this transition effect.
The following figure shows an example of a simple transition effect. You need to wrap the element that you want to achieve the transition effect in the transition tag, declare the name of the transition effect through name="slide-fade", and add it in the corresponding vue file The CSS style of the transition effect
, so that the transition effect of the element can be simply completed. 
Summarize
According to incomplete statistics, including Ele.me, Rare Earth Nuggets, Suning Tesco, Meituan, Tmall, Lizhi FM, Fangduoduo, Laravel, htmlBurger and other well-known domestic and foreign companies are using vue for the development of new projects and old ones. Front-end refactoring of the project.
In addition, the project architecture of vue + vuex + vue-resource + vue-router + webpack + es6 + less has become the first choice of more and more large companies.
Reprinted from: https://blog.csdn.net/zhenghao35791/article/details/67639415