如何使用v-model实现双向绑定vuex的state
有时候我们需要使用v-model实现对vuex的state中数据的双向绑定，我们该如何实现呢？我们的html代码如下：<div id="app"> 用户名：<input type="text" v-model="username" /></div&……
vue-router路由拦截实现将未登录请求跳转到登录页面
我们在使用vue-router开发前端项目时，经常需要保证有些页面不需要登录就可以访问，但有些页面必须登录后才能访问，那我们该如何才能方便地实现这样的需求呢？其实，使用vue-router中的路由拦截可以轻松实现一些收保护的页面如果在未登录状态下被请求访问，可以直接跳转到登录页面。我们实现如上需求只需要两个步骤：1）在router目录下的index.js……
vue手机商城项目实战（10）-购物车组件实现
一、素材准备1、在购物车中没有商品时，显示购物车为空图片，图片下载：2、解压后上传至assets\img目录下二、购物车组件实现修改Shopcar.vue如下：<template> <div id="shopcar"> <!-- 顶部导航栏 --> ……
vue手机商城项目实战（9）-添加购物车功能实现
本文接：vue手机商城项目实战（8）-路由跳转转场过渡动画效果实现我们添加购物车的操作有两个地方，一个是首页商品列表Goods.vue和商品详情页GoodsDetail.vue,下面我们来实现添加到购物车功能。一、共享购物车状态1、我们购物车信息会被购物车组件使用，所以我们将购物车商品信息存放在vuex中，在store\index.js的state新增……
vue手机商城项目实战（8）-路由跳转转场过渡动画效果实现
本文接：vue手机商城项目实战（7）-商品详情组件实现我们发现在路由跳转的时候无论是点击底部选项卡，还是点击商品详情和搜索，页面跳转都比较生硬，因此我们可以考虑使用vue提供的转场效果来优化用户体验。一、转场代码实现1、需要给router-view包裹transition，App.vue中修改如下：<transition :name=&qu……
vue手机商城项目实战（7）-商品详情组件实现
本文接：vue手机商城项目实战（6）-首页商品列表组件实现一、商品详情状态共享1、由于商品详情是点击商品列表中的商品得以跳转实现，而商品详情组件也需要用到商品信息，因此可以通过共享商品的id然后去后台查询展示详情，或者直接将该商品所有的信息直接共享，为方便起见，我们这里直接使用后者方法。2、在store\index.js的state中新增goodsDe……
vue手机商城项目实战（6）-首页商品列表组件实现
本文接：vue手机商城项目实战（5）-首页类型组件实现一、素材准备1、从网上下载一些商品图片，我这里准备了6个商品的图片2、将其解压后存放到assets\img目录下，以便测试使用二、实现商品列表组件1、在views目录下新建Goods.vue，代码如下：<template> <div id="goods……
vue手机商城项目实战（5）-首页类型组件实现
本文接：vue手机商城项目实战（4）-首页轮播图组件实现1、我们需要在轮播图下实现商城商品分类类型展示，主要是为了展示图标。所以我准备了一些分类图标，下载后放入assets\img目录下2、我们在views目录下，新建Type.vue代码如下：<template> <div id="type">……
vue手机商城项目实战（4）-首页轮播图组件实现
本文接：vue手机商城项目实战（3）-首页搜索框组件实现一、轮播图实现1、下载3张图片放进assets\img目录，方便轮播图测试使用。2、在views下新建Banner.vue代码如下：<template> <div id="banner"> <mt-swipe :a……
