目录
http://mockjs.com///引入数据 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 })
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',
},
}) swpier实例 如果存在异步请求结构还不完整不能在mounted生成swiper实例
使用watch监听加nextTick解决
watch监听数据的变化，然后拿到最新dom
Vue.nextTick 在下次dom更新循环结束之后 执行延迟回调在修改数据之后获取更新后的dom
父组件 <child msg="hello!"></child>
子组件 props: ['msg'],
父组件 在子组件标签上使用 @自定义事件名=‘父组件里面的方法名’
<my-comp1 @xxx=“foo2”> < /my-comp1>
子组件 内容通过事件触发 使用 this.$emit(‘自定义事件名’,‘值’)传递数据
1.直接放在标签中获取元素节点
2.放在组件中获取组件对象
<my-comp1 ref="r1"></my-comp1>
alert(this.$refs.r1.msg)
//创建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>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,
}),
},ref为子组件指定一个索引名称，通过索引来操作子组件；
this. $parent可以直接访问该组件的父实例或组件；
父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。
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"))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
//传递后形成的路径，刷新页面，参数丢失
/pathrouter-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匹配路由的编程式导航形式 不会在路径中带有参数（且刷新页面参数丢失），其他都会带有参数值（刷新页面参数不丢失）
全局引入 注册使用
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>