国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用vue開(kāi)發(fā)pc前端及后臺(tái)的項(xiàng)目總結(jié)(陸續(xù)更新)

Baoyuan / 444人閱讀

摘要：所以只有寫(xiě)完整，才是正確的。具體可查看這里愿你成為終身學(xué)習(xí)者

1.讓img標(biāo)簽適應(yīng)比例縮放

項(xiàng)目中做圖片預(yù)覽，如下圖，效果要隨著屏幕的大小來(lái)做自適應(yīng)比例縮放，一開(kāi)始用background-size:cover來(lái)做是可行的，但這里有包括上傳圖片的操作，而上傳圖片的文件流是blob流，用background-url blob流是顯示不出來(lái)的，所以這里需要用img標(biāo)簽，但標(biāo)簽我們通過(guò)指定寬度圖片容易變形，所以在想 css3 有沒(méi)有提供像background-size這樣的功能，果然查了一下，查到了 object-fit，只要設(shè)置值為 cover 就行啦，具體可查看鑫大神寫(xiě)的文章 https://www.zhangxinxu.com/wo...

2.讓img 加載好后在執(zhí)行其它操作

項(xiàng)目中圖片的展示要獲取圖片真實(shí)的寬度，然后通過(guò)等比縮放在通過(guò)阿里oss圖片進(jìn)行裁剪，這時(shí)我們有一組圖片，需要全部獲取到寬高才能展示并且處理，不然會(huì)報(bào)找不到圖片的寬高錯(cuò)誤，這時(shí)我們會(huì)選擇promise ，但是多帶帶用一個(gè) promise是滿足不了需求的（是指我的能力），所以可以通過(guò) promisee.all 來(lái)實(shí)現(xiàn)，具體流程就是 每次new img 時(shí)候生成對(duì)應(yīng)的一個(gè) promise, 最后可能通過(guò) promise.all來(lái)判斷是否所有的 promise都執(zhí)行完成，最后返回 promise.all,以下是我具體的代碼：

具體用法可以參考: https://www.jianshu.com/p/7e6...

3. npm build 根據(jù)傳入?yún)?shù)來(lái)指定編譯正式環(huán)境還是測(cè)試環(huán)境

我們一般開(kāi)發(fā)中都有正式跟測(cè)試環(huán)境的，但是正式跟測(cè)試的API是不太一樣的，vue 2.x以上在 config文件下有提供兩個(gè)文件dev.evn.js和prod.ven.js分別是打包和運(yùn)行的全局變量，可以通過(guò)設(shè)置里面的變量來(lái)達(dá)到我們想要的值。但對(duì)于我做的項(xiàng)目來(lái)說(shuō)，因?yàn)槲掖虬鰜?lái)一個(gè)要放在測(cè)試的服務(wù)器，一個(gè)是正式的，因?yàn)檎降撵o態(tài)資源要入在阿里的服務(wù)器，這樣我每次打包都是通過(guò)手動(dòng)配置還實(shí)現(xiàn)，這樣顯然很麻煩，所以我在buid的時(shí)候分別傳入test 或者 prod 表示測(cè)試和正式的意思，然后可以在config下的index里面獲取然后判斷，代碼如下：

config/index.js

package.json

4.vue項(xiàng)目--favicon設(shè)置以及動(dòng)態(tài)修改favicon

再index.html中添加：(我這邊是靜態(tài)資源都是入在阿里下的，所以直接指定到那個(gè)地址)

設(shè)置 favicon的更多設(shè)置可查看 http://www.cnblogs.com/chinab...

5. router.beforeEach 返回頂部，提升用戶體驗(yàn)

一個(gè)頁(yè)面較長(zhǎng)，滾動(dòng)到某個(gè)位置，再跳轉(zhuǎn)到另外一個(gè)頁(yè)面，滾動(dòng)務(wù)默認(rèn)是在上一個(gè)頁(yè)面停留的位置，而好的體驗(yàn)肯定是能返回頂部，通過(guò)鉤子 afterEach 就可以實(shí)現(xiàn)：

router.afterEach((to, from, next) => {

window.scrollTo(0, 0);

})

6. router 模擬“滾動(dòng)到錨點(diǎn)”的行為

有時(shí)我們需要在路由上指定個(gè)錨點(diǎn)，當(dāng)頁(yè)面指定到這個(gè)地址時(shí)會(huì)自動(dòng)滾動(dòng)到這個(gè)錨點(diǎn)，vue-router 為我們提供了一個(gè) scrollBehavior 的鉤子，具體用法如下：

// xx.vue
跳到指定錨點(diǎn)




// router/index.js

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

具體可參考這里

7. transition 過(guò)濾的兩種模式

transition 有一個(gè) mode 屬性，文檔好像沒(méi)找到，這里簡(jiǎn)要說(shuō)明一下：

in-out:新元素先進(jìn)行過(guò)濾，完成之后當(dāng)前過(guò)渡離開(kāi)

out-in:當(dāng)前元素先進(jìn)行過(guò)渡，完成之后新元素過(guò)渡進(jìn)入

具體例子:
8.所有 Vue.js 的模板都是合法的 HTML。

vue官網(wǎng)說(shuō)模板都是合法的 HTML，這個(gè)是什么意思呢，就是自定義組件沒(méi)有自閉合的功能，因?yàn)樽蚤]合的功能是 xml 語(yǔ)法，這個(gè)經(jīng)常很出現(xiàn)奇怪的現(xiàn)象如下：

// xxx.vue

上中 g-input 是自定義一個(gè)input,我們采用自閉合的方法，結(jié)果運(yùn)行頁(yè)面是看不到 button 這個(gè)標(biāo)簽的，因?yàn)?Vue.js 的模板都是合法的 HTML。所以只有寫(xiě)完整，才是正確的。

具體可查看 這里

愿你成為終身學(xué)習(xí)者

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/96955.html

相關(guān)文章

  • 前端負(fù)責(zé)人不得不考慮的前端技術(shù)選型及構(gòu)架（一）

    摘要：不光發(fā)展方向多，同一個(gè)方向的技術(shù)選型也同樣多，比如的。那么問(wèn)題來(lái)了，在項(xiàng)目中，我們到底應(yīng)該如何展開(kāi)我們的技術(shù)選型呢，我就結(jié)合我的經(jīng)歷講一講。但是最終還是選擇的包比較大，不利于前端快速加載，相比于那一套的出活率高。 現(xiàn)在前端，都往大前端方向發(fā)展，pc, wapApp, 小程序，混合開(kāi)發(fā)，桌面開(kāi)發(fā)，node 后臺(tái)。不光發(fā)展方向多，同一個(gè)方向的技術(shù)選型也同樣多，比如wapApp的 vue,r...

    geekzhou 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    sutaking 評(píng)論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請(qǐng)點(diǎn)擊集前端最近很火的框架資源定時(shí)更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥(niǎo)雀呼晴，侵曉窺檐語(yǔ)。葉上初陽(yáng)乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門(mén)，久作長(zhǎng)安旅。五月漁郎相憶否。小楫輕舟，夢(mèng)入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請(qǐng)::點(diǎn)擊::集web前端最近很火的vue2框架資源；定時(shí)更新，歡迎 Star 一下。 蘇...

    khs1994 評(píng)論0 收藏0

  • 前端最實(shí)用書(shū)簽(持續(xù)更新)

    摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂所以將前端主流技術(shù)做了一個(gè)書(shū)簽整理不求最多最全但求最實(shí)用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來(lái)有點(diǎn)混亂; 所以將前端主流技術(shù)做了一個(gè)書(shū)簽整理,不求最多最全,但求最實(shí)用。 書(shū)簽源碼 書(shū)簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<