vue制作part2

vue安装jquery
命令cnpm install jquery --save
在mian.js导入jquery
vue制作part2_第1张图片
安装成功package.json
vue制作part2_第2张图片
在这里插入图片描述
进入index.vue
vue制作part2_第3张图片
vue制作part2_第4张图片
进入header.vue
进行props 传parent:objec
在index.vue传值
vue制作part2_第5张图片
进入header.vue
在index.vue写两个界面切换的动画接受header.vue的index

vue制作part2_第6张图片
进入mint-ui.github.io
安装mint-ui
命令cnpm install mint-ui --save
children下新建firstpageinfo.vue 其中id name=firstpageinfo
在index.vue中import firstpageinfo 写标签 components
在children下新建imageslider.vue图片轮播 id name设置
把imageslider导入firstpageinfo import和components
进入imageslider写图片轮播
在imageslider中导入mint-ui
在main.ja引入mint-ui全局css 在node_model里找
在这里插入图片描述
在这里插入图片描述
写入mint-ui样式
vue制作part2_第7张图片
新建public/bannerimage/文件夹存入轮播图片 在imagesliderz中循环遍历图片
在这里插入图片描述
vue制作part2_第8张图片
在firstpageinfo里写入data
vue制作part2_第9张图片
imageslider完整代码
vue制作part2_第10张图片
在children下新建firstpagedata.vue
注册在firestpageinfo中
vue制作part2_第11张图片
进入firstpagedata
在style中加一个背景图
给点击写动画 然后再给nth:child(2)加动画
vue制作part2_第12张图片
在这里插入图片描述
换一种写法 使其最初的默认位置在第一组文字下 添加click方法
在这里插入图片描述
添加一个div 添加i 再在style里写线条样式
在这里插入图片描述
vue制作part2_第13张图片
执行动画方法
vue制作part2_第14张图片
点击字的颜色变化
vue制作part2_第15张图片
方法
vue制作part2_第16张图片
文字下面卡的切换
vue制作part2_第17张图片
vue制作part2_第18张图片
新建movielist.vue
在firstpagedata注册
在movielist中列出电影
新建public/movie存电影海报图
play播放键放在海报中间的样式
vue制作part2_第19张图片
把位置摆好之后绑定数据
在movielist中写入图片data
vue制作part2_第20张图片
vue制作part2_第21张图片
在firstpagedata中写move
vue制作part2_第22张图片
在firstpagedata循环绑定数据
vue制作part2_第23张图片
vue制作part2_第24张图片

你可能感兴趣的:(vue制作part2)