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

資訊專欄INFORMATION COLUMN

vue 項目要點總結（二）

liuhh / 2032人閱讀

摘要：靜態圖片怎么引入對重復元素的遍歷產品數據統計數據預測流量分析廣告發布在重復的部分用如果某個重復的部分比較分散可用循環，循環是從標簽本身就開始的既是的載體，也是與同一個標簽的靈活使用遍歷的時候可以接受幾種賦值方式直接綁定的屬性

靜態logo圖片怎么引入

對重復元素的遍歷 
 productList:{
    pc:{
            title:"PC產品",
            list:[
              {title:"數據統計",url:"#",hot:false},
              {title:"數據預測",url:"#",hot:true},
              {title:"流量分析",url:"#",hot:false},
              {title:"廣告發布",url:"#",hot:true}
            ]
        }
},



  
{{productList.pc.title}}

  

    {{item.title}}
    HOT
  



//在重復的部分用v-for

如果某個重復的部分比較分散；可用 循環，循環是從標簽本身就開始的

  • {{item.title}}
    • 

//li 既是 v-for 的載體， 也是item ；:title="item.title" 與v-for 同一個標簽;
    :class 的靈活使用

    遍歷的時候 class 可以接受 幾種賦值方式；

    //直接綁定item的屬性

  • 


//通過對象的方式配置

  • 

//class 是 一個數組；第一項通過對象配置，第二項，利用item.id 拼成特有的字符串類

  •
    • img src屬性 路徑問題

    靜態src可以直接寫成相對路徑

    

    動態src 推薦使用背景圖代替；
    

    

    

    如果動態src 要寫成模板變量，要通過require 函數請求；這樣webpack才能打包出正確的路徑
    

    
board:[
                {
                  "title":"開放產品",
                  "description":"開放產品是一款開放產品",
                  url:"#",
                  icon:require("../assets/icon/1.png"),
                  class:"mr15 mb15"
                }
    ]

icon:require("../assets/icon/1.png") //webpack 可以打包的路徑

    

    如果要通過ajax請求mock的的img 目前只找到此方法，把img 放在 static 文件下；寫json的時候用絕對路徑
    

    slides=[{
  "src":"/static/slideShow/pic4.jpg",  //static 文件 與index.html 同級
  "title":"勇攀高峰",
  "href":"#"
}]


 

    
使用 vue-resource ajax 數據

    安裝
    

    cnpm install vue-resource --save
    

    引入
    

    import resource from "vue-resource"
Vue.use(resource)
    

    使用
    

    created(){ //創建應用開始的時候；
  this.$http.get("productList").then(function (data) {
    console.log(data);
  },function (err) {
    console.log(err)
  })
}
    
本地模擬數據 express

    早期的vue-lic下面有dev-server.js和dev-client.js兩文件，請求本地數據在dev-server.js里配置，在vue 2.0 中 最新的vue-webpack-template 中已經去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替
    

    具體的配置代碼參考這個文章
    

    http://blog.csdn.net/u0122073...
    
ajax 數據回來后怎么處理

    export default {
        data: function () {
            return {
               //json數據申請回來之前，模板中其實已經用到了數據結構，
               //所以，在還沒有數據的時候，你就需要先寫出數據結構；否則會報錯 typeErr
              productList:{
                    pc:{
                        title:"",  //先定好的數據結構；
                        list:[]     //因為數據中是重復的部分，可以不定義
                    },
                    app:{
                      title:"",
                      list:[]
                    }
                },
              news:[],
              board:[]
            }
        },
      created (){
          //通過 => 函數，延續this的引入；否者 then() 中的this 并不是指向 實例的this；
          this.$http.get("/api/productList").then((res)=> {
          //模擬回來的數據，要看準res的結構；確保讀到數據，并復制給this.data；
            this.productList = res.data.data;      
          },(err)=> {
            console.log(err)
          })
          this.$http.get("/api/news").then( (res)=> {
            this.news = res.data.data;
          }, (err) => {
            console.log(err)
          })
          this.$http.get("/api/board").then((res)=> {
            this.board = res.data.data;
          },(err)=> {
            console.log(err)
          })
        },
    }
    
寫一個幻燈片組件

    完整的代碼是：
    

    父組件
    

    
    //傳入參數 ，綁定自定義事件
   

    

//把資源申請回來

 methods:{
        slideChange(index){
            console.log(index)
        }
      },
 created (){
    this.$http.get("/api/slides").then((res)=> {
        this.slides = res.data.data;
      },(err)=> {
        console.log(err)
      })
}
    

    幻燈片組件完整代碼
    

    




    

    需要注意的地方有幾個
    

    確保ajax 數據回來后才做渲染
    

    console 出現這種報錯，但是模板渲染正常，一切正常
    

    

    原因就是，ajax 請求的數據還沒回到，模板已經開始渲染，所以讀不到這個href屬性；
    處理辦法 是加個判斷；等數據存在后，再去讀值
    

    

    清楚觸發定時器的 vue鉤子；
    

    //鼠標進入時
@mouseover="stopEvnet" 

//鼠標出去時
@mouseout="runEvent"
    

    只用了一次for 循環；區別于與 jq幻燈片的寫法
    

    jq的幻燈片 可能我們習慣把 所有圖片都先遍歷出來，然后 寫js 讓img-box 滾動；
    

    看vue代碼，發現只用了在li 的一次for循環；全部數據 全部依賴于一個變量 imgIndex 讀取;改變imgIndex的值，其它數據自動轉換；
    

    這是利用了vue的雙向綁定機制；只需要更換 index 就會自動 讀取出對應的src，達到換圖片的目的；
    

    注意for循環以為，讀取數據的寫法
    

    




    {{slides[imgIndex].title}}
    

    只寫了一個goto 方法實現 點擊切換，左右切換
    

    goto 的功能功能，就是點擊哪個li，切換到哪個數據；
    

    利用 vue的 計算屬性功能：監聽一個值，返回一個處理后的值； 監聽left 的click 事件；goto到一個 toLeft 的計算值； 實現優雅的切換；
    

    因為 計算屬性toRight 可以當做一個數值來使用；所以，計時器切換的時候，模擬點擊 right 可以寫成
    

    this.timeEv = setInterval(()=> {
  this.goto(this.toRight) //    this.toRight 得到當前img的下一個數據的index
},this.time);
    

    切換動畫的實現（有點抽象）
    

    讓兩個相同的圖片互斥顯示；
    

    slide-trans 負責進入的動畫；    slide-trans-old 負責移出的動畫
    

     
    
  
  
    
  
    

    初始化的時候，讓 isShow = false；就是說，讓負責移出的動畫的img 先渲染；
    

    goto 的時候，先讓 isShow = false 移出動畫會被執行，這時的index是當前的圖片index；意思是，讓當前顯示的img執行 移出動畫
    

    然后延遲 500毫秒，讓isShow = true，移入動畫會被執行，這時的index已經改變為 goto 參數的index，意思就是將要跳轉到的圖片的index，所以，其實就是讓 要顯示的圖片 執行移入動畫；
    

    goto (index) {
    this.isShow = false
    setTimeout(() => {
      this.isShow = true
      this.imgIndex = index
    }, 500)
  },
    

    切換動畫的寫法
    

    動畫的過程有幾個階段：
    

    v-enter（進入動作初始狀態），
    v-enter-active（進入動作到完成進入動作的中間過程）
    v-enter-to（進入動作結束的狀態）
    v-leave（離開動作初始狀態），
    v-leave-active（離開動作到完成離開動作的中間過程）
    v-leave-to（離開動作結束的狀態）
    

    參考：https://vuefe.cn/v2/guide/tra...
    

    //slide-trans 動畫的 進入動作 到 完成進入動作 的 中間過程，所有動畫時間為0.5秒
.slide-trans-enter-active {
  transition: all .5s;
}
// 進入動作初始狀態 translateX(730px)
.slide-trans-enter {
  transform: translateX(730px);
}

//slide-trans-old動畫 離開動作 到 完成離開動作 的中間過程，所有動畫時間為0.5秒，
// transform: translateX(-730px)為什么寫在這里？待了解
.slide-trans-old-leave-active {
  transition: all .5s;
  transform: translateX(-730px);
}
    

    直觀上 enter動畫 和 leave 動畫是一個相反的過程，所以也可以寫成；效果一樣；
    

    .slide-trans-old-leave-active {
  transition: all .5s;
}
.slide-trans-old-leave-to{
  transform: translateX(-730px);
}
               
               
                                           
                       
                 
    
            
                     
             
               
    
                   
     文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
    
                 
                   
    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92603.html
    
               
    
                      
               
              
    
              
    
                
    相關文章
    
                
      
                             
                                                                                                    
    • 
                                                
      
                          
      記一次前端項目重構要點總結
      
                                                     
      摘要：重構總共耗時個工作日。第一個重構原因就是沒有引入靜態類型，導致查看一個對象結構需要翻來覆去在多個文件中查找。第三是各個狀態模塊耦合度高，加大了代碼維護難度。但如果耦合度過高，往往是因為模塊沒有細分到位。這個項目也不列外。

showImg(https://segmentfault.com/img/remote/1460000019660483);
不知不覺已是2019年的7月，恍惚之間已...
      
                                                   
                          
      
                                
      
                                    frolc
                                    
                                    評論0 
                                    收藏0 
                                
      
                          
      
                      
      
                    
      •  
                                                                                       
    • 
                                                
      
                          
      vue 項目開發要點總結
      
                                                     
      摘要：提交是更改狀態的唯一方法，并且這個過程是同步的。對于大型應用，我們會希望把相關代碼分割到模塊中。

vue-cli 腳手架工具的使用
vue-cli 的依賴showImg(https://segmentfault.com/img/bV13r9?w=679&h=316);
vue-cli 的使用流程showImg(https://segmentfault.com/img/bV13sh?w=...
      
                                                   
                          
      
                                
      
                                    Drummor
                                    
                                    評論0 
                                    收藏0 
                                
      
                          
      
                      
      
                    
      •  
                                                                                       
    • 
                                                
      
                          
      深入理解js
      
                                                     
      摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。

延遲加載 (Lazyload) 三種實現方式
延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。
詳解 Javascript十大常用設計模式
力薦~ ...
      
                                                   
                          
      
                                
      
                                    caikeal
                                    
                                    評論0 
                                    收藏0 
                                
      
                          
      
                      
      
                    
      •  
                                                                                       
    • 
                                                
      
                          
      納稅服務系統【總結】
      
                                                     
      摘要：要是使用到日歷的話，我們想到使用這個日歷類上面僅僅是我個人總結的要點，如果有錯誤的地方還請大家給我指正。

納稅服務系統總結
納稅服務系統是我第一個做得比較大的項目(不同于javaWeb小項目),該項目系統來源于傳智Java32期，十天的視頻課程(想要視頻的同學關注我的公眾號就可以直接獲取了)
我跟著練習一步一步完成需求，才發覺原來Java是這樣用來做網站的，Java有那么多的類庫，頁面...
      
                                                   
                          
      
                                
      
                                    ispring
                                    
                                    評論0 
                                    收藏0 
                                
      
                          
      
                      
      
                    
      •  
                                                                                       
    • 
                                                
      
                          
      方案設計--如何看待前端框架選型 ?
      
                                                     
      摘要：純前端開發主要是針對靜態頁面。自主權最大，正常是使用進行輔助開發，上線等。大致原因使用是為了和端的保持同步。四總結對于比較正式的項目，前端技術選型策略一定是產品收益最大化，用戶在首位。

對于前端團隊，可以實現企業受益最大化要點。
一、技術選型的策略
1、保證產品質量
（1）功能穩健：網頁不白屏，不錯位，不卡死；操作正常；數據精準。
（2）體驗優秀：加載體驗，交互體驗，視覺體驗，無障礙訪...
      
                                                   
                          
      
                                
      
                                    gnehc
                                    
                                    評論0 
                                    收藏0 
                                
      
                          
      
                      
      
                    
      •  
                                                                           
                
    
              
    
              
               
    
                  
                  
    發表評論
    
                   
               
    
              
    
                
    
                  
    0條評論
       
                
     
                      
    
              
    
           
    
           
    
              
     
                
    
                    
                    
    liuhh
    
                    
    男|高級講師
    
                    
                    
    
                          
    TA的文章
    
                          閱讀更多
                    
    
                      
                
    

                   
              
  
    
                  
    最新活動
     
           
                             
              

    


    
                                
                  
    
           
    
        
    
      
     
    
    
    
     
    
      
    
    
    
    
    
    
       
       
    
         
    閱讀需要支付1元查看
      
         
         
       
    
      
  
    
    













<