get和post

• data.json数据

         [{"title":"小米"，"price":"2000"}]
  

• ajax 写在methods中 methods:{ getProduct(){ //vue-axious ---ajax //1.安装 axios npm install axios 并引入 } }

• 执行的话用 mounted(){ this.getProduct() }

swiper

• npm install swiper --save
• main.js 引入swiper(以后全局都需要)
• 引入swiper的样式 main.js中,样式放置在node-modules

动态数据的调取

• imoocdsp.com/doc.html

• 在线调试 发送 真实的接口

• swiper初始化 data(){ return{ swipers:[] } }

• 掉数据 methods 调接口 //ajax methods：{ getSwiper(){ this.swipers = [ {url：require(@/assets/images/banner1.jpeg)}, {url：require(@/assets/images/banner2.jpeg)}, {url：require(@/assets/images/banner3.jpeg)}, ] } }

• 调用方法

        mounted(){
                //掉方法
                this.getSwiper()
            }
  

• 轮播图 v-for循环 :src是变量

    <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,key) in swipers" :key="key">
              <img :src="url+item.focus_img">
            </div>
          </div>
          <!-- Add Pagination:圆圈计数 -->
          <div class="swiper-pagination"></div>
        </div>
  

• 轮播图循环

           var swiper = new Swiper(".swiper-container", {
                      pagination: {
                        // 圆圈
                        el: ".swiper-pagination"
                      },
                      loop: true, // 循环
                      autoplay: {
                        delay: 2500, // 每隔2.5秒播放一张图
                        disableOnInteraction: false //true默认手动轮播停止后，自动播放会停止
                        // 设置 为 false ,手动轮播停止后，自动播放继续使用
                      }
                    });
  

dom还没加载呢轮播图已经操作解决这一问题

• 将轮播图循环放置
• 1.异步加一个settimeout加一个定时器
• 2.vue $nextTick(()=>{.....})
• 使用ajax 中的axios

• 路径的写法（/index/carousels）---出错
• 不满足同源策略跨域的问题

插槽

• navbar 组件 三个插槽 左中右

文字左右两侧h3标题加入虚线

两行省略号

//一行

         /* text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap; */

//两行

          overflow: hidden;
          text-overflow: ellipsis;
          line-clamp: 2;
          display: -webkit-box;
          text-overflow: -o-ellipsis-lastline;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;

图片不一般高度

                  <div class="imgs">
                    <img :src="url + item.goods_img.split(',')[0]" alt />
                  </div>


        .recommend .imgs {
          position: relative;
          padding-top: 100%; /*将图像100%放进父级盒子中*/
          width: 100%;
        }
        .recommend img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }