程序员经验分享-hwhale

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

2023-11-12

目录

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'


 <div class="swiper-container" id="mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
              <img :src="item.imgUrl" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
 </div>


//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 父给子通讯

父组件  <child msg="hello!"></child>

子组件  props: ['msg'],

自定义事件 子给父通讯

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

<my-comp1 @xxx=“foo2”> < /my-comp1>

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

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

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

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

<my-comp1 ref="r1"></my-comp1>

alert(this.$refs.r1.msg)

全局事件总线 $bus 全能

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate(){                 //在初始化阶段前
		Vue.prototype.$bus = this   //配置全局总线，bus有总线的意思
	}
})
// 发送数据组件注册监听
methods: {
			sendStudentName(){        //提供发送数据
				this.$bus.$emit('hello',this.name)
	}
},
//监听执行获取数据
mounted() {
			this.$bus.$on('hello',(data)=>{      //绑定当前事件（这里以hello为例）
				console.log('我是School组件，收到了数据',data)
			})
		},
//移除监听
beforeDestroy(){        //收尾操作，销毁
			this.$bus.$off('hello')  //$off解绑当前组件所用到的事件
}

作用域插槽

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

<template>
  <div>
    <p>我是B组件</p>
    <slot>{{obj.firstName}}</slot>
  </div>
</template>
 
<script>
export default {
  name:'B',
  data(){
    return {
      obj:{
        firstName:'leo',
        lastName:'lion'
      }
    }
  }
}
</script>

接收

<template>
  <div class="main">
    <p>我是A组件</p>
    <B>
      <template v-slot="data">
        {{data.obj.lastName}}
      </template>
    </B>
  </div>
</template>
ElementUI里面的表格el-table，当改变某一列展示的字段时，我们经常使用：
<el-table-column>
  <template slot-scope="scope">
    <span>{{scope.row.xxx}}</span>
  </template>
</el-table-column>

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后面跟上对应的值
<router-link :to="`/path/${id}`"><router-link>
  
//获取参数
$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形式传参【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式
<router-link :to="{path:'/path',query:{id:'123'}}"><router-link>
//或者
<router-link :to="/path?id=123"><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)

   <div class="floorBanner" id="mySwiper">
              <Carsouel :list="List.carouselList"></Carsouel>
    </div>
<template>
  <div class="swiper-container" id="floor1Swiper" ref="cur">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="item in list" :key="item.id">
        <img :src="item.imgUrl" />
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  name: "Carsouel",
  props: ["list"],
  watch: {
    //监听bannerList的变化
    list: {
      immediate: true,
      //如果执行代表组件实例上有了数据 只能保证bannerlist数据已经有了，没有办法保证v-for执行完
      //v-for执行完结构才完整
      // Vue.nextTick 在下次dom更新循环结束之后 执行延迟回调在修改数据之后获取更新后的dom

      handler(newvalue, oldvalue) {
        this.$nextTick(() => {
          var mySwiper = new Swiper(this.$refs.cur, {
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: ".swiper-pagination",
              clickable: true, //点击小球切换
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
    },
  },
};
</script>

<style>
</style>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

电商平台 vue pc端

vuejs

javascript

json

电商平台项目------首页 的相关文章