Vue.js 使用技巧和一些坑

Vue axios

在 Vue 工程全局使用一些插件：

方法一: 原型

1. 在入口文件 import 插件，并通过Object.definePrototype()给 Vue 对象设置绑定 prototype 属性
2. 在每个 Vue 对象中直接访问这个属性。例如：

// 在 main.js ( entry.js ) 中
import moment from 'moment';
Object.defineProperty(Vue.prototype, '$moment', { value: moment });
// 在不同的 Vue 组件中访问 this.$moment()
export default {
  created() {
    console.log('The time is ' . this.$moment().format("HH:mm"));
  }
}

方法二：插件(类似vue-router的用法)

1. 封装自己的插件： plugin.js

export default {
  install: function(Vue) {
    // Do stuff
  }
}
// 举例，自己封装一个 axios 插件 axios.js
import axios from 'axios'
export default {
  install: function(Vue, name = '$http') {
    Object.defineProperty(Vue.prototype, name, { value: axios })
  }
}

1. 使用

// 在入口文件
import AxiosPlugin from './axios.js'
Vue.use(AxiosPlugin, '$axios')
new Vue({
  created() {
    console.log(this.$axios ? 'Axios works!' : 'Uh oh..')
  }
})

使用 axios 代替 $.ajax() 的坑

axios 中文文档

使用 $.ajax() 可以正常取到数据，但 axios 不行

报错信息：

“No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.”

出错原因是 axios 默认使用 json 格式来提交数据。而服务器可能要的是 formdata 格式

解决办法：使用 qs 插件处理data数据

axios({
    method: 'post',
    url: '/api',
    data: qs.stringify({
        ts: new Date().getTime(),
        method: 'index.getIndexInfo',
    }),
})

懒加载插件：v-lazy

插件的官方地址
$ npm install vue-lazyload --save
1. 在入口函数引用

// main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的比例 1.3个屏高？
  error: 'dist/error.png', // 下载出错时的图片
  loading: 'dist/loading.gif', // 等待图片
  attempt: 1 // 加载时间 1s？
})

2.在组件里面使用

1. img src 单个图片
<img v-lazy="imgUrl" />
2. div background-image 背景图片 
<div v-lazy:background-image="imgUrl"></div>

3.在 全局/组件 内监听加载事件，来刷新容器的高度

vm.$Lazyload.$on('loaded', function ({ el, src }) {
  console.log(el, src)
})
created: function () {
    this._getIndexInfo()
    this.$Lazyload.$on('loaded', () => {
        this.$refs.scroll.refresh()
    })
},
对于 scroll-list 组件：子组件监听 loaded 事件，并向父组件传递 'load' 事件
    this.$Lazyload.$on('loaded', () => {
        this.$emit('load')
    })
父组件在收到 'load' 时，触发刷新
    <component @load="loadImg"></component>
    loadImg: () => {
        this.$refs.scroll.refresh()
    }