vue梳理（2）

-app.vue作為根元件被挂載到index.html檔案裡，其他的所有元件都是在app.vue元件裡做文章。

• 展示給使用者的就是app.vue裡的内容，你覺得删的沒有内容了但實際還有很多是因為什麼呢？因為router-view标簽，他顯示的是目前路由位址對應的内容（元件），也就是說目前路由對應哪個元件哪個元件顯示在router-view這裡，被使用者看到
• 如果你給我的是2倍圖，那我跟元素字型大小設定為50px，則2倍圖上量取的px直接除以100即可。如果你給我1倍圖那我設定根元素字型大小100px，如果你給我4倍圖那我設定根元素字型大小25px。好處就是量取的px值直接除以100即可轉化為rem機關
• 使用less定義變量

建立一個less檔案裡面定義一個顔色變量$bgColoer="red"
使用時在某個元件style标簽裡通過@import ""引入即可使用該變量了
           

• 輪播圖安裝指定版本

npm install [email protected] --save
參數與swiper3一樣

swiper代表幾個輪播圖，循環這個标簽會多出幾個輪播圖
在swiper-slide上面v-for循環，一個swiper-slide标簽代表一個輪播圖裡的一個面一個圖檔，有幾個swiper-slide就有幾個img輪播
一個圖檔也可以是多個icons，就循環嗎

輪播圖直接這樣寫，在網速不好時會有抖動感。我們需要給他預設的一個占位來解決
  .wrap{
    width:100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 31.25%;
    /*防止輪播圖顯示慢頁面出現抖動，套一個标簽用預設的高度占位。padding-bottom: 31.25%;是根據輪播圖高寬比得來的*/
    background: #eee;
  /*  顯示慢時，顯示預設背景*/
  }
  實作圖檔的寬高比例自适應
  
  改變輪播圖目前圖檔選中時的分頁樣式時不生效，是因為全局的類名不在本元件内。如果想讓他生效用穿透，如下
  .wrap >>> .swiper-pagination-bullet-active{
    background: #fff;
  }
  

輪播圖顯示的圖檔是資料裡最後一張圖檔，是因為swiper的初始化是根據空數組建立的。在swiper标簽商加v-if="list.length"即可，當資料存在時建立swiper
           

• 因為盒子icons就是防抖動自适應做的，寬度100%，padding-bottom: 50%;相當于往下延伸寬度的50%
  • 那裡面的子元素width:25%是占父級寬度的25%，padding-bottom: 25%;相當于往下延伸寬度的25%（隻看自身即可）正好是個正方形
    • 他裡面又有圖檔和文字圖檔可以用定位四個方向三個為0，其中一個距離底部預留出距離。用盒子包起來如果圖檔大可以溢出部分隐藏，水準豎直居中都好做
      • 想讓圖檔距離四個方向點距離我們首先得用box-sizing:border-box将盒子大小固定，再添加padding:0.1rem就不會影響盒子大小了
      • 下面的預留出的内容也要定位
• 當圖示多了可以左右滑動，用輪播圖插件包裹。但是高度有問題

.icons >>> .swiper-slide-active{
    height: 0;
    overflow: hidden;
    padding-bottom: 50%;
  }
           

• 直接循環資料超出8個的小圖示會被隐藏，我們需要借助計算屬性計算出一個數組，數組裡面有迹象我們相當于圖檔的頁面有幾面，第九個在第二個數組，第17個在第三個數組。我們就有三頁小圖示
• 縮進，text-indent。flex:1會自動撐開寬度***
• 加了flex:1後超出寬度的部分沒有出現省略号，我們在設定一個min-width:0即可
• 輪播圖元件雖然不能封裝成一個元件多次使用，但是可以多次使用他的結構形成多個輪播圖也相當于複用了
• 在頁面級元件home頁發送axios擷取資料，然後把資料分發給下面的元件
• 在沒有後端支援的情況下如何實作資料的模拟呢？在static檔案夾下建立mock檔案夾，裡面建立一個json檔案存資料
  • 因為整個工程裡隻有static目錄下的内容，可以被外部通路到。例如在位址欄通路localhost:8080/static/mock/index.json即可通路到而我們的資料。其他的檔案都通路不了
  • 忽略檔案中添加這句話static/mock，即可忽略該檔案的上傳
• config下面的index.js檔案

proxyTable: {
  "/api":{
    target:"http://localhost:8080",
    pathRewrite:{"^/api":"/static/mock"}
  }
},
//當我們去請求api這個目錄的時候希望他幫我們轉發到依然是這台伺服器的8080端口上，隻不過路徑做個替換
//一旦你請求的位址是以api開頭的，那麼我就把他替換成請求/static/mock
           

• 輪播圖顯示的圖檔是資料裡最後一張圖檔，是因為swiper的初始化是根據空數組建立的。在swiper标簽商加v-if="list.length"即可，當資料存在時建立swiper
• 當你點選城市切換時比對到的"/city"路由對應的頁面會替換之前app.vue頁面router-view顯示的元件，顯示的規律是在最近的router-view顯示
• 元素浮動給父級元素設定溢出隐藏
• 這個時候你可以上下滾動，是因為你沒有設定溢出隐藏，多出的部分會撐出去就可以滾動。這時候我們需要給内容區域最大的盒子定位四個方向都設定為0他會占滿整個螢幕區域，如果想預留出部分區域呢比如高度預留出50px，則top:50px即可，overflow:hidden或auto，如果是溢出隐藏則多出的部分看不到隻會顯示頁面區域一點内容。為了讓它能夠拖動顯示所有内容需要使用better-scroll插件

首先要符合使用better-scroll的結構布局，外面有一層(wrap)裡面有一層(content)在裡面是每個li
第一步，安裝插件，引入插件，
第二步，給最外層的wrap盒子增加ref屬性為了能在mounted鈎子裡面拿到該函數
第三步，建立鈎子函數，在裡面建立滾動的執行個體并把該執行個體挂載到元件上，執行個體接收最外層的ref那個元素
    this.scroll = new BScroll(this.$refs.xxx)
           

• 右邊的字母用元件，定位到右側，右邊為0，上邊留出頭的距離，下邊0，left不管即可，給個寬度就定位好了
• 希望點選右側的字母滾動區域自動滾動到對應的字母區中
  • 給右側元件綁定點選事件(在循環的li上綁定點選事件就給每個li綁定點選事件了)，點選右側元件的某個字母時可以在方法裡接收到該字母(通過事件源來接收，e.target.innerhtml)
  • 然後把該字母傳遞給能滾動的list元件，兄弟元件傳值通過父元件中轉即可，list元件拿到傳遞過來的資料後，通過watch函數監聽傳遞過來的這個資料的變化，隻要資料變化就會執行該函數，在該函數路面我們要做一件事
  • 插件提供給我們一個方法this.scroll.scrollToElement(this.$refs[this.list][0])可以讓滾動區域自動滾到某個區域上，參數是兄弟元件傳遞過來的某個元素，給list元件裡的一個盒子動态綁定ref屬性，屬性值是key(key就是26個字母)。
  • 加入傳遞過來的是s元素，将s元素放到方法裡。該元素對應的list元件裡的某個元素，就可以跳到對應元素上面了
  • 如果ref寫在循環的元素拿到的是數組，寫在普通元素上拿到的是元素
• 數組循環和對象循環有點差別，數組循環
  • (item,index) in ary “item是索引”
  • (item,key) in obj “key是目前項的屬性名”
• 在右側字母表元件上做上下拖拽的時候list也會跟着跳動到對應字母
• 希望搜尋名字或拼音的時候能把搜尋的結果顯示在下面。在搜尋元件下面加HTML結構，定位在頭和搜尋元件的下面在最上層全屏顯示，覆寫住熱門城市，目前城市等部分。也是一出部分影藏且用滑動插件
• 讓input的搜尋詞與資料做雙向綁定，目的是讓我們容易拿到input的值。并watch監聽input裡的資料
  • 這裡需要做節流，因為隻要input值發生變化就執行該函數太耗費性能，用一個定時器将将邏輯包裹起來，100毫秒執行
• 讓該元件拿到所有的資料，當監聽到input值有變化時100毫秒值後在所有資料中找到與input值有關系的内容，放到一個數組裡，讓該數組循環展示到頁面上即使我們查找的資料
• 如果input值為空，直接讓數組為空return掉
• 當輸入的值沒有比對資料時，提示沒有資訊資料
• 顯示搜尋内容部分是否顯示取決于input有沒有值，如果一直顯示就把熱門城市，目前城市遮住了。是以呢搜尋時讓它顯示，不搜尋就不讓這部分顯示。
• 點選城市，首頁的城市會跟着改變。需要将城市選擇頁面的城市資料傳遞給首頁，但是兩個元件沒有共同的父級就不能靠父級來中轉，這時候想要他們能通信隻能用vuex來解決
• 多個元件之間需要傳值很困難時，如果我們能把這些資料放到一個公共的存儲空間去，某一個元件改變了空間裡的資料其他的元件就能感覺到

vuex

• 安裝，單獨建立vuex的檔案引入，use，導出。然後再main.js裡引入-注冊到根元件上
• 想要使用vuex的資料隻要在需要資料的元件内通過this.$store.state.city即可拿到資料，所有元件内都可以拿到vuex的資料。想要修改呢，需要在元件内通過dispatch調用action裡的方法，action在調用mutations或者直接通過commit直接調用mutations裡的方法改變state的資料都可以
  • 這樣的話重新整理記不住城市，我們在擷取state時預設從localstorage裡擷取城市沒有在使用預設的，城市改變了将資料重新存儲到localstorage裡這樣即使重新整理也能記住是哪個城市了。
• 文字長短影響，min-width而不是width
• 每一次切換元件的時候，元件都會被重新渲染鈎子函數都會走發送多次axios。我們想要路由被加載過一次之後就被緩存起來，以後再展示這個元件時用的是緩存
• 當切換城市時重新發送請求擷取對應城市的資料，當用keep-alive時元件裡面會多出一組生命周期函數activated當頁面重新被顯示時執行。我們可以判斷之前是哪個城市，現在是哪個城市。如果有變化重新發送axios請求，沒有切換城市就不管。mounted函數裡儲存一下之前是哪個城市，當頁面重制被顯示時判斷城市是否有變化在決定是否發送請求
• 畫廊元件，定位在外層且全屏覆寫。實際上是和詳情頁一起展示的，隻不過畫廊定位浮起來占了全屏
• 想讓輪播圖的分頁器在輪播圖下面顯示通過調節定位bottom，但是輪播圖自帶的溢出隐藏部分會讓你看不到分液器。設定為overflow:inherit
• 預設畫廊是隐藏的v-if，點選時讓其綁定的值變為真顯示畫廊
• 畫廊輪播圖滾動有問題，由隐藏到顯示會導緻swiper計算寬度出問題，導緻輪播圖無法正常滾動
  • 需要配置兩個選項observer:true;observeParents:true,解決swiper寬度計算的問題
  • 點選畫廊是改變資料隐藏，通過觸發父級的自定義方法
• 頁面足夠長才能夠滾動，添加一個元素設定高度
• 漸隐漸現效果，定義一個資料預設是true，放滑動超過距離時變為false。v-if通過綁定布爾值決定頭部元件的顯示與否document.documentElement.scrollTop擷取滾動條的垂直偏移距離
• 因為用了keep-alive元件，隻要顯示元件都會執行activated函數，給全局window添加scroll事件
• 元素可以動态綁定樣式:希望在某個區間内透明度由0變為1，假設我希望scrollTop越大透明度越接近1，當達到200時透明度為1，在大透明度還是1
• 給全局的window綁定滑動時間，不管在哪個元件都會觸發該事件。是以需要搭配deactivated來使用，該鈎子函數當元件即将被替換或隐藏時觸發該事件，在這裡解綁全局的滾動事件即可。當你在加載該元件又會綁定上。。。
• 與routes同級添加一項scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } }
  • 讓頁面切換的時候始終回到頁面的頂部
• 一個是自己通過axios設定axios.default.baseurl=""一個是在proxyTable裡面做伺服器代理，一樣的效果

轉載于:https://www.cnblogs.com/zlsqd/p/11335518.html