vue_04 练习

目录

• vue_项目初始：
  • car.vue
  • Nav.vue：
  • cardata.vue

vue_项目初始：

1.Home.vue页面组件显示基本信息：欢迎来到汽车系统
    Car.vue页面组件，完成Cars的列表数据渲染
    Nav.vue小组件，完成Home与Car页面的导航跳转

2. CarDetail页面组件，完成某一个汽车详细信息的渲染
    （Car页面点击具体的car进入详情页，把点击的car的主键传入到详情页）

car.vue

template>
    <div class="car">
        <Nav/>
        <div class="wrap">
            <CarTag v-for="car in cars" :car="car" />
        </div>
    </div>
</template>

<script>
    import Nav from "../components/Nav.vue"
    import CarTag from "../components/CarTag";

    export default {
        name: "Car",
        data(){
            return {
                cars:''
            }
        },
        components:{
            CarTag,
            Nav,
        },
        created() {
            console.log('组件创建成功');
            this.cars = [
                    {
                        img:require('@/assets/img/101.jpg'),
                        title:'Devel Sixteen',
                        desc:'一号车详情'
                    },
                    {
                        img:require('@/assets/img/201.jpg'),
                        title:'Devel Sixteen',
                        desc:'2号车详情'
                    },
                    {
                        img:require('@/assets/img/301.jpg'),
                        title:'Devel Sixteen',
                        desc:'3号车详情'
                    },
                    {
                        img:require('@/assets/img/401.jpeg'),
                        title:'Devel Sixteen',
                        desc:'4号车详情'
                    }

                ]
        }
    }
</script>

Nav.vue：

<template>
    <div id="nav">
        <div class="content">
            <router-link to="/">主页</router-link>
            <router-link to="/car">汽车</router-link>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Nav",
    }
</script>

<style scoped>
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

cardata.vue

<template>
    <div>
        <Nav />
        <p>{{ pk }}</p>
    </div>
</template>

<script>
    import Nav from "../components/Nav";
    export default {
        name: "car-data",
        data(){
            return{
                pk:"尚未选择车型"
            }
        },
        created() {
        this.pk = this.$route.query.pk
        },
        components: {
        Nav
      }
    }
</script>