成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

接觸的第一個(gè)vue項(xiàng)目

Gemini / 1117人閱讀

摘要：序言剛來(lái)杭州的時(shí)候，是兩個(gè)人一起來(lái)的。后來(lái)一個(gè)回家當(dāng)老師，一個(gè)留在了杭州。想起那時(shí)，在慕課買(mǎi)的第一課程，囫圇吞棗的看完了?，F(xiàn)在回過(guò)頭來(lái)看看，這個(gè)臨時(shí)抱佛腳的啟蒙項(xiàng)目，真的還有不少的收獲。滾動(dòng)視圖的位置緩存路由元對(duì)象。

序言 
剛來(lái)杭州的時(shí)候，是兩個(gè)人一起來(lái)的。后來(lái)一個(gè)回家當(dāng)老師，一個(gè)留在了杭州。想起那時(shí)，在慕課買(mǎi)的第一課程，囫圇吞棗的看完了。勉強(qiáng)才找到了一份工作，今天看起來(lái)，其實(shí)還是有點(diǎn)難過(guò)的。唉，其實(shí)人生不就是這樣嗎？還是要感謝思否還有類(lèi)似掘金這種前端社區(qū)，幫助我解決不少問(wèn)題，直到今天，也算是入門(mén)了。
現(xiàn)在回過(guò)頭來(lái)看看，這個(gè)臨時(shí)抱佛腳的啟蒙項(xiàng)目，真的還有不少的收獲。漏了不少知識(shí)點(diǎn)，現(xiàn)在撿起來(lái)，總結(jié)一下。

滾動(dòng)視圖的位置緩存 

  /*
  *@to,from 路由元對(duì)象。@savedPosition 觸發(fā)H5下的 popstate，go導(dǎo)航 (通過(guò)瀏覽器的 前進(jìn)/后退 按鈕觸發(fā)) 時(shí)才可用。
  */
   scrollBehavior(to, from, savedPosition) {
      return {
        x: 0,
        y: 0
      }
    }

這個(gè)功能只在 HTML5 history 模式下可以使用。

{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

路由導(dǎo)航，可以模擬hash滾動(dòng)到錨點(diǎn)

 if (to.hash) {
    return {
      selector: to.hash
    }
  }

kekeepAlive結(jié)合，返回上次停留的位置（常用）,緩存頁(yè)面數(shù)據(jù)，當(dāng)且兩個(gè)keepAlive以上的頁(yè)面才可以觸發(fā)。

    if (savedPosition) {
            return savedPosition
    } else {
        if (from.meta.keepAlive) {
        　　from.meta.savedPosition = document.body.scrollTop;
        }
        return { x: 0, y: to.meta.savedPosition ||0}
    }

動(dòng)態(tài)路由匹配參數(shù) 

    routes:[
        {
            path: "/detail/:id",
            name: "Detail",
            component: Detail
        }
    ]    
  this.$router.push({name:"Detail",params:{id:id}});

路由模式為history模式，服務(wù)器需要做到對(duì)前端路由的全匹配。 可以參考官網(wǎng)

類(lèi)似項(xiàng)目中的購(gòu)物車(chē)，商品詳情頁(yè)等，可以做到直觀符合邏輯，params可以作為路徑參數(shù)傳遞，前提是做好路由匹配。

mock數(shù)據(jù)與跨域代理

建立mock數(shù)據(jù)，最好建立在public文件之內(nèi)

配置代理，直接指向本地mock文件夾.項(xiàng)目中可以配置后臺(tái)接口或者映射地址，

devServer: {
    proxy: {
      "/api": {
        // 到時(shí)候修改這個(gè)地方
        target: "http://localhost:8080",
        changeOrigin: true,
        // 后臺(tái)接口地址重定向，真實(shí)對(duì)接的時(shí)候下面的替換到路徑，測(cè)試環(huán)境和本地。
        pathRewrite: {
          "^/api": "/mock"
        }
      }
    }
  }

封裝組件

awosome-swiper為例,github上的一個(gè)開(kāi)源swiper組件，公共畫(huà)廊組件的拆分，其實(shí)所用到數(shù)據(jù)是從上述本地mock中得來(lái)的。

通用畫(huà)廊組件
// CommonGallary.vue
// 已在main.js中引用awosome-swiper(use)
   
    
    
過(guò)度動(dòng)畫(huà)通用組件
 // FadeAnimation.vue
 // 已在main.js中引用awosome-swiper(use)
       
     
     
     
     
畫(huà)廊父組件 DetailBanner.uve
    // DetailBanner.vue
    //

到這里的就基本上差不多了。

事件監(jiān)聽(tīng)與吸頂過(guò)渡

Header頭部記錄

之后再接著寫(xiě)吧，有點(diǎn)累了。不知道說(shuō)什么好了，公司開(kāi)的就剩我一個(gè)前端了，可能我也要走了,我可不想這么輕易的滾回家。

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

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

相關(guān)文章

  • 一個(gè)JAVA WEB偽全棧的VUE入坑隨筆，從零點(diǎn)零五學(xué)起

    摘要：開(kāi)始時(shí)間日接觸，先在官網(wǎng)十目一行學(xué)完了基本特性，作為一個(gè)的偽全棧，用感受了一把雙向綁定，感覺(jué)比的要強(qiáng)悍不少，但這開(kāi)發(fā)環(huán)境吧，不能寫(xiě)個(gè)，就總覺(jué)得自己不能零距離接觸。 開(kāi)始時(shí)間：3.26日接觸Vue，先在官網(wǎng)十目一行學(xué)完了基本特性：http://cn.vuejs.org/v2/guide/，作為一個(gè)JAVA WEB的偽全棧，用Myclipse感受了一把雙向綁定，感覺(jué)比JQUERY的JSRE...

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

  • 一年前端造的輪子是什么樣子？

    摘要：起因工作也差不多滿(mǎn)一年了，對(duì)于基本的業(yè)務(wù)開(kāi)發(fā)有了一些自己的想法剛開(kāi)始工作的前個(gè)月，每天都可以接觸到新東西，接觸新業(yè)務(wù)個(gè)月之后業(yè)務(wù)開(kāi)發(fā)熟悉了對(duì)于自己的技術(shù)成長(zhǎng)就感覺(jué)受到了局限如果一直沒(méi)有作出改變，那么等于是個(gè)月的經(jīng)驗(yàn)要用一年我的學(xué)習(xí)方式就是多 起因 工作也差不多滿(mǎn)一年了，對(duì)于基本的業(yè)務(wù)開(kāi)發(fā)有了一些自己的想法 剛開(kāi)始工作的前3個(gè)月，每天都可以接觸到新東西，接觸新業(yè)務(wù) 3個(gè)月之后業(yè)務(wù)開(kāi)發(fā)熟...

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

  • Java 初學(xué)者做的第一個(gè)微信小程序總結(jié)--關(guān)于Java基礎(chǔ)

    摘要：官方資料微信公眾平臺(tái)注冊(cè)小程序。官網(wǎng)開(kāi)發(fā)文檔社區(qū)開(kāi)發(fā)工具部署微信小程序微信小程序本身不需要部署，在微信開(kāi)發(fā)工具中直接上傳代碼就行。 為什么 學(xué)習(xí) Java 三年，目前已經(jīng)工作了2年，因?yàn)樽詫W(xué)，基礎(chǔ)差，所以打算年末總結(jié)一下常見(jiàn)的基礎(chǔ)知識(shí)和面試點(diǎn)； 也可以通過(guò)獨(dú)立做一個(gè)項(xiàng)目整合自己工作期間學(xué)習(xí)的知識(shí)，加深印象。 但是想著回家或是平時(shí)手機(jī)用的多，做一款A(yù)PP和小程序很方便查看。 項(xiàng)目展示 本...

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

  • 學(xué)校 -> 實(shí)習(xí) -> 畢業(yè)，前端——我一直在路上

    摘要：職業(yè)生涯，離開(kāi)校門(mén)自己的第一份工作，每天上下班都騎自行車(chē)，下雨也是，只為省點(diǎn)車(chē)費(fèi)。，屬于外包行業(yè)。雖然互聯(lián)網(wǎng)行業(yè)加班是正常的。至今，面試流程技術(shù)復(fù)試，心中暗喜。但是，我毫無(wú)畏懼。 學(xué)校 -> 實(shí)習(xí) -> 畢業(yè)，前端——我一直在路上 就要畢業(yè)了，從學(xué)校到實(shí)習(xí)直至畢業(yè)，一路走來(lái)，酸甜苦辣，記錄這段時(shí)間的點(diǎn)滴，以后在回味肯定另有一番風(fēng)情！ 感悟 2017/5-2018-7是非常特別的時(shí)光，見(jiàn)...

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

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

0條評(píng)論

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