1. @ click.native
resolve: @ click.native native Click event: Vue component is bound to the event, you must add native, or will not take effect.
Description: native is a way to put the components back into the native DOM, which is equivalent to the original component binding event.
2. Click the stop event bubbling
analysis:
<a v-on:click.stop="doThis"></a>
3. Submit an event no longer reload the page
to resolve:
<form v-on:submit.prevent="onSubmit"></form>
4. The modifier may be serially
Analysis:
<a v-on:click.stop.prevent="doThat">
5. Only modifiers
Analysis:
<form v-on:submit.prevent></form>
Description: with v-on: click.prevent.self blocks all clicks and v-on: click.self.prevent will prevent clicks on the element itself.
6.line-height attribute
resolved:
[. 1] Normal: default. Set a reasonable line spacing.
[2] number: set the number, this number will be multiplied by the current font size to set the line spacing.
[3] length: set a fixed line spacing.
[4]%: percentage based on the current line spacing of the font size.
[5] inherit: predetermined value of line-height should inherit properties from the parent element.
7.v-if v-show differences and
resolved:
[. 1] V-IF block by rendering the condition judgment conditions, when the value is false, the conditional block all current DOM elements without rendering; v-show is also conditional but if the v-show of a false value, although the current conditions will not block the page display, but has finished rendering, but property is set to become the display: none.
[2] v-if is to add and remove DOM elements determined by the conditions; v-show through the display: Show hidden to the control element none: block and display.
8.this.$router.go('-1')
Analytical: go forward and back navigation method is used as, the business may need a previous page, then it can go to achieve. When a route is back to -1.
9.Vue watch in the immediate and handler
resolve: immediate represents the time in the watch for the first time binding, whether handler, the value is true it means that when it was declared in the watch, immediately execute handler method, value is false, and generally use the same watch, when changes occur in the data before the execution handler.
10.Vue deep in the watch
Analysis: when an object needs to listen for changes, conventional methods can not watch the object inside the monitored attribute change, only the data in the data to be able to monitor changes, then you need deep property on an object depth monitoring.
11.v-bind abbreviation
Analysis:
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
12.v-on abbreviations
Analysis:
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
13.Vuex auxiliary function
resolved:
[. 1] mapState attribute calculation and mapGetters computed to be placed in.
[2] mapMutations with mapActions be placed in the methods.
14.transform property
Analytical: transform property of the application to the element 2D or 3D conversion. This property allows the elements rotate, zoom, shift or tilt. The method of the Transform 2D:
[. 1] Matrix (n-, n-, n-, n-, n-, n-): 2D conversion is defined using six values matrix.
[2] translate (x, y ): 2D conversion is defined along the X and Y-axis moving element.
[3] translateX (n): 2D conversion is defined along the X-axis moving element.
[4] translateY (n): 2D conversion definitions, the mobile element along the Y axis.
[5] scale (x, y ): the definition 2D scale transformation, changing the width and height of the element.
[6] scaleX (n): the definition 2D scale transformation, changing the width of the element.
[7] scaleY (n): the definition 2D scale transformation, changing the height of the element.
[8] rotate (angle): the definition 2D rotated a predetermined angle in the parameters.
[9] skew (x-angle , y-angle): 2D skew transformation is defined along the X and Y axes.
[10] skewX (angle): 2D skew transformation is defined, along the X axis.
[11] skewY (angle): 2D skew transformation is defined, along the Y axis.
In 15.Vue .$mount('#app')manually mount
Analysis: When Vue constructor need to configure a property el, el if there is no attribute may be used .$mount('#app')to mount.
16.HTML DOM body Attribute
parse:
[. 1] the document.body property returns <body>the element
[2] document.documentElement property returns <html>the element
17.FastClick
Analysis: browser on your mobile device will only trigger the click event when the user clicks on the screen about 300 ms delay default, which is to check whether the user is doing double-click. To be able to immediately respond to the user's click event, only FastClick.
18.图片懒加载
解析：Vue module for lazyloading images in your applications. Some of goals of this project worth noting include:
[1]Be lightweight, powerful and easy to use
[2]Work on any image type
[3]Add loading class while image is loading
[4]Supports both of Vue 1.0 and Vue 2.0
19..eslintrc.js
parsing: eslint is used to manage and detect js code style tool that can and editor with the use of non-compliance with the code when the contents of the configuration file will appear an error or warning.
20..babelrc
Analysis: This file is used to set rules and widget transcoded.
21.postcss
resolve: postcss is a conversion plug into JS CSS tools.
22.mock.js
analysis:
[1] can generate random data interception ajax, isolated front and rear ends, the front end of the siege so that the rear end division independently developed.
[2] develop non-invasive, does not need to modify existing code can intercept Ajax request, it returns the response data simulation.
[3] rich data types, support for generating random text, numbers, Boolean, date, email, links, images, colors and so on.
[4] Increase authenticity testing unit, random data, simulate various scenarios.
[5] are easy to use, intuitive interface.
[6] easily extended to support more supports extended data types, support for custom functions and regular.
23.CSS unit conversion plug
resolved: npm install postcss-px-to -viewport --save-dev
24.Retina [A new high-resolution display standard]
Resolution: The so-called Retina display is a standard, is to put more pixels compressed to a screen in order to achieve higher resolution and improve the screen display fine degree. Developed by Motorola. This technique was originally used for the Moto Aura. This resolution is enough to make a normal viewing distance wherein the eye can not distinguish individual pixels. Also referred to as retinal display.
25.iPhone6 Resolution
Resolution: 1334 * 750 pixels.
参考文献：
[1]ftlabs/fastclick：https://github.com/ftlabs/fastclick
[2]hilongjw/vue-lazyload：https://github.com/hilongjw/vue-lazyload
