卖座项目需要注意的点

axios请求卖座电影的数据报错"{“status”:-1,“msg”:“api not available”}"
为了防止恶意访问，加上字段就可以正常访问了https://blog.csdn.net/Hello_world_XXL/article/details/115572702

vue递归组件的使用

 <detailHeader v-top :title="filmInfo.name"></detailHeader>

父传子，子接受值props
detail.vue组件(父组件)

<detail-swiper :numt="2" :cname="'photo'"><div class="swiper-slide" v-for="(photo,index) in filmInfo.photos" :key="index">剧照图</div></detail-swiper>

detailSwiper.vue(子组件)

export default {props:["numt","cname"],mounted(){new Swiper('.' + this.cname, {// 设置slider容器能够同时显示的slides数量slidesPerView: this.numt,});}
}

当你用null作为判断的条件,会默认返回false,这是js的一个隐藏功能

使用过滤器过滤时间戳
premiereAt: 1659052800

 <p>{{filmInfo.premiereAt | dataFilter}} 上映</p>Vue.filter("dataFilter",(premiereAt) => {console.log(premiereAt);return moment(premiereAt).format("YYYY-MM-DD")
})

全局定义

//Vue.filter()方法接收2个参数
//第一个参数是全局过滤器的"名字"
//第二个参数是全局过滤器的"处理函数"Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){过滤器的功能return 过滤的结果
})//同样上面的过滤第一个字母大写
<p>message的值为 {{message | capi }}</p>//str接收的就是管道符前面准备处理的值Vue.filter('capi',(str)=>{return str.chartAt(0).toUpperCase() + str.slice(1) + "~~~~"
})

局部定义（filters）

语法：new Vue({data:{},// 在data平级写filtersfilters:{过滤器名字:函数(要过滤的原数据,参数){过滤器的功能return 过滤的结果      } }
})

控制展开和收起，箭头图标.阿里巴巴引入字体图标

<!-- isShow为true显示所有内容，为false只显示一部分 --><div :class="isShow ? ‘   ’ : 'synopsis'  ">{{filmInfo.synopsis}}</div>箭头图标是向上还是向下<div style="text-align:center;"><i @click="isShow=!isShow" class="iconfont" :class="isShow ? 'icon-shang' : 'icon-xiangxia'"></i></div>data(){return {isShow:false}},<style lang="scss" scoped>.synopsis{height: 50px;overflow: hidden;}
</style>

插槽
https://www.jianshu.com/p/84d82f7884f9

什么是Swiper

Swiper（swiper master）是一个第三方的库，可以用来实现移动端、pc端的滑动操作，十分方便（官方文档Swiper中文网-轮播图幻灯片js插件,H5页面前端开发）。

vue中的三个缩写指令
v-on，监听指令，缩写：@，比如@click=“do”

v-bind用于绑定属性和数据 ,其缩写为“ : ” 也就是v-bind:id === :id
v-model用在表单控件上的,用于实现双向数据绑定

v-slot，插槽指令，缩写：#

vant
轻提示Toast
图片预览效果
list懒加载

<h3>剧照</h3><detail-swiper :num="2" :cname="'photo'"><div class="swiper-slide" v-for="(photo,index) in filmInfo.photos" :key="index"><div :style="{backgroundImage:'url('+photo+')'}" style="height:100px;background-size:cover;background-position:center;"@click="handlePreview(index)"></div></div></detail-swiper>// 引入
import { ImagePreview } from "vant"methods:{handlePreview(index){console.log(index,'ahhahahhahahha');ImagePreview({images: this.filmInfo.photos,startPosition: index,//指定从index位置开始显示closeable: true,//显示关闭按钮closeIconPosition: "top-left",//关闭按钮显示在顶部左边// loop: false //禁止循环切换})}},

better-scroll 是什么

卖座项目需要注意的点相关推荐

对于卖座项目（vue项目）的思考
1.localhost:8080本地服务器呈现的页面,是渲染App.vue根组件的结果: 根组件里的东西可以渲染到每一个页面,这里的每一个页面指的是localhost:8080本地服务器下的不同路由: ...
2021-11-27 vue移动端卖座电影项目(二) 封装选项卡,引入iconfont,nowPlaying获取数据后写样式
文章目录 1.封装选项卡 2.设置iconfont 3.nowPlaying获取数据后写样式 3.1.获取后台数据 3.2.从data对象获取电影海报,标题,评分 3.3.过滤data.actor,获 ...
2022-11-17 vue移动端卖座电影项目(一) 获取后台数据
0.目标网页卖座电影 1.获取url数据位置:网络>复制>复制链接地址 2.获取电影列表数据字段获取:网络>标头>请求标头> 3.代码 views/nowPlayi ...
python爬虫实习生面试经验分享【卖座网】
十六号那天,我在宿舍睡到11:44分,收到HR电话商量面试时间,因为是被电话吵醒的,没考虑就说了当天下午15:00.说完挂了电话,我马上意识到犯了个很严重的错误,我应该说明天下午三点的,当天下午就去面 ...
回锅肉飘香，《Pokémon GO》再度成为最卖座的iPhone游戏
<Pokémon GO>居然重获美国最受欢迎iPhone游戏的榜首! 在上个月,席卷全球的增强现实游戏<Pokémon GO>从最受欢迎的游戏降到美国最卖座的iPhone游戏第 ...
VUE+MintUI的索引列表实现“卖座网”同款城市列表
卖座网:https://m.maizuo.com/v5/#/city(F12拿城市列表JSON) MintUI索引列表:https://elemefe.github.io/mint-ui/#/inde ...
模仿卖座网的App maizuo
maizuo 详细介绍 maizuo是使用vue/vuex/redux开发,模仿卖座网的一个手机应用. 演示效果
vue + elementui +sass+axios做卖座网的后台管理系统
卖座后台管理系统后台管理系统无非就是操作数据实现数据的增删改查 css样式的话我用elementUI+sass 拿的模板是花裤衩大哥的模板源码在这里这是效果所需要的知识熟悉vue的父子传 ...
火箭队新赛季十大最卖座电影前瞻！
火箭队新赛季十大最卖座电影前瞻! NBA2005-06赛季即将来临,随着鼎盛一时的湖人豪华军团解体,湖人三连冠期间那种惟我独尊的时代不再存在.随着西部多支球队实力有所补充,东部热火由于得到奥尼尔变得越 ...

卖座项目需要注意的点

卖座项目需要注意的点相关推荐

最新文章

热门文章