VUE音樂(lè)播放器學(xué)習(xí)筆記(3) - vuex + ( router.beforeEach導(dǎo)航鉤子：攔截路由導(dǎo)航 ) + ( 不同設(shè)備寬度下，讓div寬高相等=設(shè)備寬度 ) + ( v-bind:style=""綁定樣式屬性 ) + ( this.$router.push()和this.$router.back() ) + (better-scroll的封裝，總結(jié) ) + ( watch 和 vm.$watch 觀察者 ) + ( 事件修飾符 和 v-on:click.once=""事件只觸發(fā)一次 ) + ( .snyc修飾符 )

(1) export 和 export default 的區(qū)別

  • export ( import ) 可以有多個(gè)，export default ( 默認(rèn)導(dǎo)出 ) 只能有一個(gè)
  • export導(dǎo)出后引用需要加 { } ，export default則不需要

(2) vuex

state.js

功能：狀態(tài)數(shù)據(jù)

const state={
    singer:{}
}

export default state

mutation-types.js

功能：放置方法名，或者對(duì)mutations做封裝

export const SET_SINGER = 'SET_SINGER'

mutations.js

功能：操作state數(shù)據(jù)

import * as types from './mutation-types'

const matutaions = {
    [types.SET_SINGER] (state,singer){    // singer是傳入的參數(shù)
        state.singer=singer
    }
}

export default matutaions

getters.js

功能：獲取state里的數(shù)據(jù)，對(duì)state數(shù)據(jù)做映射

export const singer = state => state.singer

actions.js

功能：放異步操作

function findIndex(list, song) {
  return list.findIndex((item) => {
    return item.id === song.id
  })
}

index.js

功能： 入口文件

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'     // 打印motation的修改紀(jì)錄

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'
// 調(diào)試工具，在dev環(huán)境開(kāi)啟，在production環(huán)境關(guān)閉

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

存數(shù)據(jù) ( 到 vuex 的 state 中 )

singer.vue



import {mapMutations} from 'vuex'  // 語(yǔ)法糖


    methods: {

      selectSinger(singer) {     // 子組件派發(fā)的this.$emit('select',item),這個(gè)item就是singer
        this.$router.push({
          path: `/singer/${singer.id}`
        })
        this.setSinger(singer)   

        // 在...mapMutations中取得setSinger方法,singer數(shù)據(jù)作為參數(shù)傳給該方法，該方法改變state中的singer

      },
      _getSingerList() {
        getSingerList().then((res) => {
          if (res.code === ERR_OK) {
            this.singers = this._normalizeSinger(res.data.list)
          }
        })
      },

     ...mapMutations({
        setSinger: 'SET_SINGER'    // 映射成一個(gè)setSinger方法，對(duì)應(yīng)的是mutation-types.js中的常量
      })

    },

取數(shù)據(jù) ( 在 vuex 的 state 中 )

singer-detail.js



import {mapGetters} from 'vuex'

computed: {
      ...mapGetters([      // 擴(kuò)展到computed中，是一個(gè)數(shù)組
        'singer'
      ])
    }

(3) router.beforeEach((to, from, next) => { })

導(dǎo)航鉤子：作用是攔截導(dǎo)航

http://blog.csdn.net/wenyun_kang/article/details/70987840
https://segmentfault.com/a/1190000011140870
(詳細(xì))http://www.lxweimin.com/p/2578cc444b70
(詳細(xì))http://www.lxweimin.com/p/9798e3e63998

(1) 全局的鉤子router.beforeEach((to, from, next) => { } )

(2) 路由元信息 meta 字段，標(biāo)記是否需要檢測(cè)導(dǎo)航

  • 在router文件夾的index.js中
router/index.js



export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      redirect: '/recommend',
      meta: {                       // 路由元信息字段，表示是否需要檢測(cè)導(dǎo)航，true表示需要檢測(cè)
        needLogin: true
      }
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/recommend',
      name: 'recommend',
      component: Recommend
    },
    {
      path: '/singer',
      name: 'singer',
      component: Singer,
      meta: {
        needLogin: true
      },
      children: [{
        path: ':id',
        component: SingerDetail,
        meta: {
          needLogin: true
        }
      }]
    }
  ]
})
  • 在main.js中
main.js



router.beforeEach((to, from, next) => {
  if (to.meta.needLogin) {       // 如果目標(biāo)頁(yè)面需要登陸
    if (window.sessionStorage.data) {   // 但是同時(shí)已經(jīng)登陸過(guò)了，有session
      next()     // 直接跳轉(zhuǎn)到目標(biāo)頁(yè)面
    } else {
      alert('請(qǐng)先登錄')  
      next('/login')     // 否則跳轉(zhuǎn)到登陸頁(yè)面
    }
  } else {
    next()     // 如果不需要登陸，直接跳轉(zhuǎn)到目標(biāo)頁(yè)面
  }
})
  • 在login.js中
login.js



    methods: {
      login() {
        this.$http.post('https://www.easy-mock.com/mock/59d2fed09cabc90bb5e5c287/music/login', {
          phone: `${this.userName}`,
          password: `${this.passName}`
        }).then((response) => {
          console.log(response, 'response')
          console.log(response.data, 'response.data')

          if (response.data.data) {     // 如果提交成功，返回?cái)?shù)據(jù)存在
            let ses = window.sessionStorage
            let data = JSON.stringify(response.data.data)
            ses.setItem('data', data)    // 設(shè)置session，需要以字符串方式存儲(chǔ)
            this.$router.push('/')    // 跳轉(zhuǎn)路由
          } else {
            console.log('有錯(cuò)誤')
          }
        })
      }
    }

(4) v-bind:style='' '' 綁定樣式屬性

(1)


 <div class="bg-image" v-bind:style="bgStyle">    // 一般綁定到樣式屬性上,計(jì)算屬性

    computed: {
      bgStyle() {
        return {
          'background-image': `url(${this.bgImage})`,
           border: '1px solid red'
        }
        // return `background-image:url(${this.bgImage})`
      }
    }

-----------------------------------------------------------------------
(2)



// 這種方式不提倡，不直觀
 <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>  
  data: {  
    activeColor: 'red',  
    fontSize: 30  
  }

(5) 在不同寬度的設(shè)備上，讓圖片寬度為設(shè)備寬度，且高度和寬度相等

  • 注意：這種布局不要在class="bg-image"的div中直接寫(xiě)內(nèi)容(比如文字，這樣不會(huì)在div中)，需要在里面再加子div,在子div中寫(xiě)內(nèi)容，子div用絕對(duì)定位

<div class="bg-image" v-bind:style="bgStyle" ref="bgImage">
      <!--<div class="bg-image" v-bind:style="{color:red}">1-->
      <!--filter是一個(gè)加暗的浮層-->
      <div class="filter"></div>
    </div>



 .bg-image
      position: relative
      width: 100%
      height: 0
      padding-top: 100%
      transform-origin: top
      background-size: cover
      .filter
        position: absolute
        top: 0
        left: 0
        width: 100%
        height: 100%
        background: rgba(7, 17, 27, 0.4)

(6) promise 封裝axios請(qǐng)求

test2.js



import axios from 'axios'
// import Vue from 'vue'
// Vue.prototype.$http = axios

export function getSongs() {
  return axios.get('/api/artist/album?id=6452&limit=30').then((response) => {
    return Promise.resolve(response)
  })
}

-----------------------------------------------------------------------

search.vue



  import {getSongs} from 'api/test2.js'
  export default {
    created() {
      this.getData()
    },
    methods: {
      getData() {
        getSongs().then((data) => {
          console.log(data)
        })
      }
    }
  }

----------------------------------------------------------------

上面的/api是使用了代理，如下配置：

config/index.js


    proxyTable:{
      '/api': {
        target: 'http://localhost:3000/',
        changeOrigin: true,
        pathRewrite: {
          '^/api':''
        }
      }
    }

訪問(wèn) ('/api/artist/album?id=6452&limit=30') 
其實(shí)是：http://localhost:3000/api/artist/album?id=6452&limit=30

(7)

this.$router.push() 跳轉(zhuǎn)

this.$router.back() 返回

(1) this.$router.push


    selectSinger(singer) {     // 子組件派發(fā)的this.$emit('select',item),這個(gè)item就是singer
        this.$router.push({
          path: `/singer/${singer.id}`
        })
        this.setSinger(singer)           
        // 在...mapMutation中取得setSinger方法,singer數(shù)據(jù)作為參數(shù)傳給state
      },

--------------------------------------------

(2) this.$router.back()


  <div class="back" v-on:click="back">
      <i class="icon-back"></i>
    </div>

  methods: {
      back() {
        this.$router.back()
      }
    },

(8) watch 觀察者

例一：


<script>

var watchExampleVM = new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'I cannot give you an answer until you ask a question!'
  },

  watch: {
    // 如果 question 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
    question: function (newQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.getAnswer()
    }
  },

  methods: {
    getAnswer() {........}
  }
})

</script>


例二：


<span style="color:#006600;"><div id="app">  
    <input type="text" v-model:value="childrens.name" />  
    <input type="text" v-model:value="lastName" />  
</div>  
  
<script type="text/javascript">     
    var vm = new Vue( {  
        el: '#app',  
        data: {  
            childrens: {  
                name: '小強(qiáng)',  
                age: 20,  
                sex: '男'  
            },  
            tdArray:["1","2"],  
            lastName:"張三"  
        },  
        watch:{  
            childrens:{  
                handler:function(val,oldval){  
                    console.log(val.name)  
                },  
                deep:true//對(duì)象內(nèi)部的屬性監(jiān)聽(tīng)，也叫深度監(jiān)聽(tīng)  
            },  
            'childrens.name':function(val,oldval){  
                console.log(val+"aaa")  
            },//鍵路徑必須加上引號(hào)  
            lastName:function(val,oldval){  
                console.log(this.lastName)  
            }  
        },//以V-model綁定數(shù)據(jù)時(shí)使用的數(shù)據(jù)變化監(jiān)測(cè)  
    } );  
    vm.$watch("lastName",function(val,oldval){  
        console.log(val)  
    })//主動(dòng)調(diào)用$watch方法來(lái)進(jìn)行數(shù)據(jù)監(jiān)測(cè)</span>  
</script>  
</body>  


例三：


var v_assetManage_controller = new Vue({  
    el: '.LSee-index',  
    data: {  
        trendQueryTimeCtr: {  
            startTime: '',  
            endTime: ''  
        }  
    },  
    ready: function() {  
        //  
    },  
    methods: {  
        queryTrendData: function(){  
            //do some here  
        }  
    },  
    watch: {  
        'trendQueryTimeCtr.startTime': 'queryTrendData',  
        'trendQueryTimeCtr.endTime': 'queryTrendData'  
    }  
  
});

(8) vm.$watch( expOrFn, callback, [options] )

  • 參數(shù)：
    {string | Function} expOrFn
    {Function | Object} callback
    {Object} [options]
    {boolean} deep // 深度監(jiān)聽(tīng)，一般用于對(duì)象
    {boolean} immediate
    返回值：{Function} unwatch
  • 用法：
    觀察 Vue 實(shí)例變化的一個(gè)表達(dá)式或計(jì)算屬性函數(shù)。回調(diào)函數(shù)得到的參數(shù)為新值和舊值。表達(dá)式只接受監(jiān)督的鍵路徑。對(duì)于更復(fù)雜的表達(dá)式，用一個(gè)函數(shù)取代。
  • 選項(xiàng)：deep
    為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，可以在選項(xiàng)參數(shù)中指定 deep: true 。注意監(jiān)聽(tīng)數(shù)組的變動(dòng)不需要這么做。

// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做點(diǎn)什么
})

// 函數(shù)
vm.$watch(
  function () {
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做點(diǎn)什么
  }
)

(9) better-scroll的封裝

  • probeType
    類(lèi)型：Number
    默認(rèn)值：0
    可選值：1、2、3
    作用：有時(shí)候我們需要知道滾動(dòng)的位置。
    當(dāng) probeType 為 1 的時(shí)候，會(huì)非實(shí)時(shí)（屏幕滑動(dòng)超過(guò)一定時(shí)間后）派發(fā)scroll 事件；
    當(dāng) probeType 為 2 的時(shí)候，會(huì)在屏幕滑動(dòng)的過(guò)程中實(shí)時(shí)的派發(fā) scroll 事件；
    當(dāng) probeType 為 3 的時(shí)候，不僅在屏幕滑動(dòng)的過(guò)程中，而且在 momentum 滾動(dòng)動(dòng)畫(huà)運(yùn)行過(guò)程中實(shí)時(shí)派發(fā) scroll 事件。

  • momentum
    類(lèi)型：Boolean
    默認(rèn)值：true
    作用：當(dāng)快速在屏幕上滑動(dòng)一段距離的時(shí)候，會(huì)根據(jù)滑動(dòng)的距離和時(shí)間計(jì)算出動(dòng)量，并生成滾動(dòng)動(dòng)畫(huà)。設(shè)置為 true 則開(kāi)啟動(dòng)畫(huà)。
    翻譯：momentum是動(dòng)量的意思

  • refresh
    參數(shù)：無(wú)
    返回值：無(wú)
    作用：重新計(jì)算 better-scroll，當(dāng) DOM 結(jié)構(gòu)發(fā)生變化的時(shí)候務(wù)必要調(diào)用確保滾動(dòng)的效果正常。


<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from 'better-scroll'

  export default {
    props: {
      /**
       * probeType
       * 1 滾動(dòng)的時(shí)候會(huì)派發(fā)scroll事件，會(huì)截流。
       * 2 滾動(dòng)的時(shí)候?qū)崟r(shí)派發(fā)scroll事件，不會(huì)截流。
       * 3 除了實(shí)時(shí)派發(fā)scroll事件，在swipe的情況下仍然能實(shí)時(shí)派發(fā)scroll事件
       */
      probeType: {       // 類(lèi)型
        type: Number,
        default: 1
      },
      click: {         // 是否能點(diǎn)擊
        type: Boolean,
        default: true
      },
      listenScroll: {   // 是否派發(fā)滾動(dòng)事件
        type: Boolean,
        default: false
      },
      data: {         // 列表數(shù)據(jù)
        type: Array,
        default: null
      },
      pullup: {       // 是否派發(fā)滾動(dòng)到底部的事件，用于上拉加載
        type: Boolean,
        default: false
      },
      pulldown: {    // 是否派發(fā)頂部下拉的事件，用于下拉刷新
        type: Boolean,
        default: false
      },
      beforeScroll: {    // 是否派發(fā)列表滾動(dòng)開(kāi)始的事件
        type: Boolean,
        default: false
      },
      refreshDelay: {   // 當(dāng)數(shù)據(jù)更新后，刷新scroll的延時(shí)。
        type: Number,
        default: 20
      },
      scrollX: {  // 橫向滾動(dòng)
        type: Boolean,
        default: false
      }
    },
    mounted() {
      setTimeout(() => {
        this._initScroll()
      }, 20)
    },
    methods: {
      _initScroll() {
        if (!this.$refs.wrapper) {
          return
        }
        this.scroll = new BScroll(this.$refs.wrapper, {
          probeType: this.probeType,
          click: this.click,
          scrollX: this.scrollX
        })
        // 是否派發(fā)滾動(dòng)事件
        if (this.listenScroll) {
          let me = this
          this.scroll.on('scroll', (pos) => {
            me.$emit('scroll', pos)
          })
        }
        // 是否派發(fā)滾動(dòng)到底部事件，用于上拉加載
        if (this.pullup) {
          this.scroll.on('scrollEnd', () => {
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
              this.$emit('scrollToEnd')
            }
          })
        }
        // 是否派發(fā)頂部下拉事件，用于下拉刷新
        if (this.pulldown) {
          this.scroll.on('touchend', (pos) => {
            // 下拉動(dòng)作
            if (pos.y > 50) {
              this.$emit('pulldown')
            }
          })
        }
        // 是否派發(fā)列表滾動(dòng)開(kāi)始的事件
        if (this.beforeScroll) {
          this.scroll.on('beforeScrollStart', () => {
            this.$emit('beforeScroll')
          })
        }
      },
//      方法代理
      disable() {   // 作用：禁用 better-scroll，DOM 事件（如 touchstart、touchmove、touchend）的回調(diào)函數(shù)不再響應(yīng)。
        this.scroll && this.scroll.disable()
      },
      enable() {  // 作用：?jiǎn)⒂?better-scroll
        this.scroll && this.scroll.enable()
      },
      refresh() {  // 作用：重新計(jì)算 better-scroll，當(dāng) DOM 結(jié)構(gòu)發(fā)生變化的時(shí)候務(wù)必要調(diào)用確保滾動(dòng)的效果正常。
        this.scroll && this.scroll.refresh()
      },
      scrollTo() { // 作用：滾動(dòng)到指定的位置
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      scrollToElement() { // 作用：滾動(dòng)到指定的目標(biāo)元素
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      }
//      _watchData() {
//        setTimeout(() => {
//          this.refresh()
//        }, this.refreshDelay)
//      }
    },
    watch: {
      data() {
        setTimeout(() => {
          this.refresh()
        }, this.refreshDelay)
      }
//      'data': '_watchData' //觀察data的變化，當(dāng)data變化是執(zhí)行_watchData函數(shù)，上面的是直接執(zhí)行
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

</style>

(10) 事件修飾符

.stop : 阻止冒泡
.prevent : 阻止默認(rèn)事件
.capture
.self : 指定元素觸發(fā)（不包括子元素）
.once : 事件只執(zhí)行一次，特別之處：還能用在組件事件上

ps: 給組件添加原生事件，需要添加.naive

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁(yè)面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件偵聽(tīng)器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當(dāng)事件在該元素本身 (比如不是子元素) 觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>

(10) v-on:click.once="" 事件只觸發(fā)一次

  • 不像其它只能對(duì)原生的 DOM 事件起作用的修飾符，.once 修飾符還能被用到自定義的組件事件上。

<!-- 點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->

<a v-on:click.once="doThis"></a>

(11) .snyc修飾符


<comp :foo.sync="bar"></comp>

會(huì)被擴(kuò)展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當(dāng)子組件需要更新 foo 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：

this.$emit('update:foo', newValue)



       
      // (1) 父組件給子組件comp 傳遞一個(gè)foo同步屬性，值是bar
     // (2) 當(dāng)子組件想要改變foo屬性時(shí)，由于子組件不能修改父組件傳過(guò)來(lái)的任何數(shù)據(jù)，所以用.sync修飾符
    // (3)  當(dāng)子組件想要改變foo屬性時(shí)，向父組件派發(fā)一個(gè)'update:foo'事件，newValue為傳遞的數(shù)據(jù)
   // (4) 'update:foo'事件將foo的值改為從子組件傳過(guò)來(lái)的newValue值




rank-detail.vue




<sync class="sync" v-bind:bg.sync="bb" v-if="bb"></sync>


data() {
   return {
      bb: true
      }
    }

-----------------------------------------------------------------------------

sync.vue



 <div class="sync" v-on:click="goto" v-if="bb">
    這里是sync組件顯示內(nèi)容
  </div>



<script type="text/ecmascript-6">
  export default {
    props: {
      bb: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      goto() {
        this.$emit('update:bg', false)
      }
    }
  }
</script>
登陸頁(yè)面
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,511評(píng)論 25贊 708
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,251評(píng)論 4贊 61
  • 記得羅胖在跨年演講的國(guó)民總時(shí)間，現(xiàn)在各個(gè)商業(yè)現(xiàn)在搶奪的都是人們的時(shí)間，就是注意力。 如今商業(yè)中有兩種方式，一種是浪...
    平靜的力量閱讀 176評(píng)論 0贊 0
  • “如果你感覺(jué)到困惑，請(qǐng)不用擔(dān)心。這是冬眠后的一些副作用，我將會(huì)幫助您適應(yīng)生活。”就在老王連胡思亂想的力氣都沒(méi)有...
    王十三_8a1f閱讀 421評(píng)論 0贊 0
  • 新建文件 新建文件夾
    龐貝船長(zhǎng)閱讀 121評(píng)論 0贊 0