1.jQuery UI frame
parsing: jQuery UI contains many small parts to maintain the state [the Widget], therefore, it is typical to use jQuery plug slightly different patterns. All jQuery UI widgets [the Widget] using the same pattern, so long as the one used to learn to know how to use other widgets [Widget].
2.jQuery UI components constituting
Analysis: Analytical: jQuery UI is divided into three parts: the interaction, and the effect of the widget library. As follows:
[1] interaction [Interactions]: interaction means is some relevant mouse interact with the content, including scaling [the Resizable], drag [the Draggable], placed [Droppable], select [the Selectable], sorting [the Sortable] etc. .
[2] widget [Widgets]: mainly some expansion interface, including a folded panel [the Accordion], automatically [the Autocomplete], button [the Button], date picker [the Datepicker], Dialog [Dialog], menu [Menu ], the progress bar [Progressbar], slider [slider], rotator [Spinner], tab [tabs], a tool tip box [tooltip] and so on, the new version will contain more of UI widgets.
[3] Effects Library [Effects]: to provide a rich animation effects, animation no longer confined to the jQuery animate () method. Including effects [Effect], displays [Show], hidden [Hide], switch [Toggle], added Class [Add Class], remove Class [Remove Class], switching Class [Toggle Class], converting Class [Switch Class], color animation [color animation] and so on.
3.flex: 1
Analytical: flex properties are flex-grow + flex-shrink + flex-basis abbreviation. As follows:
.item {
flex: 1;
}
或
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
4.inline-flex
Analysis: inline Flex layout elements may be used:
.box{
display: inline-flex;
}
Description: After the set Flex layout, sub-element float, clear, and vertical-align attribute will fail.
5.justify-content [laterally aligned]
Analytical:
[. 1] Flex-Start: the container is aligned with the left end element
[2] flex-end: the right end of the container is aligned with the element
[3] center: laterally centered in the container element
[4 ] space-between: the distance between the holding elements is equal to
[5] space-around: the same distance around the holding element
6.backgroud
Analysis: You can define the background of everything, including colors, images, and location.
7.display: block
Resolution: This element will appear as a block-level element, with a line break before and after this element will.
8.background-position
analysis: starting position background-position property of the background image. If the value xpos ypos, then the first value is the horizontal position, vertical position is the second value. The upper left corner is 00. In pixels [0px 0px] or any other CSS units. If you only specify one value, the other value will be 50%. % Can be mixed and position values.
The selector 9.CSS>
Analytical: A> B A represents an element selected all the child elements B. And in that the difference AB, AB to select all descendant elements, and A> B select only generation.
10.v-on instruction
parsing: DOM event can listen to with v-on instruction, and run some JavaScript code that when triggered.
Dict length 11.js inspection object
parsing: Object.keys dict array is used to obtain the key, the length of dict reacquisition by length.
const dict = {a: 'aa', b: 'bb', c: 'cc'}
Object.keys(dict).length
12. Initialization EventBus
Analysis: initialization EventBus is a global event bus:
Vue.prototype.$EventBus = new Vue()
// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 接收消息
EventBus.$on(channel: string, callback(payload1,…))
13.EventBus.$off()
Resolution: a direct call EventBus $ off () to remove all event channels, do not need to add any parameters.
14.mutations
Analytical:
[. 1] mutations sole purpose is to modify the state of the state
[2] mutations in each single possible way to do things.
15.action
analytic: action similar to the mutation, except that:
[1] Action filed a mutation, rather than directly change state.
[2] action may comprise any asynchronous operation.
[3] this. $ Store.dispatch a push action [asynchronous operation].
16.mutation
Analysis:
The only way [1] vuex change in the state store is submitted mutation.
[2] this. $ Store.commit push a mutation [synchronization].
17.mapGetters () method
resolved: mapGetters auxiliary function only in the map store to a local computing getter properties. If you want to take a property getter another name, using the object form.
18.vh
Analytical:
[. 1] VH is the height of the current screen visible%. 1
[2] height: 100vh == height: 100%
[. 3] When the content of the element is not set height: 100%, the support element is not open
[4] when the element has no content, set height: 100vh, the element is highly consistent distraction screen
19.vw
Analytical:
[. 1] VW is the current width of the screen 1%
[2] when set width: 100%, the element width is set to the width of the parent element is set to
[3] 100vw is visible relative to the screen width set up
20.height: calc (100% - 40px
) Analysis: during the movement of the end of development, often encounter head height is 40px, and the content of the page header is removed, occupies the entire height of the window, with the calc css It is very convenient:
.container{
height: calc(100% - 40px);
}
21.CSS left Attribute
parse:
[. 1] left attribute specifies the left edge of the element, the attribute defines the outer margin of the left boundary of targeting elements including the offset between the block and its left boundary.
[2] If the value of the attribute static position, then set the left attribute has no effect.
22.align-items
resolved: align-items flex child attribute defines the current line side shaft flex container [longitudinal] direction alignment. Syntax: align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
23.CSS3 border-radius property
Analytical: border-radius attribute can specify a maximum of four border - * - radius property of the composite properties. Syntax: border-radius: 1-4 length | % / 1-4 length |%; as follows:
[. 1] length: defined curve shape.
[2]%:% using the defined shape of the corner.
Note: the order of the radius of each of the four values are: the top left, top right, bottom right, bottom left. If omitted, bottom left, top right is the same. If you omit the lower right corner, upper left corner is the same. If omitted, the upper right corner, the upper left corner is the same.
24.CSS align-self Attribute
parse: align-self flex attribute defines the side of the shaft individual child [longitudinal] direction alignment.
[1] align-self Syntax: Self-align = left: Auto | Stretch | Center | Flex-Start | End-Flex | Baseline | Initial | the inherit;
[2] Self align = left-rewritable attribute flexible container align-items property.
25.CSS z-index attribute
Analytical: z-index attribute specifies the stacking order of an element. Has a higher stacking order of the elements will always be in front of the lower stacking order of the elements. z-index positioning elements [position: absolute, position: relative , or position: fixed]. As follows:
[. 1] Auto: default. Stacking order is equal to the parent element.
[2] number: Set the stacking order of the elements.
[3] inherit: a predetermined value to be inherited from the parent element z-index attribute.
References:
[1] jQuery the UI: HTTPS: //www.jqueryui.org.cn/
[2] jQuery API Chinese manual: HTTPS: //jqueryapi.net/
[3] Flex layout Grammar: https: // www .runoob.com / w3cnote / Flex-grammar.html
[. 4] the CSS property background-position: HTTPS: //www.w3school.com.cn/cssref/pr_background-position.asp
[. 5] the CSS reference Manual: https: / /www.runoob.com/cssref/css-reference.html
