1.VUE的swiper轮播步骤：
第一步：
安装依赖npm i swiper@5 --save
npm i vue-awesome-swiper@3 --save
第二步：
全局安装
在main.js里面操作：
import VueAwesomeSwiper from 'vue-awesome-swiper'
/* 在node_modules里面找到swiper文件夹里面的css文件 */
import 'swiper/css/swiper.css'
/* 使用Vue.use来注册一个轮播图插件 */
Vue.use(VueAwesomeSwiper)
★ 复制下面的代码在vscode中会出现word格式黄色空格，
需要自己删掉，建议手敲下面的代码
第三步：
在自己的组件文件夹中新建一个轮播图组件MySwiper.vue：
并复制以下代码到你的组件中：
<template>
<div id="app">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
swiperOptions: {
pagination: {
el: ".swiper-pagination",
},
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.$swiper;
},
}
};
</script>
<style>
.swiper-container {
width: 500px;
height: 400px;
border: 1px solid red;
}
</style>
把组件引用到app.vue文件中去：
2.mixins混入：
App.vue文件
<template>
<div id="app">
<router-link to="/about">跳转about</router-link>
<h1 @click="fn">{{msg}}</h1>
<router-view></router-view>
</div>
</template>
<script>
import mixinsA from '@/mixins/mixinsA.js'
export default {
name:"App",
/* 一下内容每个vue页面都需要使用 */
mixins:[mixinsA],
/* 混入对象的钩子将在组件自身钩子之前调用 */
created:function(){
console.log('app init...');
},
data:function(){
return{
msg:'app init...'
}
},
/* 数据对象在内部会进行递归合并,并在发生冲突时候以组件数据优先 */
methods:{
fn:function(){
alert('app init...')
}
}
}
</script>
<style>
</style>
main.js文件：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* 全局混入 谨慎使用 会影响每个单独创建的Vue实例
大多情况下*/
Vue.mixin({
created:function(){
console.log('全局init');
}
})
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
AboutView.vue文件：
<template>
<div class="about">
<h1>This is an about page</h1>
<h1 @click="fn">{{msg}}</h1>
</div>
</template>
<script>
import mixinsA from '@/mixins/mixinsA.js'
export default {
/* 一下内容每个vue页面都需要使用 */
mixins:[mixinsA]
}
</script>
src下新建文件夹mixins,再创建mixinsA.js文件：
/* 把公共内容放minxinsA.js文件中 */
export default {
data:function(){
return{
msg:'vue基础要学完啦'
}
},
created(){
console.log(this.msg);
},
methods:{
fn:function(){
alert(this.msg)
}
}
}
3.辅助函数操作模块数据：
App.vue文件：
<template>
<div id="app">
<h1>{{$store.state.modA.modaStr}}</h1>
<h1>{{$store.state.modB.modbStr}}</h1>
<h1>{{a}}</h1>
<h1>{{b}}</h1>
<h1>{{$store.getters['modA/strGetter']}}</h1>
<h1>{{getterA}}</h1>
<h1>{{getterB}}</h1>
<button @click="changeStr">修改modaStr的值</button>
<button @click="waitchange">异步修改modaStr的值</button>
</div>
</template>
<script>
/* 辅助函数的作用就是把vuex的方法解构到组件中,可以直接this.使用 */
/* import {mapState} from 'vuex' */
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
name:"App",
created(){
console.log(this);
console.log(this.a);
console.log(this.b);
},
computed:{
/* 第一种 */
/* 最简单使用数组的形式获取模块中state中的值 */
/* ...mapState('modA',['modaStr']),
...mapState('modB',['modbStr']) */
/* 使用对象的方式来获取模块中state的值,
好处在于如组件中的名字重复可以改名 */
/* 第二种 */
/* ...mapState({
a:state=>state.modA.modaStr,
b:state=>state.modB.modbStr,
}), */
/* 第三种 */
...mapState('modA',{
a:state=>state.modaStr,
}),
...mapState('modB',{
b:state=>state.modbStr,
}),
/* 最简单的使用数组的方式获取模块getters属性 */
/* ...mapGetters('modA',['strGetter']),
...mapGetters('modB',['getterStrb']), */
/* 使用对象的方式来获取模块的getters属性
好处在于可以修改getters属性的名字,避免和组件中的属性名字重复 */
...mapGetters('modA',{
getterA:'strGetter'
}),
...mapGetters('modB',{
getterB:'getterStrb'
}),
},
methods:{
changeStr(){
/* this.$store.commit('modA/CHANGESTR','坚持学VUE啊') */
/* this.CHANGESTR('键盘敲烂') */
this.fn1('键盘敲烂')
},
waitchange(){
/* this.$store.dispatch('modA/waitfnStr','坚持学前端啊') */
/* 第一种 */
/* this.waitfnStr('我也不知道说什么了') */
/* 第二种 */
/* this.wait1('亚索,接好了') */
/* 第三种 */
this['modA/waitfnStr']('德玛西亚')
},
/* 第一种 */
/* ...mapMutations('modA',['CHANGESTR']), */
/* 第二种 */
/* 利用对象的方法解构出modA中的 Mutations 防止命名和组件方法重复*/
/* mapActions 利用数组的方式解构出modA中的actions方法 waitfnStr */
...mapMutations('modA',{
fn1:'CHANGESTR'
}),
/* 第一种 */
/* ...mapActions('modA',['waitfnStr']) */
/* 第二种 */
/* ...mapActions('modA',{
wait1:'waitfnStr'
}), */
/* 第三种 */
...mapActions([
'modA/waitfnStr' //就等于 this['modA/waitfnStr']()
])
}
}
store下index.js文件：
/* import { set } from 'core-js/core/dict'; */
import Vue from 'vue'
import Vuex from 'vuex'
/* 先把各个模块导入进来 */
import modA from '@/store/modules/ModA.js'
import modB from '@/store/modules/ModB.js'
Vue.use(Vuex)
/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。
它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。 */
/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,
Vuex将会成为自然而然的选择 */
/* 导出一个Vuex实例化对象 */
export default new Vuex.Store({
/* state是用来存储组件中的数据的 */
state: {
},
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
getters: {
},
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
mutations: {
},
/* actions是用来调后台接口的并commit提交一个mutations */
actions: {
},
/* 可以使用modules把vuex分模块 */
/* 分模块实现数据集中管理 */
/* 在 modules 中把模块名注释一下*/
modules: {
modA:modA,
modB:modB
}
})
store下创建modules文件夹,创建ModA.js文件：
/* 模块的局部状态 */
/* 箭头函数如果想返回对象需要使用()包一下不能直接返回{} */
const state = ()=>({
modaStr:'我是模块A的数据'
})
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
const getters= {
strGetter:function(state){
console.log(state);
return state.modaStr + 'getter'
}
}
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
const mutations= {
CHANGESTR(state,payload){
state.modaStr = payload
}
}
/* actions是用来调后台接口的并commit提交一个mutations */
const actions= {
waitfnStr({commit},data){
setTimeout(()=>{
commit('CHANGESTR',data)
},1000)
}
}
/* 可以使用modules把vuex分模块 */
const modules={
}
export default {
/* 保证模块之间的数据独立运行,不互相影响 */
namespaced:true,
state,
getters,
mutations,
actions,
modules
}
创建ModB.js文件：
const state = ()=>({
modbStr:'我是模块B的数据'
})
/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */
/* 类似于计算属性 */
const getters= {
getterStrb:function(state){
return state.modbStr+'getter'
}
}
/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */
const mutations= {
}
/* actions是用来调后台接口的并commit提交一个mutations */
const actions= {
}
/* 可以使用modules把vuex分模块 */
const modules={
}
export default {
/* 保证模块之间的数据独立运行,不互相影响 */
namespaced:true,
state,
getters,
mutations,
actions,
modules
}
