Vue听课笔记（Vue2~Vue3）-4

一、rem与组件

1.1、rem

1. hash路由==> location.hash切换
   window.onhashchange 监听路径的切换
2. history路由==>history.pushState切换
   window.onpopstate 监听路径的切换

//fontsize计算
document.documentElement.style.fontsize=document.documentElement.
clientwidth/750 * 16 +'px'

1.2、swiper组件

新版大而全的方案

// import Swiper bundle with all modules installed
import Swiper from 'swiper/bundle';
// init Swiper:
const swiper = new Swiper(.…);

1.3、选项卡封装

各种控制样式，各种引入导入，各种静态资源

1. 创建一个components目录,并在目录下创建对应的组件.vue文件
2. 把对应的标签页面内容放进对应的组件.vue中,不要忘了加上script和style内容
3. 在index.vue文件中通过import…form…引入对应的组件
4. 在标签页中放组件即<el-tab-pane label="User" name="first"> <组件名> </el-tab-pane>

1.4、电影导航组件

<template>
<div>
<router-link to="/films/nowplaying" custom v-slot="{ navigate,
isActive }">
<li @click="navigate" :class="isActive ? 'kerwinactive':''">
正在热映
</li>
</router-link>
krouter-link to="/films/comingsoon" custom v-slot="{ navigate,
isActive }">
<li @click="navigate" :class="isActive ? 'kerwinactive':'">
即将上映
</li>
</router-link>
</div>
<template>

1.5、正在热映获取数据

mounted (){
axios({
url:'https://m.maizuo.com/gateway?cityId=440100&pageNum=1&
pageSize=10&type=1&k=5196770',
headers:E
'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4",
"e":"1606697250632532718583809","bc":"440100"}',
'X-Host':'mall.film-ticket.film.list'
}
}).then(res =>{
console.log(res.data)
}）

二、axios与渲染

2.1、axios封装

mounted () {
	http({
		url:
			'/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&
			k=5196770',
		headers:
			'X-Host':'mall.film-ticket.film.list'
		}).then((res)=>{
			console.log(res.data.data.films)
			this.datalist = res.data.data.films
	}）
}，

2.2、详情渲染

不建议用空数组，会报错
建议通过null

<template>
<div v-if="filmInfo">
{{filmInfo.name}}
{{filInfo.filmType.name}}
</div>
</template>


export default {
data () {
return {
filmInfo:nul1
}，

动态样式

<div :style="{
backgroundImage:'url('+filmInfo.poster+')
]"></div>



<style lang="scss" scoped>
·poster{
width: 100%;I
height: 11.666667rem;

给其绑定一个ishidden的点击事件，点击后，ishidden取反

2.3、详情轮播

new Swiper('.kerwin',{
	slidesPerView: 3,
	spaceBetween: 30,
	freeMode: true
}	

<detail-swiper-item v-for="(data, index) in filmInfo.actors" :key="index">
<divI :style="{ backgroundImage: 'url('+data.avatarAddress}"')'，class="avatar">

2.4、详情Header-组件

通过window.onscroll，if判断，大于一定距离显示详情，
最后记得小于一定距离的时候要清空

Vue.directive('scroll', {
inserted (el) E
// console.log(el)
el.style.display = 'none'

window.onscroll =()=>{
if ((document.documentElement.scrollTop || document.body.
scrollTop) > 50){
el.style.display = 'block'
} else {
el.style.display = 'none'
}
}）

要记得销毁声明周期:unbind

//销毁执行的
unbind(){
window.onscroll= null
}
}）

2.5、影院组件渲染

<div>
	<ul>
		<li v-for="data in cinemaList" :key="data.cinemaId">
			<div class="left">
				<div class="cinema_name">{{ data.name }}</div>
				<div class="cinema_text">{{ data.address }}</div>
			</div>
			<div class="right cinema_name">
				<div style="color:red">￥{{data.lowPrice/100 }}起</div>
			</div>
		</li>
	</ul>
</div>