从无到有构建vue实战项目（八）

十六、vue-lazyload的使用

1. 首先，我们需要下载vue-lazyload包：

   npm i vue-lazyload -S

2. 下载好之后，我们将它引入到自己的项目：

   //main.js
   //引入图片懒加载
   import VueLazyload from 'vue-lazyload'
   //vue-lazyload配置
   Vue.use(VueLazyload, {
     preLoad: 1.3,
     //发生错误时显示的图片
     error: require("./assets/error.gif"),
     //加载过程中用到的图片
     loading: require("./assets/loading.gif"),
     attempt: 1
   })

   1. 需要注意的一点是，由于webpack打包机制，和js编译原因，在动态引入图片时，要选择require方式，require 是 AMD规范引入方式,如果不用require引入，代码运行到此处时，只会将图片路径识别为普通字符串，而用require方式，则代码运行到此处时则会解析该字符串，并将解析值赋给该对象或者变量

3. 然后在需要用到懒加载的img标签上，将:src替换为v-lazy，然后加上:key,其中v-lazy和:key的参数一样，然后就可以看到效果了

十七、对element-ui日历的修改以及实现签到功能

1. 创建一个组件，calendar.vue，该组件为子组件，然后将其引入父组件forum.vue

2. calendar.vue代码如下：

3. forum.vue代码如下：

   ...
   每日签到
   
   ...
   post: {
           dialogCalendar: false,
         }
   ...
   methods: {
   //签到
       checkIn: function() {
         this.post.dialogCalendar = !this.post.dialogCalendar;
         console.log(this.post.dialogCalendar)
       },
       //通过接收子组件传值来改变父组件数据
       changeDialog: function(data) {
         this.post.dialogCalendar = data;
         console.log(data)
       }
   }

4. 需要注意的一点是，因为父传子是单向数据流，那么当父子共用的值在子组件里发生变化时，会产生一个错误,所以在子组件值发生变化时，也要更新父组件值