//自定义指令: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. springMVC+commons-fileupload上传文件大小限制异常

    异常信息: 严重: Servlet.service() for servlet [suibian] in context with path [/SpringMvcDemo3] threw excep ...

  2. 实践作业1:测试管理工具实践 Day3

    1.Vertrigoserv启动后,首先要配置apache,则需要修改监听端口,不要出现端口冲突2.配置mysql,在mysql console中输入密码vertrigo3.在浏览器中输入http:/ ...

  3. Yahoo网站性能优化的34条军规

    1.尽量减少HTTP请求次数 终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数,这是提高网页速 ...

  4. PL/SQL简单实现数据库的连接

    通常我们都会去选择 通过修改配置文件去实现数据库链接,方法如下:找到你orale 安装下的文件:instantclient_11_2\network\admin 修改的主要有三个地方:上面的命名随便起 ...

  5. 原生Js实现拖拽(适用于pc和移动端)

    效果: HTML和CSS部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. iKcamp团队制作|基于Koa2搭建Node.js实战(含视频)☞ 中间件用法

    中间件用法--讲解 Koa2 中间件的用法及如何开发中间件

  7. javaweb学习总结(六)——Servlet开发(二)(转)

    转载自 http://www.cnblogs.com/xdp-gacl/p/3763559.html 一.ServletConfig讲解 1.1.配置Servlet初始化参数 在Servlet的配置文 ...

  8. 网络协议之ipv6

    1. 地址分类 比較重要的主要有以下几种: 本地链路地址:用于链路之间相互通信 本地网站地址:用于子网内互相通信,类似于ipv4中的私有地址 全球单播地址:类似于ipv4中的公网地址 组播地址 2. ...

  9. spool命令、创建一个表,创建而且copy表,查看别的用户下的表,rowid行地址 索引的时候使用,表的增删改查,删除表,oracle的回收站

      1.spool命令 spool "D:\test.txt" spool off SQL> host cls 2.创建一个表 SQL> --条件(1):有创建 ...

  10. kotlin web开发教程【一】从零搭建kotlin与spring boot开发环境

    IDEA中文输入法的智能提示框不会跟随光标的问题 我用的开发工具是IDEA 这个版本的IDEA有一个问题: 就是中文输入法的智能提示框不会跟随光标 解决这个问题的办法很简单,只有在安装目录下把JRE文 ...