vue 自定义指令directive
//自定义指令: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}} {{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的更多相关文章
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令 数据传递
在项目开发过程中,难免会遇到各种功能需要使用Vue自定义指令--directive 去实现 .关于directive的使用方式这里就不做过多的介绍了,Vue官方文档中说的还是听明白的.今天讲讲在使用V ...
- vue从入门到进阶:自定义指令directive,插件的封装以及混合mixins(七)
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue自定义指令报错:Failed to resolve directive: xxx
Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- vue 自定义指令(directive)实例
一.内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href v-bind:class v-bind:title v-bind:bb 2.v-on:用于监听DOM事件: 例 ...
- vue自定义指令
Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
随机推荐
- SolrJ 复杂查询 高亮显示
SolrJ 复杂查询 高亮显示 上一章搭建了Solr服务器和导入了商品数据,本章通过SolrJ去学习Solr在企业中的运用.笔者最先是通过公司的云客服系统接触的Solr,几百万的留言秒秒钟就查询并高亮 ...
- 初识分布式计算:从MapReduce到Yarn&Fuxi
这些年,云计算.大数据的发展如火如荼,从早期的以MapReduce为代表的基于文件系统的离线数据计算,到以Spark为代表的内存计算,以及以Storm为代表的实时计算,还有图计算等等.只要数据规模 ...
- 五十个小技巧提高PHP执行效率(一)
在项目开发过程中,经常遇到了一些PHP处理程序性能底下的情况,程序运行在centos+nginx环境,虽然这个有很多的原因如:服务器本身配置,运行环境nginx服务,php-fpm配置等等,更多有一点 ...
- python源文件转换成exe问题解决贴
项目上做一个小工具,通过webservice接口实现配置下发.python文件调试通过了,想把它抓换成exe,网上查了下,得知有py2exe这个好用精简的小工具,本以为分分钟搞定的事情,结果经历了九转 ...
- 多线程编程学习笔记——async和await(一)
接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...
- Java设计模式之策略设计模式
1.什么是-策略设计模式 在软件开发中常常遇到这种情况,实现某一个功能有多种算法或者策略,我们可以根据环境或者条件的不同选择不同的算法或者策略来完成该功能.如查找.排序等,一种常用的方法是硬编码(Ha ...
- Android 从零搭建简单MVP Demo
首先简单介绍一下MVP的构成及优缺点: MVP的全称为Model-View-Presenter, Model提供数据(网络请求.数据存储等): View负责页面显示: Presenter负责逻辑的处理 ...
- Material使用03 MdCardModule模块、MdInputModule模块
需求:先需要增加一个登录模块 1 创建登录模块 ng g m testLogin 1.1 将共享模块导入到登录模块中 import { NgModule } from '@angular/core'; ...
- sphinx+reStructuredText制作文档
1 spinx简介 Sphinx 是一种文档工具,它可以令人轻松的撰写出清晰且优美的文档, 由 Georg Brandl 在BSD 许可证下开发. 新版的Python文档 就是由Sphinx生成的,并 ...
- Unity 3D游戏开发引擎:最火的插件推荐
摘要:为了帮助使用Unity引擎的开发人员制作更完美的游戏.我们精心挑选了十款相关开发插件和工具.它们是:2D Toolkit.NGUI.Playmaker.EasyTouch & EasyJ ...