前端项目-尚品会-来自b站尚硅谷视频

目录

  • 前言
  • gulishop-client---vue2
  • 项目目录
  • 分页器

前言

重温Vue,打开之前的项目文件夹,陌生又熟悉…
前端项目-尚品会-来自b站尚硅谷视频_第1张图片
3月份左右看的项目视频,现在已经忘得差不多了…甚至记不清自己是看的哪个视频…刚刚才想起来自己并没有看Vue的视频教程,当初直接看的项目视频,不得不说,我真猛(bushi
b站视频尚硅谷VUE项目实战,前端项目-尚品汇(大型\重磅)
b站视频尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通
甚至忘了怎么启动项目:

src目录下打开终端:
yarn install
yarn serve

gulishop-client—vue2

四五个月前看的,只在笔记本上做了一些笔记,也没有跟着写一遍,现在已经忘得七七八八了…

项目目录

前端项目-尚品会-来自b站尚硅谷视频_第2张图片

node_modules:项目依赖文件夹
public:一般放置一些静态资源(图片),放在public文件夹中的静态资源,webpack进行打包时会原封不动打包到dist文件夹中。
babel.config.js
jsconfig.json
package-lock.json
package.json
vue.config.js
这里有个问题:public、assets、static在用webpack打包时的区别
Vue处理静态资源及public/static/assets目录的区别

分页器

分页器展示,需要知道哪些数据:

  1. pageNo: 当前页码
  2. pageSize: 每一页展示几条数据
  3. total: 数据总条数
  4. continues: 连续页码数(一般为5或7—奇数,因为对称,好看)

父组件App.vue传给子组件MyPagination.vue的参数:

<MyPagination :currentPageNo="8" :total="87" :pageSize="3" :continueNo="5"/>

分页器动态展示,分为上中下三部分:
v-for不仅可以遍历数组,还可以遍历数字

<div class="pagination">
      这里是分页器<br><br><br>
      <h1>{{startEnd}}-----{{currentPageNo}}h1>

       
      <button :disabled="currentPageNo==1">上一页button>
      <button>1button>
      <button>...button>

      
      <button v-for="(page,index) in startEnd.end" :key="index">{{page}}button>

      
      
      <button>...button>
      <button>9button>
      
      <button>{{totalPageNo}}button>

      
      <button :disabled="currentPageNo==totalPageNo">下一页button>

      <button>共{{total}}条数据button>
      
    div>

此时效果:
在这里插入图片描述
利用v-if隐藏元素,这里有个问题,v-forv-if不能同时用,但是只报错,能正常运行。
在这里插入图片描述
分页器效果做好后,要往里面传数据了,因为是根据尚硅谷的项目写的,它用的是搜索页面的分页器,所以又去变了一遍search模块
search模块开发:

  1. 拆分出静态组件
  2. 发请求(API)
  3. vuex(三连环)
  4. 组件获取仓库数据,动态展示数据
    注意这里有个问题要注意:
    前端项目-尚品会-来自b站尚硅谷视频_第3张图片
    store文件夹下必须有个index.js文件

你可能感兴趣的:(vue项目,前端,vue.js,javascript)