vue 項目要點總結(jié)（二）

liuhh 發(fā)布于2019-08-22 13:54 / 2042人閱讀

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

靜態(tài)logo圖片怎么引入

對重復(fù)元素的遍歷

 productList:{
    pc:{
            title:"PC產(chǎn)品",
            list:[
              {title:"數(shù)據(jù)統(tǒng)計",url:"#",hot:false},
              {title:"數(shù)據(jù)預(yù)測",url:"#",hot:true},
              {title:"流量分析",url:"#",hot:false},
              {title:"廣告發(fā)布",url:"#",hot:true}
            ]
        }
},


  {{productList.pc.title}}
  
    {{item.title}}
    HOT
  

//在重復(fù)的部分用v-for

如果某個重復(fù)的部分比較分散；可用循環(huán)，循環(huán)是從標簽本身就開始的

{{item.title}}

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

:class 的靈活使用

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

//直接綁定item的屬性



//通過對象的方式配置


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

img src屬性路徑問題

靜態(tài)src可以直接寫成相對路徑

動態(tài)src 推薦使用背景圖代替；

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


board:[
                {
                  "title":"開放產(chǎn)品",
                  "description":"開放產(chǎn)品是一款開放產(chǎn)品",
                  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 數(shù)據(jù)

安裝

cnpm install vue-resource --save

引入

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

使用

created(){ //創(chuàng)建應(yīng)用開始的時候；
  this.$http.get("productList").then(function (data) {
    console.log(data);
  },function (err) {
    console.log(err)
  })
}

本地模擬數(shù)據(jù) express

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

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

http://blog.csdn.net/u0122073...

ajax 數(shù)據(jù)回來后怎么處理

export default {
        data: function () {
            return {
               //json數(shù)據(jù)申請回來之前，模板中其實已經(jīng)用到了數(shù)據(jù)結(jié)構(gòu)，
               //所以，在還沒有數(shù)據(jù)的時候，你就需要先寫出數(shù)據(jù)結(jié)構(gòu)；否則會報錯 typeErr
              productList:{
                    pc:{
                        title:"",  //先定好的數(shù)據(jù)結(jié)構(gòu)；
                        list:[]     //因為數(shù)據(jù)中是重復(fù)的部分，可以不定義
                    },
                    app:{
                      title:"",
                      list:[]
                    }
                },
              news:[],
              board:[]
            }
        },
      created (){
          //通過 => 函數(shù)，延續(xù)this的引入；否者 then() 中的this 并不是指向 實例的this；
          this.$http.get("/api/productList").then((res)=> {
          //模擬回來的數(shù)據(jù)，要看準res的結(jié)構(gòu)；確保讀到數(shù)據(jù)，并復(fù)制給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)
          })
        },
    }

寫一個幻燈片組件

完整的代碼是：

父組件


    //傳入?yún)?shù) ，綁定自定義事件
   


//把資源申請回來

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

幻燈片組件完整代碼

需要注意的地方有幾個

確保ajax 數(shù)據(jù)回來后才做渲染

console 出現(xiàn)這種報錯，但是模板渲染正常，一切正常

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

清楚觸發(fā)定時器的 vue鉤子；

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

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

只用了一次for 循環(huán)；區(qū)別于與 jq幻燈片的寫法

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

看vue代碼，發(fā)現(xiàn)只用了在li 的一次for循環(huán)；全部數(shù)據(jù) 全部依賴于一個變量 imgIndex 讀取;改變imgIndex的值，其它數(shù)據(jù)自動轉(zhuǎn)換；

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

注意for循環(huán)以為，讀取數(shù)據(jù)的寫法





{{slides[imgIndex].title}}

只寫了一個goto 方法實現(xiàn) 點擊切換，左右切換

goto 的功能功能，就是點擊哪個li，切換到哪個數(shù)據(jù)；

利用 vue的計算屬性功能：監(jiān)聽一個值，返回一個處理后的值；監(jiān)聽left 的click 事件；goto到一個 toLeft 的計算值；實現(xiàn)優(yōu)雅的切換；

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

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

切換動畫的實現(xiàn)（有點抽象）

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

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

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

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

然后延遲 500毫秒，讓isShow = true，移入動畫會被執(zhí)行，這時的index已經(jīng)改變?yōu)?goto 參數(shù)的index，意思就是將要跳轉(zhuǎn)到的圖片的index，所以，其實就是讓要顯示的圖片執(zhí)行移入動畫；

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

切換動畫的寫法

動畫的過程有幾個階段：

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

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

//slide-trans 動畫的 進入動作 到 完成進入動作 的 中間過程，所有動畫時間為0.5秒
.slide-trans-enter-active {
  transition: all .5s;
}
// 進入動作初始狀態(tài) 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);
}

云服務(wù)器 GPU云服務(wù)器 vps日常維護中的一些要點總結(jié) 外呼項目總結(jié) 云服務(wù)器搬遷項目總結(jié) 云服務(wù)器搭建vue項目

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

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

發(fā)表評論

登陸后可評論

0條評論

liuhh

男|高級講師

我要關(guān)注我要私信

TA的文章

javascript簡單輪播圖

閱讀 1621·2019-08-29 13:53
細說瀏覽器輸入URL后發(fā)生了什么

閱讀 3222·2019-08-29 13:50
lxml處理xml時的字符編碼問題

閱讀 869·2019-08-27 10:51
svg 線條動畫

閱讀 577·2019-08-26 18:36
「leetcode」78.子集

閱讀 1827·2019-08-26 11:00
Dom詳解

閱讀 620·2019-08-26 10:36
瀏覽器輸入URL到頁面展示相關(guān)知識點圖解

閱讀 3229·2019-08-23 17:58
js編程

閱讀 2039·2019-08-23 15:17

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue 項目要點總結(jié)（二）

相關(guān)文章

記一次前端項目重構(gòu)要點總結(jié)

***vue* 項目開發(fā)要點*總結(jié)***

深入理解js

**納稅服務(wù)系統(tǒng)【總結(jié)】**

方案設(shè)計--如何看待前端框架選型 ?

發(fā)表評論

0條評論

liuhh

男|高級講師

TA的文章

javascript簡單輪播圖

細說瀏覽器輸入URL后發(fā)生了什么

lxml處理xml時的字符編碼問題

svg 線條動畫

「leetcode」78.子集

Dom詳解

瀏覽器輸入URL到頁面展示相關(guān)知識點圖解

js編程

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue 項目要點總結(jié)（二）

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！