<p><code></p> <h2 id="articleHeader0">vue今天做的项目有些知识点还是有必要整理一下,并要掌握的。</h2> <h4>图片懒加载 vue-lazyload</h4> <p>首先先看一下原理<br /><span class="img-wrap"><img data-src="/img/bVYSuU?w=818&amp;h=402" src="/img/bVYSuU?w=818&amp;h=402" alt="图片描述" title="图片描述" style="cursor: pointer; display: inline;"></span></p> <p>其实这个没必要一下看懂,留着以后慢慢看。但是下边的原理简述大家估计可以看得明白些</p> <p><strong>原理简述</strong></p> <p>1.vue-lazyload是靠指令来实现懒加载的,通过在Html里加入v-lazy指令:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div v-lazy = '图片路径'> <div>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">v-lazy</span> = <span class="hljs-string">'图片路径'</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span></code></pre> <p>2.指令被bind时会创建一个listener,并将其添加到listener queue里面, 并且搜索target dom节点,为其注册dom事件(如scroll事件)</p> <p>3.上面的dom事件回调中,会遍历 listener queue里的listener,判断此listener绑定的dom是否处于页面中perload的位置,如果处于则加载异步加载当前图片的资源</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display:inline-table;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><ins id="aswift_4_anchor" style="display:block;border:none;height:175px;margin:0;padding:0;position:relative;visibility:visible;width:697px;background-color:transparent;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>4.同时listener会在当前图片加载的过程的loading,loaded,error三种状态触发当前dom渲染的函数,分别渲染三种状态下dom的内容</p> <p><strong>属性key和它的值</strong></p> <p>如图所示,都是它的一些属性,通过不同的属性来实现它的变化,当然这里属性是可以选填的</p> <p><span class="img-wrap"><img data-src="/img/bVYSwt?w=629&amp;h=305" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>这里加上一个try的知识点。try:数量 // 表示加载的个数</p> <p><strong>用法</strong></p> <p>首先下载 npm i -S vue-lazyload</p> <p>引入vue-lazyload</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import VueLazyload from 'vue-lazyload'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>Lazyload <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-lazyload'</span></code></pre> <p><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>.use(<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>Loazyload, {</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="属性:值 }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code>属性:值 }) </code></pre> <h4>无限滚动插件 vue-infinite-scroll</h4> <p><strong>基本知识点</strong></p> <p><span class="img-wrap"><img data-src="/img/bVYSxd?w=895&amp;h=337" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="图片描述" title="图片描述" style="cursor: pointer;"></span></p> <p>当然这个是在html标签里直接使用</p> <p><strong>应用</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import VueInfiniteScroll from 'vue-infinite-scroll'" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">import</span> VueInfiniteScroll <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-infinite-scroll'</span></code></pre> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Vue.use (VueInfiniteScroll)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs fortran"><code style="word-break: break-word; white-space: initial;">Vue.<span class="hljs-keyword">use</span> (VueInfiniteScroll)</code></pre> <p>在html中</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <div v-infinite-scroll=&quot;loadMore&quot; infinite-scroll-disabled=&quot;busy&quot; infinite-scroll-distance=&quot;20&quot;></div> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">v-infinite-scroll</span>=<span class="hljs-string">"loadMore"</span> <span class="hljs-attr">infinite-scroll-disabled</span>=<span class="hljs-string">"busy"</span> <span class="hljs-attr">infinite-scroll-distance</span>=<span class="hljs-string">"20"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_24919.html