前端路线--Vue（day07）

note笔记

/* 
路由:<vue.js的核心模块>
vue.2.0对应vue router 3.x版本

1.下载路由
    cnpm install vue-router@3 --save
2.引入vue和vue-reouter
    import Vue from "vue";
    import VueRouter from "vue-router";
3.// 使用VueRouter
    Vue.use(VueRouter);
4.//配置路由
//4.1 准备组件(将页面引入进来)
import HomePage from "@/views/HomePage/HomePage.vue"
import FindPage from "@/views/FindPage/FindPage.vue"
import CategoryPage from "@/views/CategoryPage/CategoryPage.vue"
import CartPage from "@/views/CartPage/CartPage.vue"
import MinePage from "@/views/MinePage/MinePage.vue"

//4.2定义路由(路由对应相应的页面)
//path:配置的路由接口  component:path对应的组件
let routes = [
    { path: "/home", component: HomePage },
    { path: "/find", component: FindPage },
    { path: "/category", component: CategoryPage },
    { path: "/cart", component: CartPage },
    { path: "/mine", component: MinePage }
]

//4.3创建router实例,然后传routes配置
let router = new VueRouter({
    routes //缩写ES6:routes:routes
})

//4.4暴露router对象
export default router

//4.5在main.js中将router实例挂载到整个Vue实例对象上

5.
5.1在main.js中引入路由模块
    import router from "@/router/index.js"
5.2挂载路由
new Vue({
    // 挂载router
    router,
    render: h => h(App),
}).$mount('#app')
// $mount("#app")同el:"#app"  都是挂载元素

6.在App.vue中接收对应页面的路由(配置路由占位符)
<template>
  <div id="app">
    <!-- router-view路由视图--接收对应页面的路由,必须配置,否则显示不出来 -->
    <!-- /home ==> HomePage -->
    <router-view></router-view>
  </div>
</template>

*/

//----------------------------------------------------------------------------------

/* 
移动端开发：
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！CSDN
1.在src下新建css文件夹-->base.css
    先写转换单位(cv就行)
2.在App.vue中引入该样式,目的:让所有的页面都生效
3.下载阿里图标库  iconfont.cn
    添加-->我的-->下载
    取出.css  .ttf  .woff2文件
    src下新建fonts文件夹-->粘贴文件
    在App.vue中引入:@import
4.使用less
    下载less[cnpm install less@3 less-loader@5 --save]
5.在components下-->TabBar.vue(公共的导航栏)
    样式详见项目(!!!!!!!)
    在App.vue中引入组件,注册,和使用
    在移动端底部高:98px 在PC：98/2=48==>4.8rem

6.点击底部nav实现跳转:

跳转路由：
    1.router-link上边有一个to属性，属性值就是路由path   可以通过tag属性指定标签名
        <router-link to="/home" tag="li">
    2.添加完router-link之后会自带一个类名router-link-active
    3.在App.vue里的style里: 
    //设置所有的路由跳转后处于激活状态的颜色为#f55 
    .router-link-active {
      color: #f55;
    }


初始化选中一个路由:(选中/home)
  // 生命周期--编译完成后
  mounted() {
    // 生命周期只执行一次,在初始化项目时执行
    // console.log(this.$route.path);
    this.activePath = this.$route.path; //为了获取点击跳转的路由path,赋给activePath,好去比较图标
  }
  activePath:data中定义的数据       this.$route.path：可以获得当前router的路径(/home)


监视路由的变化:watch可监视数据和路由的变化
watch:{
    //监听$route这个属性,to:当前跳转到的路由对象
    $route(to) {
      // console.log(to.path);
      this.activePath = to.path;
    }
}


切换底部nav图标：
        <div class="icon">
          <!-- 未选中 -->
          <i class="iconfont icon-shouye" v-if="activePath != '/home'"></i>
          <!-- 选中 -->
          <i class="iconfont icon-shouyefill" v-else></i>
        </div>
*/

// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!CSDN把TabBar.vue打进去

TabBar.vue

```javascript
<!-- 导航栏组件 -->
<!-- 在路由中跳转路由使用router-link标签编译之后就是a标签
  1.router-link上边有一个to属性，属性值就是路由path   可以通过tag属性指定标签名
  2.添加完router-link之后会自带一个类名router-link-active
  3.在App.vue里的style里: 
    //设置所有的路由跳转后处于激活状态的颜色为#f55 
    .router-link-active {
      color: #f55;
    }
 -->
<template>
  <div class="tabbar">
    <ul>
      <router-link to="/home" tag="li">
        <div class="icon">
          <!-- 未选中 -->
          <i class="iconfont icon-shouye" v-if="activePath != '/home'"></i>
          <!-- 选中 -->
          <i class="iconfont icon-shouyefill" v-else></i>
        </div>
        <span>首页</span>
      </router-link>
      <router-link to="/category" tag="li">
        <div class="icon">
          <!-- 未选中 -->
          <i class="iconfont icon-fenlei" v-if="activePath != '/category'"></i>
          <!-- 选中 -->
          <i class="iconfont icon-fenlei1" v-else></i>
        </div>
        <span>分类</span>
      </router-link>
      <router-link to="/find" tag="li">
        <div class="icon">
          <!-- 未选中 -->
          <i class="iconfont icon-faxian" v-if="activePath != '/find'"></i>
          <!-- 选中 -->
          <i class="iconfont icon-faxianjihuo" v-else></i>
        </div>
        <span>发现</span>
      </router-link>

      <router-link to="/cart" tag="li">
        <div class="icon">
          <!-- 未选中 -->
          <i class="iconfont icon-gouwuche" v-if="activePath != '/cart'"></i>
          <!-- 选中 -->
          <i class="iconfont icon-gouwuchefill" v-else></i>
        </div>
        <span>购物车</span>
      </router-link>
      <router-link to="/mine" tag="li">
        <div class="icon">
          <!-- 未选中 -->
          <i class="iconfont icon-wode" v-if="activePath != '/mine'"></i>
          <!-- 选中 -->
          <i class="iconfont icon-wodexiao" v-else></i>
        </div>
        <span>我的</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      activePath: "/home",
    };
  },
  //方法集合
  methods: {},
  // 监听器watch可以检测data和路由的变化
  watch: {
    //监听$route这个属性,to:当前跳转到的路由对象
    $route(to) {
      // console.log(to.path);
      this.activePath = to.path;
    },
  },
  // 生命周期--编译完成后
  mounted() {
    // 生命周期只执行一次,在初始化项目时执行
    // console.log(this.$route.path);
    this.activePath = this.$route.path; //为了获取点击跳转的路由path,赋给activePath,好去比较图标
  },
};
</script>
<style lang="less">
.tabbar {
  width: 100%;
  height: 4.9rem;
  background: #efefef;
  position: fixed;
  left: 0;
  bottom: 0;
  color: #666;
  ul {
    width: 100%;
    height: 4.9rem;
    display: flex;
    justify-content: flex-start;
    text-align: center;
    align-items: center;
    li {
      flex: 1;
      i {
        font-size: 25px;
      }
    }
  }
}
</style>

购物车的全选功能

<!-- 购物车组件 -->
<template>
  <div class="cart_page">
    <div class="cart-header">头部</div>
    <div class="cart-list">
      <div
        class="shop"
        v-for="(cartListData, index) in cartListDatas"
        :key="cartListData.shop_id"
      >
        <div class="shop-name">
          <div class="icon" @click="shopSelectFn(index, cartListData)">
            <!-- 未选中 -->
            <i
              class="iconfont icon-weixuanzhong"
              v-if="!cartListData.is_shop_select"
            ></i>
            <!-- 选中 -->
            <i class="iconfont icon-31xuanzhong" style="color: #f55" v-else></i>
          </div>
          <span>{{ cartListData.shop_name }}--{{ index }}</span>
        </div>
        <div class="goods">
          <ul>
            <li
              v-for="(cartList, index) in cartListData.children"
              :key="cartList.goods_id"
            >
              <div class="icon" @click="goodsSelectFn(index, cartList)">
                <!-- 未选中 -->
                <i
                  class="iconfont icon-weixuanzhong"
                  v-if="!cartList.is_goods_select"
                ></i>
                <!-- 选中 -->
                <i
                  class="iconfont icon-31xuanzhong"
                  style="color: #f55"
                  v-else
                ></i>
              </div>
              <div class="goods-thumb">
                <img
                  src="https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174741051.jpg"
                  alt=""
                />
              </div>
              <div class="goods-info">
                <div class="goods-title">
                  {{ cartList.goods_name }}
                </div>
                <div class="goods-content">
                  <div class="goods-price">{{ cartList.shop_price }}</div>
                  <div class="goods-num">
                    <a
                      href=""
                      @click.prevent="
                        cartList.buy_num > 1 ? cartList.buy_num-- : 1
                      "
                      >-</a
                    >
                    <input type="text" v-model="cartList.buy_num" />
                    <a href="" @click.prevent="cartList.buy_num++">+</a>
                    <i class="iconfont icon-shoucang"></i>
                    <i class="iconfont icon-shanchu"></i>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="cart-footer">
      <div class="icon" @click="selectAllFn">
        <!-- 未选中 -->
        <i class="iconfont icon-weixuanzhong" v-if="!selectAll"></i>
        <!-- 选中 -->
        <i class="iconfont icon-31xuanzhong" style="color: #f55" v-else></i>
        <span>全选</span>
      </div>
      <div class="total">合计：{{ totalPrice }}</div>
      <div class="buy">去结算({{ totalGoods }})</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      selectAll: true,
      cartListDatas: [
        {
          shop_id: 1,
          shop_name: "自营",
          is_shop_select: true,
          children: [
            {
              goods_id: 1001,
              shop_id: 1,
              goods_name: "冰墩墩",
              goods_thumb:
                "	https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174741051.jpg",
              shop_price: "1",
              is_goods_select: true,
              buy_num: 1,
            },
            {
              goods_id: 1002,
              shop_id: 1,
              goods_name: "冰墩墩2",
              goods_thumb:
                "	https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174741051.jpg",
              shop_price: "2",
              is_goods_select: true,
              buy_num: 1,
            },
          ],
        },
        {
          shop_id: 2,
          shop_name: "官方旗舰店",
          is_shop_select: true,
          children: [
            {
              goods_id: 2001,
              shop_id: 2,
              goods_name: "冰墩墩201",
              goods_thumb:
                "	https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174741051.jpg",
              shop_price: "1",
              is_goods_select: true,
              buy_num: 1,
            },
            {
              goods_id: 2002,
              shop_id: 2,
              goods_name: "冰墩墩202",
              goods_thumb:
                "	https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490174741051.jpg",
              shop_price: "2",
              is_goods_select: true,
              buy_num: 1,
            },
          ],
        },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {
    totalPrice() {
      let total = 0;
      this.cartListDatas.map((item) => {
        item.children.map((value) => {
          if (value.is_goods_select) {
            total += value.buy_num * value.shop_price;
          }
        });
      });
      return total;
    },
    totalGoods() {
      let total = 0;
      this.cartListDatas.map((item) => {
        item.children.map((value) => {
          if (value.is_goods_select) {
            total += value.buy_num;
          }
        });
      });
      return total;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //   点击商品前的选择框
    goodsSelectFn(index, cart) {
      console.log(index, cart);
      cart.is_goods_select = !cart.is_goods_select;
      let shop_id = cart.shop_id;
      console.log(shop_id);
      //   店铺的选中和商品之间的关系
      for (let i = 0; i < this.cartListDatas.length; i++) {
        if (this.cartListDatas[i].shop_id == shop_id) {
          // this.cartListDatas[i] 点击的那个店铺
          this.cartListDatas[i].is_shop_select = this.cartListDatas[
            i
          ].children.every((item) => item.is_goods_select == true);
        }
      }
      //   商品和全选之间的关系
      this.selectAll = this.cartListDatas.every((item) => {
        return item.is_shop_select == true;
      });
    },
    // 点击全选
    selectAllFn() {
      this.selectAll = !this.selectAll;
      this.cartListDatas.map((item) => {
        item.is_shop_select = this.selectAll;
        item.children.map((value) => {
          value.is_goods_select = this.selectAll;
        });
      });
    },
    // 店铺和本店铺中商品的关系
    shopSelectFn(index, cartListData) {
      console.log(index, cartListData);
      cartListData.is_shop_select = !cartListData.is_shop_select;
      cartListData.children.map((item) => {
        item.is_goods_select = cartListData.is_shop_select;
      });

      //  商品和全选之间的关系
      this.selectAll = this.cartListDatas.every((item) => {
        return item.is_shop_select == true;
      });
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.cart_page {
  width: 100%;
  height: auto;
  background: #efefef;
  .icon {
    i {
      font-size: 2rem;
    }
  }
  .cart-header {
    height: 4.4rem;
    width: 100%;
    background: #efefef;
    line-height: 4.4rem;
    font-size: 1.4rem;
  }
  .cart-list {
    // calc() 注意-左右两边必须有空格
    width: calc(100% - 2rem);
    margin: 1rem;
    .shop {
      width: 100%;
      height: auto;
      border-radius: 1rem;
      background: #fff;
      margin: 1rem 0;
      padding: 0.5rem 0;
      .shop-name {
        height: 4.4rem;
        width: 100%;
        background: #fff;
        line-height: 4.4rem;
        font-size: 1.4rem;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .icon {
          margin-left: 1rem;
        }
      }
      .goods {
        ul {
          width: 100%;
          height: auto;
          li {
            height: 7rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon {
              width: 4rem;
              text-align: center;
            }
            .goods-thumb {
              width: 7rem;
              height: 7rem;
              img {
                width: 7rem;
                height: 7rem;
              }
            }
            .goods-info {
              width: calc(100% - 11rem);
              .goods-title {
                height: 4rem;
                width: 100%;
                line-height: 2rem;
                font-size: 1.4rem;
                overflow: hidden;

                // 单行文本出现省略号
                // white-space: nowrap;
                // text-overflow: ellipsis;

                // 多行文本出现省略号
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
              .goods-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 3rem;
                .goods-price {
                  font-size: 1.8rem;
                  color: #f55;
                }
                .goods-num {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  a {
                    display: block;
                    width: 2rem;
                    height: 2rem;
                    text-align: center;
                    line-height: 1.6rem;
                    font-size: 2rem;
                    background: #efefef;
                  }
                  input {
                    width: 4rem;
                    border: 1px solid #ccc;
                    box-sizing: border-box;
                    font-size: 1.6rem;
                    height: 2rem;
                    text-align: center;
                  }
                  i {
                    margin: 0 0.5rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .cart-footer {
    width: 100%;
    height: 4.4rem;
    position: fixed;
    bottom: 4.9rem;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    .buy {
      width: 10rem;
      height: 4.4rem;
      background: #f55;
      color: #fff;
      text-align: center;
      line-height: 4.4rem;
      font-size: 1.4rem;
    }
  }
}
</style>

项目连接

购物车的全选功能