使用element-ui集成路飞项目

Posted 2021-01-29 cao123

1 emement-ui
        -下载:npm install element-ui
        -使用:在main.js中配置
            import ElementUI from ‘element-ui‘;
            import ‘element-ui/lib/theme-chalk/index.css‘;
            Vue.use(ElementUI);
    2 专题课程表介绍
        -course
        -courseDetail
        -Teacher
        -PricePolice
    3 vue绑定图片:
        <el-carousel-item v-for="img in imgs">
          <img :src="img">
        </el-carousel-item>
    4 vue页面挂载时,执行方法:
        mounted:function () {
            //init()为methods中定义的方法
            this.init()
        }
                
    5 课程列表展示
        
    
    
    6 课程详情页面
        -路由携带参数跳转: 
            <router-link :to="{‘name‘:‘courseDetail‘,‘params‘:{‘id‘:course.id}}">详情</router-link>
        -取值:
            course_id: this.$route.params.id,

 

    -图片显示(跟地址绑定) :src=‘图片地址‘   <img :src="course.course_img" class="image">
    -路由携带参数跳转:
        -<router-link :to="{‘name‘:‘courseDetail‘,‘params‘:{‘id‘:course.id}}">{{course.name}}</router-link>  params：取值
    -从另一个页面组件取值:
        -this.$route.params.id   拿到的就是路由后面的值
    -当前页面切换,数据没变  通过watch观察路由的变化  
     watch:{
            ‘$route‘:function (to,form) {
                console.log(‘to‘,to);
                console.log(‘form‘,form);
                //修改课程的id
                this.course_id=to.params.id;
                //再去后台加载数据回来
                this.init()
            }
        }
    }