caoru828 / vueapp

对vuecli的练习,模拟一个app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vueapp

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

项目 简述 电影部分调用猫眼接口 发送ajax请求用的是axios(作者推荐)跟vue结合的一种方式 输入url地址之后

电影功能: 显示电影界面,一个header一个footer,中间是电影信息,电影信息通过猫眼电影接口获取的信息,每次访问10条信息,下滑到底有加载那个gif图标,再接着显示10条,每一个电影点进去都能查看详情,这些信息也是从猫眼接口获取的

音乐功能: 有各种榜单,飙升榜,新歌榜,但是接口不好使了,就把这些数据写成 .json文件模拟后台,读取数据也得发送ajax请求,接口坏了,点击每个不同榜单返回同一个音乐界面,有6个音乐,每个都可以播放,会有相应歌词,点下边的footer中的music时,header、footer会换颜色

书籍功能: 里边有个轮播图,轮播图可以左滑右滑

图片功能: 有10多张图片,每点击一张小图会显示对应大图,并可以左划右划切换图片,再点击返回小图,header里还有首页,点击可回到首页movie

难点 1. axios发送异步请求 vue结合ajax 安装之后 引入 方法调用 Axios.get('url').then( (res)=>{} ).catch( ()=>{} ); axios要写在mounted里(组件渲染完成之后,操作dom,axios请求都在这里) 每次请求10条,offset后边参数在变化 当前长度拼接到offset后边,从当前长度开始取 "http://m.maoyan.com/movie/list.json?type=hot&limit=10&offset="+this.movieList.length; 直接调用猫眼接口有跨域问题,需要服务器代理 'http://bird.ioliu.cn/v1/?url=' 将猫眼接口拼在后边即可

换字:以及切换header里的title ,slot不传参就是默认值, (slot相当于占位符,穿了以穿的为准, 不传就是默认值) header.vue

默认值
movie.vue Movie

3.换颜色(父组件向子组件传值) 动态传值:传html结构或者代码段用slot,属性用prop传值, 父组件把值传给子组件,传属性的时候自定义属性, (从music往header里传属性颜色) Music.vue header.vue

需要配一下props:['bg']

4.设置音乐组件出现的bug a-player组件上来就显示,但是读取数据时在mounted(加载渲染完成之后)里, 开始组件:music=“songs”还没有呢,所以先v-show=flase, 加载完事儿之后再v-show=true;(还是有错,要用v-if, 开始连插入都不插入,组件也不渲染,数据准备好在渲染,而v-show是插入进去了,)

About

对vuecli的练习,模拟一个app


Languages

Language:Vue 44.7%Language:CSS 41.6%Language:JavaScript 12.8%Language:HTML 0.9%