Vue移动项目
2019-03-30 本文已影响263人
樊小勇
Vue移动项目总结
- 一、vue-cli创建项目并配置vue路由
https://www.jianshu.com/p/a4eb7d58b6ba -
二、全局组件Footer(底部)
组件Footer
- 底部高亮(根据点击光标发生改变)
<template>
<div>
<footer v-if="$store.state.showFooter">
<router-link :class="{active: '/movie/list'===$route.path}" @click.native="change('/movie/list')" class="fdc ai-center" to="/movie/list">
<!-- 简单叙述 native 的功能 由于router-link 是vue自带的而不是原生 因此加上的点击事件没有用 但是当加上native的时候就相当于变成了原生 -->
<i class="iconfont icon-dianying f20"></i>
<p class="f10 orangr mg-t-5 pd-b-3">电影</p>
</router-link>
<router-link :class="{active: '/comner'===$route.path}" @click.native="change('/comner')" class="fdc ai-center" to="/comner">
<i class="iconfont icon-yingyuana f20"></i>
<p class="f10 gray mg-t-5 pd-b-3">影院</p>
</router-link>
<router-link :class="{active: '/pintuan'===$route.path}" @click.native="change('/pintuan')" class="fdc ai-center" to="/pintuan">
<i class="iconfont icon-pintuandingdan f20"></i>
<p class="f10 gray mg-t-5 pd-b-3">9.9拼团</p>
</router-link>
<router-link :class="{active: '/my'===$route.path}" @click.native="change('/my')" class="fdc ai-center" to="/my">
<i class="iconfont icon-wode f20"></i>
<p class="f10 gray mg-t-5 pd-b-3">我的</p>
</router-link>
</footer>
</div>
</template>
<script>
/* 需求：点击哪个亮哪个
思路：设置一个样式，根据点击把样式赋给那个标签
:class="{样式名: 判断}" 动态样式 当判断为true时把类赋给标签
在vue标签里面本身就有点击功能的标签里添加点击事件需要在点击事件后面加上native
*/
export default {
data() {
return {
// a:0,
}
},
created() {
// this.isa();
},
methods:{
change(path){
this.$router.replace(path);
// 这种方法可以解决光标错位的bug
},
}
}
</script>
<style lang="less" scoped>
.active{
.iconfont{
color: orange;
}
p{
color: orange;
}
}
</style>
- 这里面的知识点有动态class-vuex-native转变为原生-$route.path获取当前路由路径
1.vuex知识点可以看： https://www.jianshu.com/p/1610131bf096
2.动态class ： https://www.jianshu.com/p/fd30bdac305c
3.native：使用vue的标签的时候有些标签是有自带的事件的，倘若要自定义事件则需 要用到native。 - 三、组件划分
- App为所有vue组件的根，全局组件可以在这个里面引入
- router-view 路由视图 重要，因为路由视图我们才能看到路由组件里的东西，否者就是空白详情请看https://www.jianshu.com/p/89cb6a570eed
- 下面我们以movie页面为例介绍，其他页面大同小异
-
一般父组件就只有一个router-view其他的内容都放在子路由或者小组件里面
组件的分层管理
movie路由视图
1.这个组件里，index属于最大的组件也是在路由里面定义了的，我们称为路由组件，任何children里的为子路由组件，像这个页面我们在index里放了一个router-view，
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
2.然后这个页面显示我们给了子路由list，并且路由里默认显示的也设置为list
{
path:'/movie',
component:() =>import('@/views/movie'),
meta: {
title: '电影',
showFooter: true
},
// redirect 重定向 默认显示的组件,
redirect:'/movie/list',
children:[
{
path: 'list',
meta:{
title:'电影列表',
showFooter:true
},
component: () => import('@/views/movie/children/list'),
},
]
}
3.list里面的内容都是由组件填充的
<template>
<div>
<Lb/>
<mt-navbar class="page-part" v-model="selected">
<mt-tab-item id="1">正在热映</mt-tab-item>
<mt-tab-item id="2">即将上映</mt-tab-item>
</mt-navbar>
<!-- tab-container -->
<mt-tab-container v-model="selected">
<mt-tab-container-item id="1">
<New/>
</mt-tab-container-item>
<mt-tab-container-item id="2">
<Futer/>
</mt-tab-container-item>
</mt-tab-container>
</div>
</template>
<script>
import Lb from './components/Lb'
import New from './components/New'
import Futer from './components/Futer'
export default {
data() {
return {
selected:'1'
}
},
components:{
Lb,
New,
Futer
}
}
</script>
- 这里我们用了ui库 mint-ui 使用方法可以看官网https://mint-ui.github.io/docs/#/zh-cn2
- 然后Lb组件是负责轮播图，ui组件负责正在热映导航部分，而里面的内容我们又分成两个组件来做Futer,New,由视图可见这两个几乎一样只是内容不一样
<template>
<div>
<ul>
<template v-for="item in filmList">
<Item :item="item" :key="item" ></Item>
</template>
<div class="mg-b-70"></div>
</ul>
</div>
</template>
<script>
import Item from './Item'
export default {
data() {
return {
// 正在播放的type为1
type:1,
// 当前页数
pageNum:1,
filmList:[]
}
},
components:{
Item
},
created(){
this.getFilmList();
},
methods:{
async getFilmList(){
const url = '/film/getList';
const res = await this.$http.get(url,{
type:this.type,
pageNum:this.pageNum
})
this.filmList = res.films;
}
}
};
</script>
根据不同的组件获取不同的数据
由于静态是相同的，我又分出一个组件item来装共同部分
<template>
<li>
<div class="bd-t-gray">
<div @click="togoxq" class="list fsb mg-t-20">
<div class="mg-l-15">
<img :src="item.poster" alt>
</div>
<div class="fg1 fsb mg-l-15 h100 fg1">
<div class="lh-26">
<div>
<span class="f14">{{item.name}}</span>
<span class="type mg-l-5 f12">{{up(item.item)}}</span>
</div>
<div>
<span class="f12">观众评分</span>
<span class="mg-l-5 red">{{item.grade}}</span>
</div>
<div class="text ofh w100pc h-26">
<span class="f12">主演</span>
<span class="mg-l-5 f12">{{toString(item.actors)}}</span>
<!-- {{toString(item.actors)}} -->
</div>
<div>
<span class="f12">{{item.nation}}|{{item.runtime}}分钟</span>
</div>
</div>
</div>
<div class="fdcc">
<router-link class="btn" to tag="button">购票</router-link>
</div>
</div>
</div>
</li>
</template>
<script>
export default {
props:['item'],
data(){
return{
}
},
methods:{
// JSON数据单独处理,JSON的parse方法用来把JSON数据转成js数据
// 单独取出JSON里的name
up(item){
const a = JSON.parse(item)
let b = a.name;
return b;
},
// 拼接多个字符串
toString(actors){
const a = JSON.parse(actors);
let str = '';
for(let i=0;i<a.length;i++){
let b = a[i].name + ' '
str += b;
}
return str;
},
togoxq(){
this.$router.push({path:'./xiangqing',query:{filmId:this.item.filmId}})
}
}
}
</script>
- 这里获取数据的方式对比后台界面又发生了改变
这是由于我们对获取后台数据的方法进行了封装
详细可以看https://www.jianshu.com/p/d51a161958e5 - 由于后台数据里有JSON格式的数据详情可以看https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499490767fe5a0e31e17e44b69dcd1196f7ec6fc6000
我们常用的就是把js转为JSON，或把JSON转为js
这里把JSON转为js格式，用到了parse() - 当我们点击movie里的电影时跳转到电影详情页面，电影详情页面我们用子路由组件xiangqing来显示，这个时候涉及到动态传参，可看下面链接https://www.jianshu.com/p/89cb6a570eed
item组件里，我们用点击事件跳转到详情页面并通过$router.push传参
togoxq(){
this.$router.push({path:'./xiangqing',query:{filmId:this.item.filmId}})
}
对应的我们在详情页面接受参数
this.filmId = this.$route.query.filmId;
得到参数然后通过后台接后获取对应的数据然后再渲染页面
四、小总结
- vue项目里，我们需要分析页面的组成然后分组件实现，做到高复用，细用
- 共同部分用组件来做，实现高复用
- 单个复杂的我们提出来用单个组件做，实现细用
五、项目知识点总结
src的组成部分(除main.js、App.vue)
-
assets放我们的less、css、img、font文件
-
components 放全局组件
子路由大部分拥有的情况下使用比如导航栏 -
filter 放过滤器文件
当数据出现需要另外处理的时候，可以把处理函数写到过滤器文件里实现高复用
{{需处理数据 | 过滤函数}} -
router 当路由配置文件
单页应用APS最主要的部分，不可或缺 -
store 放vuex文件
实现跨组件通信，多个组件共用一个数据，并都可以改，比如都需要判断是否登录的时候就可以用到 -
utils 放我们封装的方法
对经常用并且代码繁多的函数方法进行封装，使得使用更简便
