vue的一些小点

1.想要在组件上使用原生事件 就必须在事件后面加上.native

例子

  <BackTop @click.native="backClick"></BackTop>

2. 使用ref属性能够拿到子组件下面的prototype

先写给一个ref属性

给一个按钮组件绑定事件

通过访问refs.scroll来访问scroll组件内的值

这是在scroll组件内的数据

3.设置图片加载完的事件

<img src="1.jpg" @load="imgLoad>
//接下来在method中定义imgLoad要执行什么

4.图片懒加载

1.安装插件

npm install vue-lazyload --save-dev

2.引入该插件

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {     loading: require('img/loading.png'),//加载中图片，一定要有，不然会一直重复加载占位图     error: require('img/error.png')  //加载失败图片});

3.修改图片显示方式为懒加载
img

<img v-lazy="'/static/img/' + item.productImage" :key="'/static/img/' + item.productImage"> //将 :src 属性直接改为v-lazy, 

background-image

<div style="width:100px;height:100px;" v-lazy:background-image="{src: item.imgpath}"></div>

5.组件有没有显示在页面中的生命周期函数
当组件在当前页面中有显示的话 那么activated就会显示
当组件在当前页面中没有显示的话 那么deactivated就不会显示

 activated() {
    console.log('activated')
  },
  deactivated() {
    console.log('deactivated')
  },