电商平台项目------首页

目录

Mock

swiper

seiper的基本使用

swiper在vue中的问题

组件通讯的方式

props 父给子通讯

自定义事件 子给父通讯

父组件通过ref获取子组件数据

全局事件总线 $bus 全能

作用域插槽

vuex

  $parent 和 $children

 sessionStorage,localStorage传值

路由传参

params

query

总结

---

Mock

Mock.jshttp://mockjs.com/

• npm  i mockjs --save
• src中创建mock文件夹
• 准备json数据生成 json文件
• 创建mockServe.js模拟数据  //Mock.mock 第一个参数为请求地址，第二个为请求数据
• 在main中引入

//引入数据 webpack默认对外暴露：图片 json
import banner from './banner'
import floors from './floors'
//mock数据 第一个参数为请求地址，第二个为请求数据
Mock.mock('/mock/banner', { code: 200, data: banner })
Mock.mock('/mock/floors', { code: 200, data: floors })

swiper

seiper的基本使用

• npm i swiper@5 --save
• 引包（相应的css js）
• 相对应的结构
• 初始化swiper实例(必须有结构)

import Swiper from "swiper";
import 'swiper/css/swiper.css'


 

          

            

              
            
          
          
          


          
          

          

 


//swipers实例之前结构必须要有
//第一个参数：可以是字符串也可以dom节点
var mySwiper = new Swiper ('.swiper-container', {
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
      clickable: true, //点击小球切换
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        

swiper在vue中的问题

swpier实例 如果存在异步请求结构还不完整不能在mounted生成swiper实例

使用watch监听加nextTick解决

watch监听数据的变化，然后拿到最新dom

Vue.nextTick 在下次dom更新循环结束之后 执行延迟回调在修改数据之后获取更新后的dom

组件通讯的方式

props 父给子通讯

父组件  

子组件  props: ['msg'],

自定义事件 子给父通讯

父组件 在子组件标签上使用 @自定义事件名=‘父组件里面的方法名’

< /my-comp1>

子组件  内容通过事件触发 使用 this.$emit(‘自定义事件名’,‘值’)传递数据

父组件通过ref获取子组件数据

1.直接放在标签中获取元素节点

2.放在组件中获取组件对象

alert(this.$refs.r1.msg)

全局事件总线 $bus 全能

安装
npm install vue-bus
引入
import Vue from "vue";
import VueBus from "vue-bus";
Vue.use(VueBus);
发送变化的数据 this.$bus.emit("select-item", data);
$bus.on实时监听数据，数据有变化则会自动执行一次
mounted() {
			this.$bus.on("select-item", (data) => {
      			console.log("select-item", data);
      			this.activeName = data;
    		});
		}

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。现在，假设B组件：

接收

ElementUI里面的表格el-table，当改变某一列展示的字段时，我们经常使用：

  

vuex

state中定义数据     CategoryList: [],
mutations修改state数据(同步) commit 执行
    CategoryList(state, payload) {
        state.CategoryList = payload
    },
actions（异步） 通知mutations修改数据 dispatch执行
async AstncCategoryList({ commit }) {
        let { data, code } = await axios.CategoryList();
        if (code !== 200) return
        commit('CategoryList', data)
    },
this.$store.dispatch("AstncCategoryList");
页面获取数据...mapState辅助函数computed映射
import { mapState } from "vuex";
 computed: {
    ...mapState({
      FloorList: (state) => state.home.FloorList,
    }),
  },

  $parent 和 $children

ref为子组件指定一个索引名称，通过索引来操作子组件；

  this. $parent可以直接访问该组件的父实例或组件；

  父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。

 sessionStorage,localStorage传值

 LocalStorage或SessionStorage通常以键/值对形式的字符串进行存储，所以在存储时需要对数据格式进行转换，使用JSON.stringify方法将对象转换成字符串，提取时用JSON.parse方法将字符串转换成对象

  提供了5个方法，分别是clear（清除LocalStorage）、getItem（获取本地数据）、key（取下标对应键的值）、removeItem（删除以保存数据）、setItem（设置保存数据）。

  sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。

  localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失

    localStorage.setItem("localStorage",JSON.stringify(obj))
    this.localStorage=JSON.parse(localStorage.getItem('localStorage'))
    sessionStorage.setItem("sessionStorage",JSON.stringify(obj2))
    this.sessionStorage=JSON.parse(sessionStorage.getItem("sessionStorage"))

路由传参

params

router-link形式传参【在路径中显示参数，刷新页面参数不丢失】、

//配置路由
path:'/path/:id'
 
//传递方式，在path后面跟上对应的值

  
//获取参数
$route.params.id
 
//传递后形成的路径，刷新页面，参数不丢失
/path/id值

编程式导航形式传参，通过path匹配路由【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'
 
//传递方式，通过path匹配路由，且在path后面跟上对应的值
this.$router.push({
  path: `/path/${id}`
})
 
//获取参数
$route.params.id
 
//传递后形成的路径，刷新页面，参数不丢失
/path/id值

编程式导航形式传参，通过name匹配路由【不在路径中显示参数，刷新页面参数丢失】

//传递方式,通过name匹配路由
this.$router.push({
  name: "name", //路由配置中的name
  params:{
    id:222
  }
});
 
//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数丢失
/path

query

router-link形式传参【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式

//或者

 
//获取参数
$route.query.name
 
//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

编程式导航形式传参，通过path匹配路由【在路径中 ？后面显示参数，刷新页面参数不丢失】

this.$router.push({
  path:'/path',
  query: {
    id:'123'
  }
})
 
//获取参数
$route.query.name
 
//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

编程式导航形式传参，通过name匹配路由【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式，通过name匹配路由
this.$router.push({
  name:'name',//路由配置中的name
  query: {
    id:'123'
  }
})

 
//获取参数
$route.query.name
 
//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

总结

query和params分别都有三种形式可以传参：

    router-link形式

    通过path匹配路由的编程式导航形式

    通过name匹配路由的编程式导航形式

而这其中只有params方式  的 通过name匹配路由的编程式导航形式 不会在路径中带有参数（且刷新页面参数丢失），其他都会带有参数值（刷新页面参数不丢失）

swiper组件封装

全局引入   注册使用

import Carsouel from './components/Carsouel/Carsouel.vue'

Vue.component(Carsouel.name, Carsouel)