码迷,mamicode.com
首页 > 其他好文 > 详细

使用element-ui集成路飞项目

时间:2018-12-25 15:17:42      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:组件   详情   路由   取值   teacher   size   router   sed   OLE   

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()
            }
        }
    }

 

使用element-ui集成路飞项目

标签:组件   详情   路由   取值   teacher   size   router   sed   OLE   

原文地址:https://www.cnblogs.com/cao123/p/10173801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!