1.jQuery UI框架
解析：jQuery UI包含了许多维持状态的小部件[Widget]，因此，它与典型的jQuery插件使用模式略有不同。所有的jQuery UI小部件[Widget]使用相同的模式，所以，只要学会使用其中一个，就知道如何使用其它的小部件[Widget]。
2.jQuery UI组件构成
解析：解析：jQuery UI主要分为3个部分：交互、微件和效果库。如下所示：
[1]交互[Interactions]：交互部件是一些与鼠标交互相关的内容，包括缩放[Resizable]，拖动[Draggable]，放置[Droppable]，选择[Selectable]，排序[Sortable]等。
[2]小部件[Widgets]：主要是一些界面的扩展，包括折叠面板[Accordion]，自动完成[Autocomplete]，按钮[Button]，日期选择器[Datepicker]，对话框[Dialog]，菜单[Menu]，进度条[Progressbar]，滑块[Slider]，旋转器[Spinner]，标签页[Tabs]，工具提示框[Tooltip]等，新版本的UI将包含更多的微件。
[3]效果库[Effects]：用于提供丰富的动画效果，让动画不再局限于jQuery的animate()方法。包括特效[Effect]，显示[Show]，隐藏[Hide]，切换[Toggle]，添加Class[Add Class]，移除Class[Remove Class]，切换Class[Toggle Class]，转换Class[Switch Class]，颜色动画[Color Animation]等。
3.flex:1
解析：flex属性是flex-grow+flex-shrink+flex-basis的缩写。如下所示：
.item {
flex: 1;
}
或
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
4.inline-flex
解析：行内元素也可以使用Flex布局：
.box{
display: inline-flex;
}
说明：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
5.justify-content[横向对齐]
解析：
[1]flex-start：元素与容器的左端对齐
[2]flex-end：元素与容器的右端对齐
[3]center：元素在容器里横向居中
[4]space-between：元素之间保持相等距离
[5]space-around：元素周围保持相同距离
6.backgroud
解析：可以定义背景的一切内容，包括颜色、图片以及图片位置。
7.display: block
解析：此元素将显示为块级元素，此元素前后会带有换行符。
8.background-position
解析：background-position属性设置背景图像的起始位置。假如值为xpos ypos，那么第一个值是水平位置，第二个值是垂直位置。左上角是0 0。单位是像素[0px 0px]或任何其它的CSS单位。如果仅规定了一个值，另一个值将是50%。可以混合使用%和position值。
9.CSS中的选择器>
解析：A>B表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。
10.v-on指令
解析：可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。
11.js检查dict对象的长度
解析：Object.keys用来获取到dict的键的数组，再通过length获取dict的长度。
const dict = {a: 'aa', b: 'bb', c: 'cc'}
Object.keys(dict).length
12.初始化EventBus
解析：初始化的EventBus是一个全局的事件总线：
Vue.prototype.$EventBus = new Vue()
// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))
// 接收消息
EventBus.$on(channel: string, callback(payload1,…))
13.EventBus.$off()
解析：直接调用EventBus.$off()来移除所有事件频道，不需要添加任何参数。
14.mutations
解析：
[1]mutations唯一的目的是修改state中状态
[2]mutations中的每个方法完成的事情尽可能单一。
15.action
解析：action类似于mutation，不同在于：
[1]action提交的是mutation，而不是直接变更状态。
[2]action可以包含任意异步操作。
[3]this.$store.dispatch推送一个action[异步操作]。
16.mutation
解析：
[1]更改vuex的store中状态的唯一方法是提交mutation。
[2]this.$store.commit推送一个mutation[同步操作]。
17.mapGetters()方法
解析：mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性。如果想将一个getter属性取另一个名字，使用对象形式。
18.vh
解析：
[1]vh就是当前屏幕可见高度的1%
[2]height:100vh == height:100%
[3]当元素没有内容时候，设置height:100%，该元素不会被撑开
[4]当元素没有内容时候，设置height:100vh，该元素会被撑开屏幕高度一致
19.vw
解析：
[1]vw就是当前屏幕宽度的1%
[2]当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置
[3]100vw是相对于屏幕可见宽度来设置
20.height:calc(100% - 40px)
解析：在移动端开发的过程中，常常会遇到头部高度是40px，而内容页是除去头部，占满视窗的整个高度，用css的calc是非常方便的：
.container{
height: calc(100% - 40px);
}
21.CSS left属性
解析：
[1]left属性规定元素的左边缘，该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
[2]如果position属性的值为static，那么设置left属性不会产生任何效果。
22.align-items
解析：align-items属性定义flex子项在flex容器的当前行的侧轴[纵轴]方向上的对齐方式。语法：align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
23.CSS3 border-radius属性
解析：border-radius属性是一个最多可指定四个border-*-radius属性的复合属性。语法：border-radius: 1-4 length|% / 1-4 length|%;如下所示：
[1]length：定义弯道的形状。
[2]%：使用%定义角落的形状。
说明：每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
24.CSS align-self属性
解析：align-self属性定义flex子项单独在侧轴[纵轴]方向上的对齐方式。
[1]align-self语法：align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
[2]align-self属性可重写灵活容器的align-items属性。
25.CSS z-index属性
解析：z-index属性指定一个元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。z-index进行定位元素[position:absolute，position:relative，or position:fixed]。如下所示：
[1]auto：默认。堆叠顺序与父元素相等。
[2]number：设置元素的堆叠顺序。
[3]inherit：规定应该从父元素继承z-index属性的值。
参考文献：
[1]jQuery UI：https://www.jqueryui.org.cn/
[2]jQuery API中文手册：https://jqueryapi.net/
[3]Flex布局语法教程：https://www.runoob.com/w3cnote/flex-grammar.html
[4]CSS background-position属性：https://www.w3school.com.cn/cssref/pr_background-position.asp
[5]CSS参考手册：https://www.runoob.com/cssref/css-reference.html
