2017-vue

vue知识点

生命周期：

beforecreated：el 和 data 并未初始化 
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成挂载
beforecreate : 举个栗子：可以在这加个loading事件 
created ：在这结束loading，还做一些初始化，实现函数自执行 
mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeDestory： 你确认删除XX吗？ destoryed ：当前组件已被删除，清空相关内容

过滤器filter

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

组件component

import VueAudio from '@/components/audio'

components:{VueAudio}

方法methods

methods:{
    upMp(){
      console.log('123456)
    }
}

监控变化watch

watch:{
    $route(to,from){ //导航发生变化，$route也就是会改变
      //头部展示
      if(to.meta.header==false){
        this.headerStatic = false
      }else{
        this.headerStatic = true
      }
    }
  }

 

axios请求

axios({
      method: 'post',
      baseURL: url,
      headers: {Authorization:"Bearer "+token},
      data: data
    }).then((res) => {
      console.log(res)
    }).catch((err) => {
      console.log(err)
    })

router路由

　　{
　　　　path: '/',
　　　　component: login,
　　　　meta:{index:2,footer:true,header:true,title:'登录'}
　　}

router.beforeEach((to,from,next) => {
    if(to.matched.some( m => m.meta.auth)){
        // 对路由进行验证
        if(store.state.login) { // 已经登陆
            next()
        }else{
            next('/login')
          }
    }else{
      next()
    }
})

router.afterEach(function (to) {
	document.documentElement.scrollTop = document.body.scrollTop =0;
})

　　

Vuex：共享数据

        // action
	login({dispatch,commit},value){
		return commit(LOGIN,value);
	},
        //mutation
	[LOGIN](state,value) {
		state.token=value
		state.login=true
	},
        //在页面上调用
          computed: {
            ...mapState({
              loading: state => state.loading,
            })
          } 

　　

vue插件

VueLazyload：图片濑加载

// 图片缓加载
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/images/load.gif',
  loading: 'dist/images/load.gif',
  attempt: 1,
  listenEvents: [ 'scroll' ]
})

vueCropper：图片截取

canvas图片压缩：

upImg(e){
      let that=this
      let file = e.target.files[0]; //input 

      let reader = new FileReader();
      reader.readAsDataURL(file)
      reader.onload = function(e){ 
          var res = this.result
          var cvs = document.getElementById("myCanvas");
          var ctx = cvs.getContext("2d");
          var img = new Image();
          img.src = this.result;
          img.onload = function(){
            var width = img.width,height = img.height;
            var scale = width / height;
            var width1 = 720,height1 = parseInt(width1 / scale);
            ctx.clearRect(0,0,cvs.width,cvs.height);
            cvs.width = width1;
            cvs.height = height1;
            ctx.drawImage(img,0,0,width,height,0,0,width1,height1);
            var base64 = cvs.toDataURL("image/jpeg",0.7);
            that.imgUrl = base64
          }
      }

    }

　　

ElementUI：ui组件

vux:ui组件

mint:ui组件