vue 項(xiàng)目要點(diǎn)總結(jié)（二）

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

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

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

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

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


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

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

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

{{item.title}}

//li 既是 v-for 的載體， 也是item ；:title="item.title" 與v-for 同一個(gè)標(biāo)簽;

:class 的靈活使用

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

//直接綁定item的屬性



//通過對(duì)象的方式配置


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

img src屬性路徑問題

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

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

如果動(dòng)態(tài)src 要寫成模板變量，要通過require 函數(shù)請(qǐng)求；這樣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請(qǐng)求mock的的img 目前只找到此方法，把img 放在 static 文件下；寫json的時(shí)候用絕對(duì)路徑

slides=[{
  "src":"/static/slideShow/pic4.jpg",  //static 文件 與index.html 同級(jí)
  "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)用開始的時(shí)候；
  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兩文件，請(qǐng)求本地?cái)?shù)據(jù)在dev-server.js里配置，在vue 2.0 中最新的vue-webpack-template 中已經(jīng)去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替

具體的配置代碼參考這個(gè)文章

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

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

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

寫一個(gè)幻燈片組件

完整的代碼是：

父組件


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


//把資源申請(qǐng)回來

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

幻燈片組件完整代碼

需要注意的地方有幾個(gè)

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

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

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

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

//鼠標(biāo)進(jìn)入時(shí)
@mouseover="stopEvnet" 

//鼠標(biāo)出去時(shí)
@mouseout="runEvent"

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

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

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

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

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





{{slides[imgIndex].title}}

只寫了一個(gè)goto 方法實(shí)現(xiàn) 點(diǎn)擊切換，左右切換

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

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

因?yàn)?計(jì)算屬性toRight 可以當(dāng)做一個(gè)數(shù)值來使用；所以，計(jì)時(shí)器切換的時(shí)候，模擬點(diǎn)擊 right 可以寫成

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

切換動(dòng)畫的實(shí)現(xiàn)（有點(diǎn)抽象）

讓兩個(gè)相同的圖片互斥顯示；

slide-trans 負(fù)責(zé)進(jìn)入的動(dòng)畫； slide-trans-old 負(fù)責(zé)移出的動(dòng)畫

初始化的時(shí)候，讓 isShow = false；就是說，讓負(fù)責(zé)移出的動(dòng)畫的img 先渲染；

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

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

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

切換動(dòng)畫的寫法

動(dòng)畫的過程有幾個(gè)階段：

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

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

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

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

直觀上 enter動(dòng)畫和 leave 動(dòng)畫是一個(gè)相反的過程，所以也可以寫成；效果一樣；

.slide-trans-old-leave-active {
  transition: all .5s;
}
.slide-trans-old-leave-to{
  transform: translateX(-730px);
}

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

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

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

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

登陸后可評(píng)論

0條評(píng)論

liuhh

男|高級(jí)講師

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

TA的文章

javascript簡(jiǎn)單輪播圖

閱讀 1685·2019-08-29 13:53
細(xì)說瀏覽器輸入U(xiǎn)RL后發(fā)生了什么

閱讀 3275·2019-08-29 13:50
lxml處理xml時(shí)的字符編碼問題

閱讀 922·2019-08-27 10:51
svg 線條動(dòng)畫

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

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

閱讀 682·2019-08-26 10:36
瀏覽器輸入U(xiǎn)RL到頁面展示相關(guān)知識(shí)點(diǎn)圖解

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

vue 項(xiàng)目要點(diǎn)總結(jié)（二）

相關(guān)文章

記一次前端項(xiàng)目重構(gòu)要點(diǎn)總結(jié)

***vue* 項(xiàng)目開發(fā)*要點(diǎn)總結(jié)***

深入理解js

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

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

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

0條評(píng)論

liuhh

男|高級(jí)講師

TA的文章

javascript簡(jiǎn)單輪播圖

細(xì)說瀏覽器輸入U(xiǎn)RL后發(fā)生了什么

lxml處理xml時(shí)的字符編碼問題

svg 線條動(dòng)畫

「leetcode」78.子集

Dom詳解

瀏覽器輸入U(xiǎn)RL到頁面展示相關(guān)知識(shí)點(diǎn)圖解

js編程

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

vue 項(xiàng)目要點(diǎn)總結(jié)（二）

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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