Vue(小案例_vue+axios仿手机app)_图片列表操作

【Vue(小案例_vue+axios仿手机app)_图片列表操作】的更多相关文章

Vue(小案例_vue+axios仿手机app)_图片列表操作

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

Vue(小案例_vue+axios仿手机app)_图文列表实现

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

Vue(小案例_vue+axios仿手机app)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

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

Vue(小案例_vue+axios仿手机app)_购物车

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

Vue(小案例_vue+axios仿手机app)_公共组件（路由组件传参）

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

Vue(小案例_vue+axios仿手机app)_上拉加载

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

Vue(小案例_vue+axios仿手机app)_实现用户评论

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

Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）

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

Vue(小案例_vue+axios仿手机app)_购物车（计算商品总金额）

一.前言 1.计算总金额 2.点击删除按钮,删除对应的商品信息 3.当还没结算的时候,当用户跳到其他页面时,提示用户是否要离开二.主要内容 1.计算总金额 (1)效果演示: (2)监听多个属性用到computed计算属性 computed:{ payment(){ let total = 0;//定义总金额 let count =0;//定义总数量 this.shopCart.forEach((sh…

Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能

一.前言 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…

Vue(小案例_vue+axios仿手机app)_go实现退回上一个路由

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

Vue小案例（一）

案例需求: 创建一个品牌展示表格,表头有编号(id),品牌名称(name),创建时间(time)和操作,需要实现的功能是对数据的增删操作,和时间的格式化. 思路分析:在开发之前需要想清楚要用到Vue中的什么方法或者特性来实现所要的功能,把案例分成以下几个部分来开发: 展示数据,需要使用v-for指令删除数据,需要使用v-on绑定一个事件添加数据,需要使用双向数据绑定时间的格式化,需要使用过滤器实现步骤: 1.开发静态模板 <!DOCTYPE html> <html> <…

vue小案例--简易评论区

一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件.(3)对组件编码,生成动态页面. 2.静态页面参考来源:https://www.bilibili.com/video/av49099807/?p=22&t=1223 [举例:] <!DOCTYPE html> <html> <head> <meta char…

VUE小案例--简易计算器

这个小案例主要时练习v-model的使用,功能并不完善 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=…

VUE小案例--跑马灯效果

自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="…

Vue小案例之商品管理------学习过滤器使用过滤器处理日期的格式

代码学习过滤器过滤器介绍:过滤模型数据,在数据显示前做预处理操作: 内置过滤器:在1.x中,Vue提供了内置过滤器,但是在2.x中已经完全废除: 解决办法: (1)使用第三方库来替代1.x中的内置过滤器: (2)使用自定义过滤器: 自定义过滤器: a.全局配置:Vue.filter( id, [definition] ) b. 局部配置:在Vue实例中配置filters 详细介绍网址:https://cn.vuejs.org/v2/api/#Vue-filter 过滤器语法: 无参:{{msg…

Vue(小案例）底部tab栏和顶部title栏的实现

---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现二.主要内容 1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应的显示高亮,并且切换到对应的页面中 (1)html/css代码 <template> <div> <footer class="footer_guide border-1px"> <a href="#" class="…

VUE项目用hbuilder 打包为手机APP

一.测试项目是否可以正确运行指令:npm run dev 首先我们先建立一个vue的项目,本人用的是vue-cli随便建立的,然后运行项目不必非得是像我这样的,这一步的目的只是测试一下咱们的vue项目是否可以运行二.修改路径(assetsPublicPath: './') 打开我们config中的js文件,修改assetsPublicPath的路径为"./"(下图的右下角位置) 三.打包文件指令:npm run build 打包后会生成dist文件四.把dist文件变…

Vue小案例之商品管理------修改商品数量以及增加入库日期属性

实现修改商品的数量: 加入的代码: css: .clear-btn{ text-align: right; padding-right: 10px; } .table-warp a{ text-decoration: none; } HTML: <td style="display: flex;"> <a style="flex: 0.5;" href="#" @click.prevent="item.num--&qu…

Vue小案例之商品管理------批量删除与商品数量的调整

通过索引进行删除,进行测试,是否获取其索引: 测试效果: 测试代码,在vue中定义一个空的数组,以便后面进行数据的绑定: data:{ imgUrl:'../res/images/', imgName:'lovely.ico', goods:{ id:'', name:'', price:'', num:'', type:'' }, goodsType:['零食','电子产品','生活用品'], goodsArry:[ {id:,type:'零食'}, {id:,num:,type:'电子产品'…