//自定义指令:directive 的传参——可以数据也可以是字符串
Vue.directive('scroll', function (binding) {
window.addEventListener('scroll', function () {
if (document.body.scrollTop + window.innerHeight >= document.body.clientHeight-20) {
var fnc = binding;
fnc();
}
})
});

调用自定义指令:v-scroll="fn()"

<article class="library_list"  v-scroll="getMore">
<a href="article_read.jsp?id={{value.id}}" target="_blank" v-for="value in myData.data">
<dl class="border_bottom1_gray">
<dt class="pic_box"><img :src="value.imgUrl" /></dt>
<dd>
<p class="library_txt" v-cloak>{{value.title}}</p>
<p class="library_label"><span class="library_label_l " v-cloak>{{value.author}}&nbsp;&nbsp;{{value.ctime}}</span><span class="library_label_r" v-cloak>浏览量:{{value.pageView}}</span></p>
</dd>
</dl>
</a> <!--<p class="nodata_hint" v-show="myData.length==0">暂无数据……</p>--> </article>

vue 自定义指令directive的更多相关文章

  1. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  2. Vue自定义指令 数据传递

    在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...

  3. vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)

    一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...

  4. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  5. Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入

    前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...

  6. vue 自定义指令(directive)实例

    一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  v-bind:bb 2.v-on:用于监听DOM事件: 例 ...

  7. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  8. 每个人都能实现的vue自定义指令

    前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...

  9. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

随机推荐

  1. XSD详解二 - 简易元素、属性、内容限定

    一.XSD 简易元素 XML Schema 可定义 XML 文件的元素. 简易元素指那些只包含文本的元素.它不会包含任何其他的元素或属性. 1.什么是简易元素? 简易元素指那些仅包含文本的元素.它不会 ...

  2. mysql 有哪些索引

    Mysql支持哪几种索引 从数据结构角度 1.B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理 2.hash索引:a 仅仅能满足"=&quo ...

  3. Web 动画帧率(FPS)计算

    我们知道,动画其实是由一帧一帧的图像构成的.有 Web 动画那么就会存在该动画在播放运行时的帧率.而帧率在不同设备不同情况下又是不一样的. 有的时候,一些复杂或者重要动画,我们需要实时监控它们的帧率, ...

  4. rabbitmq(中间消息代理)在python中的使用

    在之前的有关线程,进程的博客中,我们介绍了它们各自在同一个程序中的通信方法.但是不同程序,甚至不同编程语言所写的应用软件之间的通信,以前所介绍的线程.进程队列便不再适用了:此种情况便只能使用socke ...

  5. 计算器的单元测试dome

    通过上一篇文章,Appium环境已经搭建好了,下面我们通过Python脚本来测试原生的计算器程序 --------------------------------------------------- ...

  6. 浏览器Agent大全 (含IE 11, Edge)

    Edge mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/51.0.27 ...

  7. Python2/3中的urllib库

    urllib库对照速查表 Python2.X Python3.X urllib urllib.request, urllib.error, urllib.parse urllib2 urllib.re ...

  8. JavaSE----基础语法(方法)

    1.8 方法 1.8.1方法的的定义 定义:完毕特定功能的代码块.在非常多语言里面有函数的定义,而在Java中函数被称为方法. 格式: 修饰符 返回值类型 方法名(參数类型 參数名1,參数类型 參数名 ...

  9. ZED-Board从入门到精通系列(八)——Vivado HLS实现FIR滤波器

    http://www.tuicool.com/articles/eQ7nEn 最终到了HLS部分.HLS是High Level Synthesis的缩写,是一种能够将高级程序设计语言C,C++.Sys ...

  10. Android从无知到有知——NO.1

    如期而至的软件设计大赛吹响了重生的号角.正如同我们的指导老师所说,这个暑假会影响你近几年的发展,也可能会决定你以后所走的道路. 是的.我身边就有非常好的样例,有些师哥师姐们常常跟我们说.软件大赛不仅使 ...