选球员案例
所有球员海报显示在前台页面，选中球员，就显示具体是谁被选中的案例
知识点
html
css
vue
前期准备
创建vue项目
1、node与npm环境的配置
2、vue脚手架的安装
vue项目初始化
1、APP.vue根组件的初始化，router-view标签的占位五行加各个样式的总和
2、删除不需要的页面组件
3、删除不需要的路由配置，配置已有的路由配置，
4、删除components中的不需要的小组件
5、删除assets中的不需要的文件，清空，创建三个文件夹
一个是css，一个是img，一个是js这三个文件夹，
具体步骤
一、组件页面创建
1、在views文件夹内创建Players.vue文件夹
1-1创建Nav导航栏标签
2、在Players.vue页面组件的script标签内导入Nav导航栏标签
import Nav from "@/components/Nav";
3、在export default中写components，在其中注册，
components:{
Nav,
},
4、在页面标签的div内使用导航栏Nav标签
<Nav/>
二、路由配置
1、在src文件夹的index.js文件内导入页面组件Players
import Players from '@/views/Players'
2、在const routes中配置路由
{
path: '/players',
name: 'Players',
component: Players
},
三、导航栏小组件Nav创建
1、创建class为nav的属性的div标签
2、在div标签内用router-link配置跳转各个页面组件的路由
<ul>
<li>
<router-link to="/players">球员页</router-link>
</li>
</ul>
3、导航栏小组件的组件样式设计
.nav{
height:80px;
background-color:cyan;
}
ul > li {
float:left;
padding:30px 20px 0;
}
ul:after{
display:block;
content:'';
clear:both;
}
ul{
height:80px;
list-style: none;
margin:0;
padding:0;
}
四、组件好报信息导入
assert中新建img文件夹，在其中放球员海报，
各个海报信息需要重命名，具体的信息，用英文字符表示，
五、img资源路径导入到页面组件中
在页面组件的script标签内，export default上面写代码
let players_list = [
{
img:require('@/assets/img/Curry.jpg'),
title:'库里',
},
{
img:require('@/assets/img/James.jpg'),
title:'詹姆斯',
},
{
img:require('@/assets/img/Jordan.jpg'),
title:'乔丹',
},
{
img:require('@/a
ssets/img/Kobe.jpg'),
title:'科比',
},
{
img:require('@/assets/img/Kobe.jpg'),
title:'科比',
},
]
列表后面的资源等等写进去。
六、数据初始化，在export default里面传
用data(){}这样方式存放，
data(){
return {
players_list,
}
},
七、子组件的创建
1、创建子组件PlayerBox组件，创建位置在components里面
八、Players导入PlayerBox子组件
1、导入子组件、注册子组件，
import PlayerBox from "@/components/PlayerBox";
components:{
PlayerBox,
},
2、使用子组件
<PlayersBox v-for="player in players_list" :player="player" @receiveData="reFn"/>
3、遍历出来球员信息，用变量把父组件中球员的信息传递到子组件中，
<PlayerBox v-for="player in players_list" :plyer="player">
4、在子组件的script中写逻辑代码，用反射的实例方法，拿到自定义属性的变量对象（变量对象的属性在父组件中定义）
props:['player'],
5、用属性变量来接收在父标签中自定义的属性的变量属性的资源，
<img :src="player.img" alt="">
6、差值运算符用来定义文本，接收来自自定义属性拿到的变量值，显示在图片下方，
{{ player.title }}
7、用通知机制，在div中写事件传递父组件的方法名，与方法的参数，来通知这个点击海报事件，
<div class="player_box" @click="boxclick">
8、在export default中的实例methods中写点击事件对应的方法，有两个作用
一个是定义父组件中通知的事件名，
另外一个作用是传递的父组件中定义的变量的属性
methods:{
boxclick(){
this.$emit('receiveData',this.player.title)
}
}
9、在style中写组件的样式，和海报资源的样式，
注意这边定义的时候是class，所以用class选择器
9-1、组件内的总的资源信息：宽、高、线框、圆角、外边距、浮动、去除流动多出来圆角部分、文本样式
.player_box{
width:260px;
height:300px;
border:1px solid black;
border-radius: 5px;
margin: 20px;
float:left;
overflow: hidden;
text-align: center;
}
9-2图片信息：宽、高
img{
width:260px;
height: 260px;
}
九、父组件中标题的填写，
变量的定义
变量数据的初始化，传data列表
data(){
return {
playerTitle:'哪个'
}
},
十、写通知事件，用事件指令来控制传递，传递参数给定义的goodsTitle，回调title（拿了那个图片的title，显示出来，叫做回调）这边的title注意变量的传递，
methods:{
reFn(title){
this.playerTitle=title;
完整代码如下：
1、APP.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
2、4张图片的导入
导入4张图片放在src/assets/img文件目录下
3、views/Players.vue
<template>
<div class="players">
<Nav/>
<h1>球员页</h1>
<hr>
<h2 style="text-align: center">{{playerTitle}}球员被选中</h2>
<div class="main">
<PlayerBox v-for="player in players_list":player="player" @receiveData="reFn"/>
</div>
</div>
</template>
<script>
import PlayerBox from "@/components/PlayerBox";
import Nav from "@/components/Nav";
let players_list = [
{
img:require('@/assets/img/Curry.jpg'),
title:'库里',
},
{
img:require('@/assets/img/James.jpg'),
title:'詹姆斯',
},
{
img:require('@/assets/img/Jordan.jpg'),
title:'乔丹',
},
{
img:require('@/assets/img/Kobe.jpg'),
title:'科比',
},
{
img:require('@/assets/img/Kobe.jpg'),
title:'科比',
},
]
export default {
name: "Players",
data(){
return {
players_list,
playerTitle:'哪个'
}
},
methods:{
reFn(title){
this.playerTitle=title;
}
},
components:{
PlayerBox,
Nav,
},
}
</script>
<style scoped>
</style>
4、src/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Players from '@/views/Players'
Vue.use(VueRouter)
const routes = [
{
path: '/players',
name: 'Players',
component: Players
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
5、Nav.vue
<template>
<div class="nav">
<ul>
<li>
<router-link to="/players">球员页</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "Nav"
}
</script>
<style scoped>
.nav{
height:80px;
background-color:cyan;
}
ul > li {
float:left;
padding:30px 20px 0;
}
ul:after{
display:block;
content:'';
clear:both;
}
ul{
height:80px;
list-style: none;
margin:0;
padding:0;
}
</style>
6、PlayerBox.vue
<template>
<div class="player_box" @click="boxclick">
<img :src="player.img">
{{player.title}}
</div>
</template>
<script>
export default {
name: "PlayerBox",
props:['player'],
methods:{
boxclick(){
this.$emit('receiveData',this.player.title)
},
}
}
</script>
<style scoped>
.player_box{
width:260px;
height:300px;
border:1px solid black;
border-radius: 5px;
margin: 20px;
float:left;
overflow: hidden;
text-align: center;
}
img{
width:260px;
height: 260px;
}
</style>
注意点
1、@就是src的文件夹目录
2、父传给子组件的资源要求，用require来实现，
3、反射拿父组件信息，
4、父传子资源中变量属性的定义
5、事件方法的传参要求，用到通知机制，
感想
这个代码没有问题，我复制跑在自己的电脑上，遇到问题从源头去解决，发现是什么问题，问题就迎刃而解了。
这个只是一个简单的前端的展示页面，还需要继续学习。学以致用，像这样一个反复用到知识就是最好的学习方法。
涂鸦：
组件页面创建
创建球员页面，Players.vue组件，
在这个页面中导入注册使用导航栏组件
1、导入，import Player from ‘@/views/Nav’
2、注册，在导入的export default中写实例成员components:Nav,
3、使用，在该组件的div中写Nav单标签，用来使用，
完成之后，进行路由配置，
来到router的index.js路由配置的地方导入这个组件，配置这个组件，那么这个组件就可以通过路由访问得到页面，
小组件创建、
小组件属于导入这个小组件的页面组件，
创建导航栏页面，Nav.vue小组件，把球员页面写在小组件的跳转标签中，通过配置球员页面的路由得到这个球员的页面，
组件信息导入
assert中新建img文件夹，在其中放球员海报，
子组件创建
父组件传给子组件列表渲染信息，
子组件传给父组件渲染信息，
创建球员箱页面，PlayerBox子组件，
子组件的作用是什么？
给父组件的球员海报渲染样式，
拿到父组件球员海报的title信息，
沟通的桥梁在父组件的子组件标签中，写自定义类属性，和子组件通过点击海报传递过来的事件方法名，然后运用拿到的海报的title信息，渲染到父组件的页面信息中，
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
