Vue小案例（一）

【Vue小案例（一）】的更多相关文章

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…

案例需求: 创建一个品牌展示表格,表头有编号(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(小案例_vue+axios仿手机app)_go实现退回上一个路由

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

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)_购物车（二模拟淘宝购物车页面，点击加减做出相应变化）

一.前言在上篇购物车中,如果用户刷新了当前的页面,底部导航中的数据又会恢复为原来的: 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…