目录
Mock
- 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>