一.前言 this.$router.go(-1)返回上级路由 二.主要内容 1.小功能演示: 2.组件之间的嵌套关系为: 3.具体实现 (1)由于这种返回按钮在每个页面中的结构都是一样的,只是里面的数据不一样,所以我们可以把这个“返回按钮”设置成一个公共组件,然后在每个页面中使用 (2)将功组件单独放到一个common文件夹中,如下 (3)在main.js文件中将这个公共的Navbar.vue注册成一个全局的组件 //注册全局导航栏组件 import Navbar from '@/compone…

一.前言         1.用vuex实现加入购物车操作 2.购物车详情页面          3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src目录下创建store.js, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ //vuex五大将 state:{ num:1//小球的数量默认为1 }, gette…

一.前言 在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 1.解决刷新,购物车上数值不变                                                           2.在购物车点击加减按钮,数值做出对应变化 二.主要内容 1.实现效果:点击购物车的时候可以查看到购物车的商品信息 2.解决刷新,购物车上数值不变 (1)新建一个Cart.vue展示购物信息,并将路由添加到index.js中 (2)购物车里面涉及到:存储商品信息,…

一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球显示出来(这里需要用到vue中的动画过渡) 结构如下(这是在加入购物车这个页面) //小球 <transition name='ball' @after-enter='afterEnter'> <div class="ball" v-if="isExist&qu…

一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮播图页面的时候,①轮播图的图片数据不一样,②轮播图的高度可能不一样(可以通过之前父子组件传参) (2)在Common文件夹下创建公共组件MySwiper (3)在main.js中注册全局的轮播组件 //注册全局的轮播图组件 import MySwiper from '@/components/Com…

---恢复内容开始--- 一.前言                                                                                                                                1.使用mint-ui实现上拉加载                                             2.出现的坑(当按住鼠标左键然后拖动,会进入一个检测机制) 二.主要内容       …

一.前言 1.渲染评论列表 2.点击加载按钮,加载更多    3.提交评论 二.主要内容 1.评论列表一般是注册到一个全局的公共组件中 2.请求后台数据,渲染评论列表 (1)数据格式如下 地址 /api/getcomments/:artid?pageindex=1 作用描述 根据资讯id获取它的评论的分页信息 请求方式 Get 传入api的参数 artid: 资讯id,这个id是用来区分是哪一个页面中的评论数据 pageindex: 分页的页码,表示当前第几页 传入url写法: /api/get…

一.前言 1.让图片还没有被完全加载出来的时候给用户提示                                       2.图片查看器 二.主要内容 1.让图片还没有被完全加载出来的时候给用户提示 (1)演示如下图所示 (2)只需要在请求数据的时候,判断当前的数据的长度是否为0,为零就调用mint-ui中的toast loadImageByCategoryId(id){ //这里传入请求的id this.$axios.get('api/index?type=top&key=79b6…

---恢复内容开始--- 一.前言                        1.底部导航(两种做法)                                         2.轮播图                                         3.九宫格 二.主要内容 1.底部导航 方式一:借用mint-ui, 这里实现tab切换时高亮可以给每个tab双向绑定一个值 (1)html结构代码如下 <!--底部--> <mt-tabbar v-model=…

一.前言 1.导航滑动实现   2.渲染列表信息时让一开始加载的时候就请求数据 3.根据路由的改变,加载图文的改变(实现用户访问网站时可能执行的三个操作) 二.主要内容 1.导航滑动实现: (1)演示效果: (2)代码实现 <!--导航栏用ul li实现--> <ul> <li v-for='(item,index) in categoryList' :key='index'> <a href="javascript:;">{{item.…