vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(十一)构思商品页面...
在写商品页面product.vue之前,我应该思考一下,商品页面要实现那些功能,该不如布局?
要实现的功能
- 1、所有商品列表的展示
- 2、分类商品的列表展示
- 3、搜索商品或得列表展示
- 4、单一商品的详细页面
- 5、商品列表分页功能
- 6、还没想到的..................
预想页面布局
- 1、product.vue页面分左右两边,左边放商品的分类的类型(如:所有商品、石榴、松子、火腿、其它....),写成fixed的样式,右边一个搜索框,下面放各类列表
- 2、product-content.vue就是一个商品的详情展示页面
准备工作
先模拟数据
打开data.js
添加一个路由来实现商品分类
检查才发现图上的:class写错了,多写了一个s,当然这个命名随意,但需要使用这个来获取需要的数据,还是写个容易记的
把相应的组件创建出来并引入
创建一个productlist.vue
编写product.vue的基本结构
<template>
<div class="container"><el-row><el-col :span="6"><el-menudefault-active="2"class="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"active-background-color="#ffd04b"><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3"><i class="el-icon-setting"></i><span slot="title">导航三</span></el-menu-item></el-menu> </el-col><el-col :span="18"><el-input type="text"class="el-input"placeholder="请输入商品名"v-model="searchName"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input><el-button type="primary"@click="search">搜索</el-button><router-view></router-view></el-col></el-row>
</div></template>
<script>
export default {data () {return {searchName: ''}},methods: {search () {console.log('search')}}
}
</script>
<style scoped>
.el-input {margin: 20px 0;width: 80%;
}</style>
这样谢了个大体样子了
把分类商品路由挂到侧边栏
改写product.vue
当然我这样写相当于把分类的项全部写死了,但目前我并没有想到更合理的办法,所以也只能先这样了
查看效果
可以看出动态路由是匹配到了的
vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(十一)构思商品页面...相关推荐
- element ui登录界面_vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(四)美化头部和登录界面...
美化头部header.vue 找张头像当用户头像 在写点css来美化一下头部,完善一下现在能完成的功能 header.vue :default-active="$route.path&quo ...
- elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来 前言 经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
- Vue学习笔记(十一)
1.Vue学习笔记(十一) 文章目录 1.Vue学习笔记(十一) 1.1Vue_配置代理_方式 1.1.0演示问题 1.1.1运行node server1 1.1.2运行node server2 1. ...
- 如何写好科研论文(学习笔记2000字)
如何写好科研论文(学习笔记2000字) 通过本课程的学习,我学习到了许多如何写好科研论文的方法,接下来我将具体阐述我的收获. 一.在第一章中,主要学习了如何造就一篇优秀的学术论文. (一)标题要起得好 ...
- 最热网友收藏:写得蛮好的linux学习笔记(2007年第10周)
2007年第10周最热网友收藏 上班人员必读:"五险一金"详解!(130),共376人收藏,liukang520236首先收藏 写得蛮好的linux学习笔记-(96),共159人收 ...
- 使用UI创建vue项目并添加element ui和axios
目录 简介 Vue简单安装说明 项目创建步骤 总结 简介 因为最近一个项目需要使用SPA的方式,而前端选择使用vue来实现.所以最近重新看了下vue的相关知识,发现最新的vue项目可以在web中使用界 ...
- 基于vue-router vuex+Element ui+echarts+axios +mysql的后台管理系统
目录 前言 一.使用HBuilderX新建项目 二.安装依赖 三.文件创建 1.引入插件 2.APP.vue文件 3.注册路由 4.Main.vue文件 5.侧边栏实现 6顶部导航条实现 四.首页制作 ...
- vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单 使用 记录 element ui 表单 input 文本域 日期选择 中国标准时间与xxxx-xx-xx格式时间之间的来回切换 中国标准时间转换为xxxx-xx-xx格式 ...
- vue安装并导入Element UI
首先,在Vue项目的终端输入:npm i element-ui -S (输入之后,回车,等待一会儿,就会出现下图红框以下的内容,表示已经安装成功) 然后,在main.js中添加: import Ele ...
最新文章
- 高德地图SDK大致使用
- 主mysql删除从服务不同步_MySQL主从不同步解决
- bean加载context idea_02-基于IDEA创建SpringBoot项目并进行入门分析
- iOS之深入解析内存分配的五大区
- Spring Boot 集成 WebSocket通信信息推送!
- drawforeground只有鼠标事件进入才刷新_为什么移动鼠标会让操作系统跑得更快?...
- 世界末日倒计时 js代码
- 利用python开发一个竞争情报系统_一个基于python的即时通信程序
- matlab weibpdf函数,MATLAB常用函数
- 计算机打印字与印刷字的大小,字号与尺寸对表.doc
- YoungTalk-STM32入门100步-回顾总结与展望(98-100)
- 局域网,手机与电脑文件共享
- iPhone游戏开发纵谈
- Struts-2.3.24.1官方例子-struts2-blank
- MySQL高级查询语句——超详细,一篇就够了
- 手机触摸屏扫描信号实测波形
- Python2.7安装Opencv3
- java修图sdk_脑洞大开!Adobe等新研究把「自拍」变「他拍」,魔幻修图效果感人...
- Linux下QoS模块之tc(traffic control)操作简介/CBQ
- windows常见DOS命令(完整版)