Vue ベースの遅延読み込みプラグイン vue-view-lazy の使用方法

今回は、Vueベースの遅延読み込みプラグインvue-view-lazyの使い方と、Vueベースの遅延読み込みプラグインvue-view-lazyを使用する際の注意点を紹介します。次に実際のケースを見てみましょう。

目的: 写真やその他のリソースを可視領域に入れてロード

インストールして使用する

1. distディレクトリにvue-view-lazy.min.jsを直接ダウンロードして使用する

2. npmを使用 インストール

直接使用

<p id="app">
  <span v-view-lazy @model="handleModel"></span>
</p>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="./dist/vue-view-lazy.min.js"></script>
<script>
  Vue.use(vViewLazy.default,{});
  new Vue({
    el:'#app',
    data:{
      msg:'数据'
    },
    methods:{
      handleModel(){
        console.log('出现了');
      },
    },
  })
</script>

npm:

$ npm install --save-dev vue-view-lazy

vue-view-lazy

.mainファイルを導入

import vView from 'vue-view-lazy'
Vue.use(vView,{
  error:'../../static/images/loading.png',
  loading:'../../static/images/loading.gif',
});

lazy reading photos

.v ueファイル

rreee

データ

.vue ファイルの遅延読み込み

<template>
  <ul id=&#39;img&#39;>
    <li class="in" v-for="(item,i) in imgs" :key="i">
      <img src="#" alt="图片" v-view-lazy="item.src">
    </li>
  </ul>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        imgs:[
          {src:'../../static/images/img1.jpg'},
          {src:'../../static/images/img2.png'},
          {src:'../../static/images/img2.jpg'},
          {src:'../../static/images/img3.jpg'},
          {src:'../../static/images/img4.jpg'},
          {src:'../../static/images/img5.jpeg'}, 
        ]
      }
    },
    mounted(){
    },
  }
</script>
<style scoped>
  ...
</style>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue でスワイパーを使用する方法

Angular ネットワークリクエストをカプセル化する方法

以上がVue ベースの遅延読み込みプラグイン vue-view-lazy の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。