web-前端總結vue生命週期和Mint-ui選擇器插件bug!

總結vue生命週期和Mint-ui選擇器插件遮罩層下頁面手觸滑動bug

vue的生命週期

1. beforecreate 在使用vue時都須要進行實例化，因此vue實例化時調用該函數 2. created 該函數是實例建立以後進行調用 3. beforeMount dom文檔渲染以前執行的函數 4. mounted dom文檔渲染完畢以後將要執行的函數 5. beforeupdate 組件更新以前 6. update 組件更新以後 7. beforeDstroy 組件銷燬以前 8. destroy 組件銷燬以後

vuex 專門針對vue的狀態管理容器

state 表示基本數據 要設置的全局訪問的state對象 //初始化一個數組或者變量 ...mapState //輔助函數 getters 從基本數據派生的數據 實時監聽state值的變化（最新狀態） ...mapGetters //輔助函數 mutations 提交更改數據的方法 同步！ 定義方法，傳參爲state， ...mapMutations //輔助函數 actions 像一個裝飾器，包裹mutations,使之能夠異步， 自定義觸發mutations裏的函數的方法
action函數接受一個與store實例具備相同方法和屬性的context對象 ...mapActions //輔助函數 moduls 模塊化Vuex 經過this.$store.dispatch執行actions中的commit觸發mutations裏面的方法,達到更新state的值。

計算屬性 computed //當一些數據須要根據其餘數據變化時，這時候就須要計算屬性 getter //默認 setter

Model-view viewModel Mvvm做爲

Mint-ui 日期選擇器插件遮罩層底部頁面鎖定 地址：www.jianshu.com/p/58c7c21d5… 模板：

<template>	

     <mt-datetime-picker ref="picker"
                    type="date"
                    :endDate="endDate"
                    :startDate="startDate"
                    v-model="pickerValue"
                    @confirm="handleConfirm"
                    @visible-change = "visbleChange">
                    
    </template>

	data () {
		return{
		 handler: function(e){
			e.preventDefault()
				}
				}
	},
        mehtods: {
        visbleChange (val) {
			if(val) {
				this.closeTouch()
				} else {
				this.openTouch()
				}
			},
複製代碼

/解決頁面層級相互影響滑動的問題/

closeTouch () {
              document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, {passive:false})//阻止默認事件
          },
          openTouch () {
              document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, {passive:false})//打開默認事件
          },
    },
    watch: {
          visible(val) {
            this.$emit('visible-change', val);
          }
        },複製代碼