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 ...
随机推荐
- Scala入门系列(四):Map & Tuple
Map 创建Map // 创建一个不可变的Map scala> val ages = Map("Leo" -> 30, "Sparks" -> ...
- KD-tree详解
转载自:http://blog.csdn.NET/zhjchengfeng5/article/details/7855241 首先来一个问题: 给定平面上一个点集 E ,还有一个定点 V ,怎么在一群 ...
- Batch Normalization
一.BN 的作用 1.具有快速训练收敛的特性:采用初始很大的学习率,然后学习率的衰减速度也很大 2.具有提高网络泛化能力的特性:不用去理会过拟合中drop out.L2正则项参数的选择问题 3.不需要 ...
- tcpdum使用详解
http://starsliao.blog.163.com/blog/static/89048201062333032563/ TCPdump抓包命令 tcpdump是一个用于截取网络分组,并输出 ...
- 用shell制作IP脚本
vim ip.sh #!/bin/bashread -p "eth:" eread -p "ip:" ip1read -p "netmask:&qu ...
- VisualStudio程序运行后控制台窗口一闪就没了
这个虽然是千查万查出来的,但也不是原创的.希望对大家有所帮助. 方案一:网上最常见的解决方案是,在程序结尾的 return 0; 之前加 system("pause") 或 get ...
- Jenkins具体安装与构建部署使用教程
Jenkins是一个开源软件项目.旨在提供一个开放易用的软件平台,使软件的持续集成变成可能. Jenkins是基于Java开发的一种持续集成工具,用于监控持续反复的工作,功能包含:1.持续的软件版本号 ...
- Node.js显示页面
首先我们先要下载并安装Nodejs,然后进入Node.js中安装supervisor, npm -g install supervisor -g表示全局模式 (无论windows哪一个用户登陆都可以使 ...
- time模块整理
time模块中包含的方法 time() -- 返回当前系统的时间戳clock() -- 在UNIX系统上,它返回的是"进程时间",它是用秒表示的浮点数(时间戳). 而在WINDOW ...
- spring boot + druid + 封装JdbcTemplate
本源码内容如下: spring boot项目 用的druid连接池 druid监控页面配置 数据操作用spring jdbctemplate 进一步封装spring jdbctemplate支持用对象 ...