vue_04 练习

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>

巴特西

vue_04 练习

vue_项目初始：

car.vue

Nav.vue：

cardata.vue

最新文章

热门文章