Vue.js學習記錄-9-Vue去哪兒網專案實戰:首頁開發-Home + Header + Swiper
-
Home:首頁根元件,用於管理子元件以及資料請求
-
<template>:子元件管理
-
引入所有子元件,並進行屬性繫結(父元件向子元件傳遞資料的方式)
<template> <div> <home-header :city="city"></home-header> <home-swiper :list="swiperList"></home-swiper> <home-icons :list="iconList"></home-icons> <home-recommend :list="recommendList"></home-recommend> <home-weekend :list="weekendList"></home-weekend> </div> </template>
-
-
<script>:資料請求
-
引入子元件
import HomeHeader from './components/Header' import HomeSwiper from './components/Swiper' import HomeIcons from './components/Icons' import HomeRecommend from './components/Recommend' import HomeWeekend from './components/Weekend'
-
子元件宣告
components: { HomeHeader, HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend },
-
引入axios庫
// 引入axios庫 import axios from 'axios'
-
關於axios:axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特徵:
從瀏覽器中建立 XMLHttpRequest 從 node.js 發出 http 請求 支援 Promise API 攔截請求和響應 轉換請求和響應資料 取消請求 自動轉換JSON資料 客戶端支援防止 CSRF/XSRF
-
安裝axios
npm install axios
-
ajax資料請求及成功回撥函式
-
資料接收列表初始化:對應<template>中繫結的屬性名稱
data() { return { city: '', swiperList: [], iconList: [], recommendList: [], weekendList: [] } },
-
在生命週期鉤子函式mounted中進行資料請求
// 藉助生命週期函式進行ajax請求 mounted() { this.getHomeInfo() }
-
ajax請求以及成功回撥
// 傳送ajax請求 getHomeInfo() { axios.get('/api/index.json').then(this.getHomeInfoSucc) }, // ajax成功回撥 getHomeInfoSucc(res) { res = res.data // ret 表徵請求是否成功True or False,只有請求成功並且資料域不為空進行資料列表賦值 if (res.ret && res.data) { // 獲取成功回撥物件的data列表 const data = res.data this.city = data.city this.swiperList = data.swiperList this.iconList = data.iconList this.recommendList = data.recommendList this.weekendList = data.weekendList } }
-
TIPS:關於ajax請求路徑的定義,專案中採用的訪問靜態json檔案(static/mock)的方式,實際環境中可能請求路徑可能是類似/api/xx的請求路徑,在專案中可以進行專案路徑的路由配置。
座標:./config/index.js // Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { // 代理工具中資料請求的設定,將所有的/api請求轉發至當前專案static/mock路徑下 '/api': { target: 'http://localhost:8080', pathRewrite: { // 此處可以配置請求路徑的路由 '^/api': '/static/mock' } } },
-
-
首頁截圖
-
-
-
Header
-
iconfont:圖示向量庫引入
建立目錄:src/assets/styles/iconfont 以上新建目錄儲存在http://www.iconfont.cn/選定圖示的字型檔案 在目錄:src/assets/styles 引入iconfont.css檔案
開啟iconfont.css檔案,修改圖示字型檔案的配置地址後即可使用:
在入口檔案 main.js 新增iconfont.css 的引入:
// 引入iconfont 圖表向量庫
import 'styles/iconfont.css'
使用的時候我們採用圖示對應的編碼即可直接引用圖示icon:
-
Stylus:Stylus 是一種新型語言,可以建立健壯的、動態的、富有表現力的CSS。是一個CSS的預處理框架。Stylus預設使用 .styl 的作為副檔名,支援多樣性的CSS語法。
安裝Stylus:
npm install stylus stylus-loader --save-dev
使用Stylus:
-
在.vue檔案中style塊中使用:在style標籤上新增lang="stylus"即可,新增scoped可以時當前樣式元件獨立性。
<style scoped lang="stylus"> img width: 60px; height: 60px; display: inline-block; border-radius: 30px; </style>
-
外部引用.styl檔案
座標:src/assets/styles/ **建立varibles.styl外部檔案,並填入一下內容:$bgColor = #00bcd4**
在<style>標籤中引用外部檔案中的樣式變數,如下圖所示:
-
-
<template>
-
<script>:子元件採用props接收父元件的傳值,在這裡進行了傳遞引數型別的判斷。
<script> export default { name: 'HomeHeader', props: { city: String } </script>
-
Swiper:輪播圖區域,該區域引用了vue-awesome-swiper外掛,並對接收資料進行分組輪播展示。
-
vue-awesome-swiper:基於Vue改寫的Swiper外掛,用於在vue專案中的輪播效果實現。
這裡需要說明一點,專案中使用的是2.6.7版本,由於當前最新的Swiper4會有些許問題,這裡選取了穩定版本。
以下引用參考自:https://github.com/surmon-china/vue-awesome-swiper
關於vue-awesome-swiper的使用以及API介紹可以參考:https://segmentfault.com/a/1190000014609379
安裝vue-awesome-swiper外掛:
npm install [email protected] --save
入口檔案main.js引入vue-awesome-swiper外掛:
// 1. 引入vue-awesome-swiper import VueAwesomeSwiper from 'vue-awesome-swiper' // 2. vue-awesome-swiper所依賴的CSS樣式 import 'swiper/dist/css/swiper.css' // 3. 全域性使用vue-awesome-swiper Vue.use(VueAwesomeSwiper)
vue-awesome-swiper的使用:例子參考官方SPA
<swiper :options="swiperOption" ref="mySwiper" @someSwiperEvent="callback"> <!-- slides --> <swiper-slide>I'm Slide 1</swiper-slide> <swiper-slide>I'm Slide 2</swiper-slide> <swiper-slide>I'm Slide 3</swiper-slide> <swiper-slide>I'm Slide 4</swiper-slide> <swiper-slide>I'm Slide 5</swiper-slide> <swiper-slide>I'm Slide 6</swiper-slide> <swiper-slide>I'm Slide 7</swiper-slide> <!-- Optional controls --> <div class="swiper-pagination" slot="pagination"></div> //頁碼 <div class="swiper-button-prev" slot="button-prev"></div> //下一項 <div class="swiper-button-next" slot="button-next"></div> //上一項 <div class="swiper-scrollbar" slot="scrollbar"></div> //滾動條 </swiper>
-
<template>
-
<script>:通過props接收父元件資料列表,data中配置了swiperOption的屬性,開啟了輪播圖座標以及迴圈輪播,通過計算屬性showSwiper控制輪播元件的資料渲染。
<script> export default { name: 'HomeSwiper', props: { list: Array }, data() { return { swiperOption: { // 開啟輪播圖座標展示 pagination: '.swiper-pagination', // 開啟迴圈輪播 loop: true } } }, computed: { showSwiper() { // 通過資料列表的長度判斷是否存在資料 return this.list.length } } } </script>