1. 程式人生 > >使用element-ui集成路飛項目

使用element-ui集成路飛項目

them eache ini router car 取值 圖片 列表 func

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集成路飛項目