Vue的学习Ⅹ（mixin与extend、fastclick、图片懒加载、单位转换插件）

一、mixin与extend

mixin

let mixin = {							// 定义一个mixin
  data() {								// 混入mixin，也可以混入methods、components等等
	return {
	  name: ''
	}
  },
  created: function () { console.log(1) }
}

let vm = new Vue({
  created: function () { console.log(2) },
  mixins: [mixin]						//在Vue实例上面挂载mixin
})
// => 1
// => 2

mixin的作用：为了减少不同的组件里面的重复代码
执行顺序：mixin里面的钩子函数会比原Vue实例对象里面的钩子函数先执行

extend

extend目的：允许声明扩展另一个组件，而无需使用 Vue.extend，这主要是为了便于扩展单文件组件

var CompA = { ... }

// 无需调用 `Vue.extend` 来继承 CompA，使用Vue里面的extends即可
var CompB = {
  extends: CompA,
  ...
}

可以参考官网的mixin
或者另一个官网的mixin

二、fastclick

fastclick可以解决移动端300ms的点击延迟

/*fastclick安装*/
npm install fastclick --save

/*以下的操作是在main.js里面完成的*/
/*导入*/
import FastClick from 'fastclick'
/*调用attach方法*/
FastClick.attach(document.body);

参考ntt小小图
来自：https://blog.csdn.net/ningtt/article/details/74625629

也可以查看github上面的fastclick

三、图片懒加载

图片懒加载：图片需要显示在屏幕上时，再加载

插件：vue-lazyload

安装

npm i vue-lazyload -S

main.js:

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

// or with options
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: require('dist/loading.gif'), 		// 注意这里是require，因为require可以加载图片，而import是不行的
  attempt: 1
})

new Vue({
  el: 'body',
  components: {
    App
  }
})

template:

<ul>
  <li v-for="img in list">
    <img v-lazy="img.src" >				// 需要把img标签的src属性改为v-lazy
  </li>
</ul>

一些其他的选项：

以上参考github上面的hilongjw/vue-lazyload
来源：https://github.com/hilongjw/vue-lazyload

四、单位转换插件

postcss-px-to-viewport：

/*安装*/
npm install postcss-px-to-viewport --save


/*根目录下创建一个 postcss.config.js 文件*/
module.exports = {
    plugins:{
      autoprefixer:{},
      "postcss-px-to-viewport":{
      unitToConvert: 'px', 				// 需要转换的单位，默认为"px"
      viewportWidth: 375, 				// 视窗的宽度，对应的是我们设计稿的，iPhone6的宽度
      viewportHeight: 1334,				// 视窗的高度，根据375设备的宽度来指定，一般指定667，也可以不配置
      unitPrecision: 13, 				// 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
      propList: ['*'], 					// 能转化为vw的属性列表
      viewportUnit: 'vw', 				// 指定需要转换成的视窗单位，建议使用vw
      fontViewportUnit: 'vw', 			// 字体使用的视口单位
      selectorBlackList: ['.ignore', '.hairlines'], 	// 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1, 				// 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值	
      mediaQuery: false, 				// 允许在媒体查询中转换`px`
      replace: true, 					// 是否直接更换属性值，而不添加备用属性
      exclude: [
        /RightBar/,
        /gotop.vue/,
      ], 								// 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
      landscape: false, 				// 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
      landscapeUnit: 'vw', 				// 横屏时使用的单位
      landscapeWidth: 1134 				// 横屏时使用的视口宽度
        },

    }
}

来自Komorebi_
原文链接：https://juejin.im/post/5d415603e51d4561d044cc51

px2rem-loader：

可查看链接丑小喵喵
来源：https://blog.csdn.net/qq_39851888/article/details/100049651

题外话：Vue里面的created是创建完Vue对象时触发，mounted是挂载完DOM对象（此时的img不一定会加载完）时触发，updated是数据更新后是触发

本文只用于个人学习与记录