原创 rem使用配置
rem的使用會轉化爲一個如何讓根元素的font-size動態變化問題? /*dpi*/ /* for 1080+ px width screen */ /* for 1080 px width screen */ /* for 800 px
2019-11-07 10:45:51
原创 meta中的viewport
viewport的配置 viewport表示用來設置用戶在手機上的可視區域 width=device-width 表示viewport的寬度爲設備的寬度 initial-scale=1.0 表示手機的默認縮放比例爲1:1 maxim
2019-11-02 10:35:48
原创 前端經典佈局：Sticky footer 佈局-----flex佈局方式
html代碼：<body> <div class="content"></div> <div class="footer"></div> </body> body { display: flex; flex-flow: column;
2019-11-02 09:05:20
原创 css超出一行不折行，而是顯示省略號
通過使用text-overflow和white-space屬性來使文本在一行內顯示，超出則加省略號； 必要條件有： 必須給元素超出隱藏（overflow:hidden;） 強制在同一行顯示（white-space: nowrap;），不折
2019-11-01 15:25:24
1
原创 移動端項目中 @2x 圖 和 @3x 圖 的使用
移動端開發過程中，因爲手機的dpr(設備像素比不同)，我們需要根據dpr來修改圖標的大小: 如果設備像素大於等於2，則用2倍圖 在stylus中定義一個方法： bg-image($url) /\* 如果設備像素大於等於2，則用2
2019-11-01 14:35:45
原创 Vue中生命週期的理解
代碼及結果截圖 HTML <div id="app"> <p>{{ message }}</p> <h1>{{message + '這是在outer HTML中的'}}</h1> </div> js var app = n
2019-11-01 08:35:23
原创 Vue中vue-cli3腳手架
vue-cli3創建vue項目 vue create vue-seller----vue-cli3 vue init webpack vue-seller----vue-cli2 創建後，最好選擇手動： 你要集成什麼就選就行了（注：
2019-10-29 11:45:21
原创 Vue項目中使用better-scroll需要注意的點
HTML結構方面 <!--父元素--> <div class="seller" ref="seller"> <!--需要出現滾動條的內容區--> <div class="content"></div>
2019-10-26 11:05:25
原创 Vue中this.$nextTick 的作用
Vue實現響應式後DOM的變化 data對象中數據改變是如何追蹤的? vue將遍歷data對象中所有的屬性，並通過 Object.defineProperty 把這些屬性全部轉爲 getter/setter；但是我們是沒有辦法看到 gett
2019-10-17 09:55:28
6
原创 vue.js加入購物車小球動畫
實現加入購物車小球動畫的思路 在購物車組件Cart.vue中，添加小球代碼 <template> <div class="shop-cart"> <div class="content"> <div class="shop-le
2019-09-17 10:25:08
原创 vue.js購物車添加商品組件
現實向購物車添加商品組件 代碼<template> <div class="cartcontrol"> <!--商品減一區域--> <div class="reduce" v-show="food.count>0">
2019-09-17 09:55:13
原创 Vue項目中使用better-scroll實現菜單映射功能
組件全部代碼 <template> <div class="goods"> <!--左側區域--> <div class="menu-wrapper" ref="left"> <ul class="menu">
2019-09-10 13:55:03