.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%，是為了讓子元素以自身內容，往上撐開自己的文字內容。