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來注冊(cè)一個(gè)輪播圖插件 */
Vue.use(VueAwesomeSwiper)
★ 復(fù)制下面的代碼在vscode中會(huì)出現(xiàn)word格式黃色空格，
需要自己刪掉苹威，建議手敲下面的代碼
第三步：
在自己的組件文件夾中新建一個(gè)輪播圖組件MySwiper.vue：
并復(fù)制以下代碼到你的組件中：
<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文件中去：
need-to-insert-img
2.mixins混入：
App.vue文件
<template>
? <div id="app">
? ? <router-link to="/about">跳轉(zhuǎn)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",
? /* 一下內(nèi)容每個(gè)vue頁面都需要使用 */
? ?mixins:[mixinsA],
? ?/* 混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用 */
? ?created:function(){
? ?console.log('app init...');
? ?},
? ?data:function(){
? ?return{
? ? ?msg:'app init...'
? ?}
? ?},
? ?/* 數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行遞歸合并,并在發(fā)生沖突時(shí)候以組件數(shù)據(jù)優(yōu)先 */
? ?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
/* 全局混入 謹(jǐn)慎使用 會(huì)影響每個(gè)單獨(dú)創(chuàng)建的Vue實(shí)例
? ?大多情況下*/
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 {
/* 一下內(nèi)容每個(gè)vue頁面都需要使用 */
? mixins:[mixinsA]
}
</script>
src下新建文件夾mixins,再創(chuàng)建mixinsA.js文件：
/* 把公共內(nèi)容放minxinsA.js文件中 */
export default {
? ? data:function(){
? ? ? ? return{
? ? ? ? ? msg:'vue基礎(chǔ)要學(xué)完啦'
? ? ? ? }
? ? ? },
? ? ? created(){
? ? ? ? console.log(this.msg);
? ? ? },
? ? ? methods:{
? ? ? ? fn:function(){
? ? ? ? ? alert(this.msg)
? ? ? ? }
? ? ? }
}
3.輔助函數(shù)操作模塊數(shù)據(jù)：
App.vue文件：
<template>
? <div id="app">
? ? <h1>{{$store.state.modA.modaStr}}</h1>
? ? <h1>{{$store.state.modB.modbStr}}</h1>
? ? <h1>{{a}}</h1>
? ? <h1>{}</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>
/* 輔助函數(shù)的作用就是把vuex的方法解構(gòu)到組件中,可以直接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:{
? ? /* 第一種 */
? ? /* 最簡單使用數(shù)組的形式獲取模塊中state中的值 */
? ?/* ...mapState('modA',['modaStr']),
? ?...mapState('modB',['modbStr']) */
? ?/* 使用對(duì)象的方式來獲取模塊中state的值,
? ? 好處在于如組件中的名字重復(fù)可以改名 */
? ? ?/* 第二種 */
? ? /* ...mapState({
? ? ? a:state=>state.modA.modaStr,
? ? ? b:state=>state.modB.modbStr,
? ? }), */
? ? ?/* 第三種 */
? ? ...mapState('modA',{
? ? ? a:state=>state.modaStr,
? ? }),
? ? ...mapState('modB',{
? ? ? b:state=>state.modbStr,
? ? }),
? ? /* 最簡單的使用數(shù)組的方式獲取模塊getters屬性 */
? ?/* ...mapGetters('modA',['strGetter']),
? ?...mapGetters('modB',['getterStrb']), */
? ?/* 使用對(duì)象的方式來獲取模塊的getters屬性
? ? ? 好處在于可以修改getters屬性的名字,避免和組件中的屬性名字重復(fù) */
? ?...mapGetters('modA',{
? ? ? getterA:'strGetter'
? ?}),
? ?...mapGetters('modB',{
? ? ? getterB:'getterStrb'
? ?}),
? },
? methods:{
? ? changeStr(){
? ? ? /* this.$store.commit('modA/CHANGESTR','堅(jiān)持學(xué)VUE啊') */
? ? ? /* this.CHANGESTR('鍵盤敲爛') */
? ? ? this.fn1('鍵盤敲爛')
? ? },
? ? waitchange(){
? ? ? /* this.$store.dispatch('modA/waitfnStr','堅(jiān)持學(xué)前端啊') */
? ? ? /* 第一種 */
? ? ? /* this.waitfnStr('我也不知道說什么了') */
? ? ? /* 第二種 */
? ? ? /* this.wait1('亞索,接好了') */
? ? ? /* 第三種 */
? ? ? this['modA/waitfnStr']('德瑪西亞')
? ? },
? ? /* 第一種 */
? ? /* ...mapMutations('modA',['CHANGESTR']), */
? ? /* 第二種 */
? ? /* 利用對(duì)象的方法解構(gòu)出modA中的 Mutations 防止命名和組件方法重復(fù)*/
? ? /* mapActions 利用數(shù)組的方式解構(gòu)出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'
/* 先把各個(gè)模塊導(dǎo)入進(jìn)來 */
import modA from '@/store/modules/ModA.js'
import modB from '@/store/modules/ModB.js'
Vue.use(Vuex)
/* Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 + 庫贮乳。
它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，
并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化恬惯。 */
/* 如果需要構(gòu)建一個(gè)中單行單頁應(yīng)用,灰考慮如何更好的在組件外部管理狀態(tài),
? ?Vuex將會(huì)成為自然而然的選擇 */
/* 導(dǎo)出一個(gè)Vuex實(shí)例化對(duì)象 */
export default new Vuex.Store({
? /* state是用來存儲(chǔ)組件中的數(shù)據(jù)的 */
? state: {
? },
? /* getters計(jì)算組件中的數(shù)據(jù)的,可以對(duì)數(shù)據(jù)進(jìn)行二次加工類似于computer功能 */
? /* 類似于計(jì)算屬性 */
? getters: {
? },
? /* 在mutations中修改state中的值(修改state中的值要想留下記錄必須用mutations修改) */
? mutations: {
? },
? /* actions是用來調(diào)后臺(tái)接口的并commit提交一個(gè)mutations */
? actions: {
? },
? /* 可以使用modules把vuex分模塊 */
? /* 分模塊實(shí)現(xiàn)數(shù)據(jù)集中管理 */
? /* 在 modules 中把模塊名注釋一下*/
? modules: {
? ?modA:modA,
? ?modB:modB
? }
})
store下創(chuàng)建modules文件夾,創(chuàng)建ModA.js文件：
/* 模塊的局部狀態(tài) */
/* 箭頭函數(shù)如果想返回對(duì)象需要使用()包一下不能直接返回{} */
const state = ()=>({
? ? modaStr:'我是模塊A的數(shù)據(jù)'
? })
? /* getters計(jì)算組件中的數(shù)據(jù)的,可以對(duì)數(shù)據(jù)進(jìn)行二次加工類似于computer功能 */
? /* 類似于計(jì)算屬性 */
? 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是用來調(diào)后臺(tái)接口的并commit提交一個(gè)mutations */
? const ?actions= {
? ? waitfnStr({commit},data){
? ? ? ? setTimeout(()=>{
? ? ? ? ? ? commit('CHANGESTR',data)
? ? ? ? },1000)
? ? }
? }
? /* 可以使用modules把vuex分模塊 */
? const modules={
? }
? export default {
? ? ? /* 保證模塊之間的數(shù)據(jù)獨(dú)立運(yùn)行,不互相影響 */
? ? ? namespaced:true,
? ? ? state,
? ? ? getters,
? ? ? mutations,
? ? ? actions,
? ? ? modules
? }
創(chuàng)建ModB.js文件：
const state = ()=>({
? ? modbStr:'我是模塊B的數(shù)據(jù)'
? })
/* getters計(jì)算組件中的數(shù)據(jù)的,可以對(duì)數(shù)據(jù)進(jìn)行二次加工類似于computer功能 */
/* 類似于計(jì)算屬性 */
const getters= {
? getterStrb:function(state){
? ? return state.modbStr+'getter'
? }
}
/* 在mutations中修改state中的值(修改state中的值要想留下記錄必須用mutations修改) */
const mutations= {
}
/* actions是用來調(diào)后臺(tái)接口的并commit提交一個(gè)mutations */
const ?actions= {
}
/* 可以使用modules把vuex分模塊 */
const modules={
}
export default {
? ? /* 保證模塊之間的數(shù)據(jù)獨(dú)立運(yùn)行,不互相影響 */
? ? namespaced:true,
? ? state,
? ? getters,
? ? mutations,
? ? actions,
? ? modules
}
