.item {flex: 1;}
.item {
flex-grow: 1;//规定项目相对于其他灵活的项目进行扩展的量。默认值是 0。
flex-shrink: 1;//与flex-grow相反
flex-basis: 0%;//规定灵活项目的初始宽度。
}
sass stylus less www.oschina.net/question/12…
路由： 有index.js文件时：写法和官网不一样 需要在main.js中
import router from './router' //导入index.js
path: '/goods',
components: require('../components/goods/goods.vue')
//key为components，否则报错：templete or render function is not defined
vue-resource 网络请求模块，用于依赖后端服务器的vuejs项目进行对服务器端数据的请求或跨域请求。
设备像素比window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。 公式表示就是：window.devicePixelRatio = 物理像素 / dips
例如：所有非视网膜屏幕的iphone在垂直的时候，宽度为320物理像素。当你使用的时候，会设置视窗布局宽度（不同于视觉区域宽度，不放大显示情况下，两者大小一致，为320px, 于是，页面很自然地覆盖在屏幕上。这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，因此，window.devicePixelRatio等于1.
移动端1px正确实现：
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
.border-1px
&::after
-webkit-transform: scaleY(0.7)
transform: scaleY(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
.border-1px
&::after
-webkit-transform: scaleY(0.5)
transform: scaleY(0.5)
//根据device-pixel-ratio对纵轴缩放
border-1px($color)
position: relative
&:after
display: block
position: absolute
left: 0
bottom: 0
width: 100%
border-top: 1px solid $color
content: ' '
background-size: contain;
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-size:80px 60px;//如果只给一个值，第二个值为auto
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
元素可拥有负的 z-index 属性值。
Z-index 仅能在定位元素上奏效（例如 position:absolute;）！
图片只限定宽或高一个即可
absolute：相对于 static 定位以外的第一个 父元素 进行定位。
fixed:相对于浏览器窗口进行定位 (弹窗） top: 0; right: 0; bottom: 0; left: 0;
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Moz Firefox */ 内核：Gecko 该抠
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力 非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端， 然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据， 这样客户端就可以随意定制自己的函数来自动处理返回数据了。
encodeURI("http://www.cnblogs.com/season-huang/some other thing");
编码后会变为
"http://www.cnblogs.com/season-huang/some%20other%20thing";
其中，空格被编码成了%20。但是如果你用了encodeURIComponent，那么结果变为
"http%3A%2F%2Fwww.cnblogs.com%2Fseason-huang%2Fsome%20other%20thing" 看到了区别吗，连 "/" 都被编码了，
background-repeat: no-repeat//背景图像将仅显示一次。
position:absolute//生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
vertical-align: top//使兄弟元素与该元素顶端对齐
超出用...显示
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
span为行内元素，设置宽高无效
两个span缝隙去除： 父元素font-size：0 或span标签连在一起
滤镜：filter: blur(10px) //blur产生模糊效果
margin: -64px auto 0 auto; //水平居中
sticky-footer： 如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
import star from '../star/star.vue'
export default {
props: {//props属性：
seller: {
type: Object
}
},
data() {//data是方法（）不是属性
return {
detailShow: false
};
},
methods: {//methods属性： 注意s
showDetail() {
this.detailShow = true;
}
},
created() {//created钩子函数()
},
components:{//components属性：
},
}
线条
border-bottom: 1px solid rgba(255,255,255,0.2);
Vue2.0中tansition动画过渡
<transition name="fade"></.>包裹
只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。 栗子：
background: rgba(7,17,27,0.8)
opacity: 1
&.fade-enter-active,&.fade-leave-active
transition: all 0.5s
&.fade-enter,&.fade-leave-to
opacity: 0
background: rgba(7,17,27,0)
display:table-cell
- 不要与float：left; position:absolute; 一起使用
- 可以实现大小不固定元素的垂直居中
- margin设置无效，响应padding设置
- 对高度和宽度高度敏感
- 不要对display：table-cell使用百分比设置宽度和高度
.icon
display: inline-block
vertical-align: top
&.decrease // :class="classMap[item.type]绑定的类名样式
bg-image('decrease_3')
&.discount
bg-image('discount_3')
&.guarantee
bg-image('guarantee_3')
&.invoice
bg-image('invoice_3')
&.special
bg-image('special_3')
.food-item
display: flex
margin: 18px
padding-bottom: 18px
border-1px(rgba(7,17,27,0.1))
&:last-child
border-none()
margin-bottom: o
@import "../../common/stylus/icon.styl";//多余的引入报错：These relative modules were not found:
@import "../../common/stylus/mixin.styl";
vue中的v-el与v-ref 1.0与2.0的区别 v-el 作用： 通过 v-el 我们可以获取到 DOM 对象。
v-ref 作用： 通过 v-ref 获取到整个组件（component）的对象
2.0索引不能用$index 循环 v-for="(item, index) in items" 使用 :class="{‘current’:currentIndex === index}"
Math.round()把数四舍五入为最接近的整数。 Math.abs()取绝对值 ceil floor
dispaly: inline-block //发现浏览器中此行失效，立马想到拼写错误
box-shadow: h-shadow v-shadow blur spread color
padding: 6px//扩大点击区域面积
line-height: 24px
font-size: 24px//行高和字体就可确定大小
Vue.set( target, key, value )
Vue.set(this.food, 'count', 1);
向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性
transition: all 0.4s linear//css属性name,时间，转速曲线
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
获取窗口的高度与宽度(不包含工具条与滚动条):
var w=window.innerWidth;
var h=window.innerHeight;
访问子组件方法：ref="子组件名" this.$refs.子组件名.子组件方法
方式二：获取DOM
<div class="food-wrapper" ref="foodWrapper"><!--获取DOM-->
let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
注意：$refs 只会在组件渲染完成之后生效
并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
vue2.0里面已经弃用了events 可用此方法代替：www.jianshu.com/p/7f426c2a3…
踩坑：www.jianshu.com/p/256abebd4…
给img占位，避免加载时，src还未拿到值，图片位置被占 width: 100%; height: 0; padding-top: 100% /* 相对于宽度计算，此时宽高相等*/;
使用反引号和${}可以实现变量与字符串拼接
payDesc() {
if (this.totalCount === 0) {
return `￥${this.minPrice}元起送`;
} else if (this.minPrice - this.totalPrice > 0) {
let diff = this.minPrice - this.totalPrice;
return `还差￥${diff}元起送`;
} else {
return '去结算';
}
小球向左滚动动画：
.cart-decrease
display: inline-block
line-height: 20px
font-size: 24px
color: rgb(0, 160, 220)
padding: 6px
transition: all 0.4s linear
&.move-transition
opacity: 1
transform: translate3d(0, 0, 0)
.inner
transition: all 0.4s linear
transform: rotate(0)
&.move-enter, &.move-leave
opacity: 0
transform: translate3d(24px, 0, 0)
.inner
transform: rotate(180deg)
伪类与伪元素的特性及其区别：
伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息； 伪元素本质上是创建了一个有内容的虚拟容器； CSS3中伪类和伪元素的语法不同； 可以同时使用多个伪类，而只能同时使用一个伪元素；
:class="{'current':currentIndex===index}"
&.current
计算属性只有在相关依赖发生改变时才会重新求值，当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用。
transform: translate3d(0,-100%,0);中的-100%，是为了让子元素以自身内容，往上撑开自己的文本内容。
