本文示例代码：查看源码 查看运行
参考书籍：《Vue2 实践揭秘》第四章：页面区块化与组件封装
本文代码从之前文章：vue-router：路由与页面间导航开始
一、文章目的
1、简单了解并学习vue页面区块化与组件的封装；
2、学习了解常用vue插件：
- 轮播图插件：swiper；
- 请求数据插件：vue-resource；
- 请求数据插件：axios、vue-axios；
- 数据模拟插件：mockjs
二、需求梳理
效果图1
效果图2
逻辑分析
- 当前页面是
Home.vue，我们在src/components新建home文件夹存放当前页专用组件；
布局分析
- 热门推荐：
Slider.vue - 快讯：
Announcement.vue - 新书上架：
BookList.vue - 编辑推荐：
BookList.vue - 图书弹层：
Dialog.vue
三、书写代码
- 搭架子
- 在
components下新建home文件夹，并新建四个vue组件； - 在
Home.vue文件中引入组件，并在页面中占位；
搭架子
- 热门推荐
图片轮播实现：Swiper.vue
-
2.1 安装依赖包
安装swiper - 2.2 初始化
Swiper.vue
<template>
<div class="swiper-container" ref="slider">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="http://via.placeholder.com/300x120?text=1" alt=""></div>
<div class="swiper-slide"><img src="http://via.placeholder.com/300x120?text=2" alt=""></div>
<div class="swiper-slide"><img src="http://via.placeholder.com/300x120?text=3" alt=""></div>
</div>
<div class="swiper-pagination" ref="pagination"></div>
</div>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
export default {
props: ['slides'],
mounted () {
this.swiperInit()
},
methods: {
swiperInit () {
// eslint-disable-next-line
new Swiper(this.$refs.slider, {
pagination: {
el: this.$refs.pagination,
clickable: true
},
spaceBetween: 0,
centeredSliders: true,
autoplay: {
delay: 2000
},
autoplayDisabledOninteraction: true,
initialSlide: 0,
loop: true,
speed: 900
})
}
}
}
</script>
- 2.3 父组件
Home.vue传递数据- 修改
Home.vue和Swiper.vue - 注意：通过接口获取数据时，组件引用加
v-if判断，防止数据未加载完页面渲染造成bug
数据传递
- 修改
-
2.4 实现效果
效果
- 快讯实现：
Announcement.vue
快讯 - 新书上架和编辑推荐：
BookList.vue
- 4.1 初始化
BookList.vue
<template>
<div class="book-list">
<div class="header">
<div class="heading">最新更新</div>
<div class="more">更多...</div>
</div>
<div class="book-item">
<div class="book">
<div class="cover"><img src="http://via.placeholder.com/100x150?text=1" alt=""></div>
<div class="title">揭开数据真相：从小白到数据分析达人</div>
<div class="author">Edward Zaccaro, Daniel Zaccaro</div>
</div>
<div class="book">
<div class="cover"><img src="http://via.placeholder.com/100x150?text=1" alt=""></div>
<div class="title">揭开数据真相：从小白到数据分析达人</div>
<div class="author">Edward Zaccaro, Daniel Zaccaro</div>
</div>
</div>
</div>
</template>
<script>
import './BookList.less'
export default {}
</script>
BookList.less
.book-list {
margin: 0 14px;
& > .header {
display: table;
width: 100%;
border-bottom: 1px solid #efefef;
& > .heading {
display: table-cell;
padding: 12px;
}
& > .more {
display: table-cell;
text-align: right;
vertical-align: middle;
font-size: 10px;
color: #cccccc;
padding-right: 14px;
}
}
& .book-items {
display: table;
width: 100%;
padding-top: 12px;
}
& .book {
font-size: 10px;
text-align: center;
float: left;
width: 33%;
height: 207px;
margin: 12px auto;
cursor: pointer;
& .cover {
}
& .title, & .authors {
margin: 5px auto;
width: 100px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
& .authors {
color: #898989;
margin-top: 10px;
text-align: left;
}
}
}
-
4.2 父组件
Home.vue传递数据- 更改
Home.vue和BookList.vue - 作者多个，加
filters过滤器，用,拼接
传递数据
- 更改
-
4.3 实现效果
实现效果
- 弹出层：
Dialog.vue
- 5.1
Dialog.vue组件和Dialog.less
<template>
<div class="dialog-wrapper" :class="{ 'open': is_open }">
<div class="overlay" @click="close"></div>
<div class="dialog">
<!-- 头部及标题 -->
<slot name="header"></slot>
<!-- 内容区域 -->
<slot></slot>
</div>
</div>
</template>
<script>
import './Dialog.less'
export default {
data () {
return {
is_open: false
}
},
methods: {
open () {
this.is_open = true
},
close () {
if (this.is_open) {
this.$emit('dialogClose')
}
this.is_open = false
}
}
}
</script>
.dialog-wrapper {
&.open {
display: block;
}
height: 100%;
display: none;
&>.overlay {
background: rgba(0, 0, 0.3, 0.2);
z-index: 1;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
&>.dialog {
z-index: 10;
background: #fff;
position: fixed;
top: 24px;
right: 24px;
left: 24px;
bottom: 24px;
padding: 24px 14px;
box-shadow: rgba(0, 0, 0, .8);
& heading {
padding: 12px;
}
}
}
- 5.2 修改
BookList.vue，添加点击事件@click="$emit('onBookSelect', book)"
点击事件 - 5.3 修改
Home.vue，响应点击事件-
book-list组件上添加@onBookSelect="preview($event)"响应BookList.vue的点击事件，并触发preview方法打开弹出层； -
Dialog.vue中@click="close"关闭弹层类似逻辑；
Home.vue
-
- 将
data数据改为接口获取
-
6.1 安装
vue-resource
安装vue-resource- 在
main.js中引入，并添加配置
修改main.js - 在
Home.vuecreated中通过vue-resource测试请求
vue-resource
- 在
-
6.2 安装
axios
image.png- 在
main.js中引入
修改main.js - 在
Home.vuecreated中测试请求
测试axios
- 在
- 没有正式的接口，下面通过
mockjs拦截模拟接口请求
- 7.1 安装
mockjs
image.png - 7.2 修改
Home.vuedata
image.png - 7.3 在
src目录下新建api/home.json文件，加入json数据
{
"slides": [
{ "id": 1, "img_url": "1.png" },
{ "id": 2, "img_url": "2.png" },
{ "id": 3, "img_url": "3.png" }
],
"announcement": "今日上架的图书全部8折",
"latestUpdated": [
{
"id": 1,
"title": "揭开数据真相：从小白到数据分析达人",
"authors": [ "Edward Zaccaro", "Daniel Zaccaro" ],
"img_url": "http://via.placeholder.com/100x150?text=1"
},
{
"id": 2,
"title": "Android高级进阶",
"authors": ["顾浩鑫"],
"img_url": "http://via.placeholder.com/100x150?text=2"
},
{
"id": 3,
"title": "淘宝天猫电商运营与数据化选品完全手册",
"authors": ["老夏"],
"img_url": "http://via.placeholder.com/100x150?text=3"
},
{
"id": 4,
"title": "大数据架构详解：从数据获取到深度学习",
"authors": ["朱洁", "罗华霖"],
"img_url": "http://via.placeholder.com/100x150?text=4"
},
{
"id": 5,
"title": "Meteor全栈开发",
"authors": ["杜亦舒"],
"img_url": "http://via.placeholder.com/100x150?text=5"
}
],
"recommended": [
{
"id": 1,
"title": "自己动手做大数据系统",
"authors": ["张粤磊"],
"img_url": "http://via.placeholder.com/100x150?text=1"
},
{
"id": 2,
"title": "智能硬件安全",
"authors": ["刘建皓"],
"img_url": "http://via.placeholder.com/100x150?text=2"
},
{
"id": 3,
"title": "实战数据库营销--大数据时代轻松赚钱之道（第2版）",
"authors": ["罗安林"],
"img_url": "http://via.placeholder.com/100x150?text=3"
},
{
"id": 4,
"title": "大数据思维--从掷骰子到纸牌屋",
"authors": ["马继华"],
"img_url": "http://via.placeholder.com/100x150?text=4"
},
{
"id": 5,
"title": "从零开始学数据营销",
"authors": ["韩布韦"],
"img_url": "http://via.placeholder.com/100x150?text=5"
},
{
"id": 6,
"title": "数据化营销",
"authors": ["龚正", "吴治辉", "王伟", "崔秀龙", "闫建勇"],
"img_url": "http://via.placeholder.com/100x150?text=6"
}
]
}
- 7.4 在src下新建
mock.js，并在main.js中引入
mock.js
import Mock from 'mockjs'
import HomePageData from '@/api/home.json'
let sliderImages = require.context('./assets/sliders', false, /\.(png|jpg|gif|svg)$/)
HomePageData.slides.forEach((slide) => {
slide.img_url = sliderImages('./' + slide.img_url)
})
Mock.mock('/api/home', 'post', HomePageData)
Mock.mock('https://api.coindesk.com/v1/bpi/currentprice.json', 'get', HomePageData)
在main.js中添加mock.js
- 7.5 在
src/assets下新建slides文件夹，并加入三张图片
slides图片 -
7.6 通过mock拦截接口请求，给data数据重新赋值
mock模拟接口 -
7.7 实现效果
效果图
结语：当前示例很简单，入门学习理清思路可以。
