Vue.js是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
其实还是后端玩的那套,只不过借以用之

  • 下面我们来看下vue的VM层结构

文档结构如下

APP是单页起始的父组件模板 其余子组件全部在 conponents文件夹中

文档引入如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<template>
	<div class="goods-container">
		<goods-top-box></goods-top-box>
		<goods-collocation></goods-collocation>
		<goods-accessories></goods-accessories>
		<goods-around></goods-around>
		<recommend></recommend>
		<hot-product></hot-product>
		<goods-content></goods-content>
		<video></video>
	</div>
</template>
<script>
import GoodsTopBox from './GoodsTopBox'
import GoodsCollocation from './GoodsCollocation'
import GoodsAccessories from './GoodsAccessories'
import GoodsAround from './GoodsAround'
import Recommend from './Recommend'
import HotProduct from './HotProduct'
import GoodsContent from './GoodsContent'
import Video from './Video'vue
export default {
	components: {
		'goods-top-box': GoodsTopBox,
		'goods-collocation': GoodsCollocation,
		'goods-accessories': GoodsAccessories,
		'goods-around': GoodsAround,
		'recommend': Recommend,
		'hot-product': HotProduct,
		'goods-content': GoodsContent,
		'video': Video
	}
}
</script>
<style>
.goods-container {
	width: 100%;
	height: auto;
	background: #f5f5f5;
	padding-bottom: 40px;
}
</style>

我们再看看这个控制台显示

我们用Google扩展工具vue-devtools工具

我们不难发现 一些公共组件都放在common里面 例如slide之类的子组件

可以使用 v-for 指令基于一个数组渲染一个列表。

这个指令使用特殊的语法，形式为 item in items，items 是数据数组，item 是当前数组元素的别名,DOM都由前端渲染生成,后端只需传递数据,无需再
有前端模板和逻辑,后端语言混淆,我们只需要改变VM结构,便不再像传统非MVVM一样去手动修改完逻辑又去修改DOM结构。用来开发移动端更方便管理应用状态，组件解耦，多人组件共享等等(正在摸索,以前用MUI,SUI之类的jqery库主导的UI库)。
下面来看看v-for如何渲染DOM层

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
	<div class="product-container">
		<goods-header :title="title"></goods-header>
		<div class="box-bd">
			<ul class="content-list clearfix">
				<li>
					<template v-for="content in contents">
						<good-content-slide :content="content"></good-content-slide>
					</template>
				</li>
			</ul>
		</div>
	</div>
</template>

数据层json传递数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script>
import GoodsHeader from './common/GoodsHeader'
import GoodsContentSlide from './common/GoodsContentSlide'
export default {
	data () {
		return {
			currPage: 0,
			title: '内容',
			contents: [
				{
					title: '图书',
					type: 'book',
					list: [
						{sourceUrl: 'http://www.duokan.com/book/115222', title: '哈利·波特与魔法石', desc: '哈利波特来了', imgUrl: '//i3.mifile.cn/a4/8e3584b6-3169-41c6-9356-939ec79aac2b', type: 0},
						{sourceUrl: 'http://www.duokan.com/special/7812', title: '特价专区', desc: '精选畅销好书，特价促销，天天更新，天天特价！', price: '限时优惠', imgUrl: '//i3.mifile.cn/a4/T1dlVgBbbT1RXrhCrK.jpg', type: 1},
						{sourceUrl: 'http://www.duokan.com/list/9-1', title: '杂志专区', desc: '纸媒杂志＋互联网杂志，你想看的这都有！', price: '同步新刊上线', imgUrl: '//i3.mifile.cn/a4/T1R3WgBjKT1RXrhCrK.jpg', type: 1},
						{sourceUrl: 'http://www.duokan.com/list/1-1?from=xiaomi', desc1: '海量好书，享受精品阅读时光', desc2: '漂亮的中文排版，千万读者选择！', btnTxt: '前往多看阅读', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-duokan.jpg', type: 2}
					]
				},
				{
					title: 'MIUI主题',
					type: 'theme',
					list: [
						{sourceUrl: 'http://zhuti.xiaomi.com/detail/4ecf4ebb-7cba-4142-96aa-6b8deb2426ef', title: '新世纪福音战士OL', desc: 'EVA手游正版授权，同名主题，高能来袭！', price: '免费', imgUrl: 'http://i3.mifile.cn/a4/7d47dde1-60fb-4ff3-8fa1-364cfc452457', type: 1},
						{sourceUrl: 'http://zhuti.xiaomi.com/detail/d6277519-ca46-420c-ab09-060f6d293f94', title: '世界就在这里', desc: '“青春的世界里，每一刻都要用尽全力欢呼”', price: '免费', imgUrl: 'http://i3.mifile.cn/a4/b2c8ca37-4ba8-4af8-b87e-91847980a278', type: 1},
						{sourceUrl: 'http://zhuti.xiaomi.com/detail/13df18d4-e52c-4a61-82e3-97014f21bd77', title: '不悔剑三', desc: '精品剑网三同人主题 浪漫武侠 共闯天涯', price: '3米币', imgUrl: 'http://i3.mifile.cn/a4/10af68f9-3012-48bb-85b1-ad3b0646dfdb', type: 1},
						{sourceUrl: 'http://zhuti.xiaomi.com/?from=mi', desc1: '众多个性主题、百变锁屏与自由桌面', desc2: '让你的手机与众不同！', btnTxt: '前往MIUI主题市场', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-duokan.jpg', type: 2}
					]
				},
				{
					title: '游戏',
					type: 'game',
					list: [
						{sourceUrl: 'http://ljm.mi.com/?channel=meng_1084_1_android', title: '老九门', desc: '盗墓笔记前传上线', price: '免费', imgUrl: 'http://i3.mifile.cn/a4/6032cb36-587f-4366-89ef-aefed2546552', type: 1},
						{sourceUrl: 'http://game.xiaomi.com/miyou/index.html', title: '米柚手游模拟器', desc: '在电脑上玩遍小米所有手游', price: '免费', imgUrl: '//i3.mifile.cn/a4/T1czW_BXCv1R4cSCrK.png', type: 1},
						{sourceUrl: 'http://game.xiaomi.com/app-appdetail--app_id__581412.html', title: '剑侠情缘', desc: '玩剑侠情缘手游，领666壕礼！！', price: '免费', imgUrl: 'http://i3.mifile.cn/a4/010948ae-bd48-49c6-af12-4ec8c4a0c829', type: 1},
						{sourceUrl: 'http://game.xiaomi.com/index.php?c=index&a=run', desc1: '免费下载海量的手机游戏', desc2: '天天都有现金福利赠送', btnTxt: '前往小米游戏商店', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-game.jpg', type: 2}
					]
				},
				{
					title: '应用',
					type: 'app',
					list: [
						{sourceUrl: 'http://app.mi.com/subject/168797', title: '2015年度应用', desc: '2015年度应用', price: '免费', imgUrl: '//i3.mifile.cn/a4/T1YyJgBCYv1R4cSCrK.png', type: 1},
						{sourceUrl: 'http://app.mi.com/subject/168798', title: '2015年度游戏', desc: '2015年度游戏', price: '免费', imgUrl: '//i3.mifile.cn/a4/T1eaxgB4Ev1R4cSCrK.png', type: 1},
						{sourceUrl: 'http://app.mi.com/subject/167924', title: '小米应用', desc: '小米出品 必属精品', price: '免费', imgUrl: '//i3.mifile.cn/a4/T15VZvB5Kv1R4cSCrK.png', type: 1},
						{sourceUrl: 'http://app.mi.com/?from=mi', desc1: '帮助小米手机和其他安卓手机用户', desc2: '发现好用的安卓应用', btnTxt: '前往小米应用商店', price: '限时优惠', imgUrl: '//s01.mifile.cn/i/index/more-app.jpg', type: 2}
					]
				}]
		}
	},
	components: {
		'goods-header': GoodsHeader,
		'good-content-slide': GoodsContentSlide
	}
}
</script>

这样的前后端分离,效率是不是提高了很多!

本文地址： https://leehave.github.io/2016/09/05/vue构建项目结构解析/