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 ...
随机推荐
- Git版本控制器的使用
首先介绍一下什么是Git:git是目前最流行的版本控制系统,属于分布式版本控制器. 使用Git前先要在GitHub创建代码仓库,或者获取你要应用的GitHub的链接地址. 创建GitHub仓库这里就不 ...
- SAP GUI 750 安装包 及 补丁3 共享
SAP GUI 750 安装包 及 补丁3 共享 链接: https://pan.baidu.com/s/1hstkfUs%20 密码: ggbz -------------------------- ...
- webpack踩坑之旅
1.安装webpack失败问题 错误原因: 这主要是我以普通用户的身份进行webpack的全局安装,权限不够. [普通用户] 说白了就是通过运行window+r+cmd进入的命令行 解决方式: 用管理 ...
- kafak集群安装-转
前言 最近在利用Spark streaming和Kafka构建一个实时的数据分析系统,对图书阅读数据进行分析,做实时推荐.Spark Streaming 模块是对于 Spark Core 的一个扩展, ...
- lucene构建同义词分词器
lucene4.0版本号以后 已经用TokenStreamComponents 代替了TokenStream流.里面包含了filter和tokenizer 在较复杂的lucene搜索业务场景下,直接网 ...
- 发红包android
立即春节,写个应景的控件 思路分析 1.红包沿着不同的轨迹由上往下运动 2.当手指捕获到一个红包,红包停止原先的运动,能够随着手指的滑动做跟手操作 3.当手指动作停止后,红包放大 4. ...
- 剑指offer面试题14-调整数组顺序使奇数位于偶数前面
题目: 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得全部奇数位于数组的前半部分.全部偶数位于数组的后半部分. 前后分的这个.,让我想起来高速排序.好吧,就用这个做. 考虑到了排序的可扩 ...
- 在java项目中使用webservice
今天学习webservice,主要参考了网络上的一些文章. 1.关于原理的介绍:个人认为这篇文章写得不错了,戳这里. 2.关于demo的编写:个人认为这篇文章很简洁,也能运行成功,戳这里. 按照上面那 ...
- Elasticsearch短语搜索——match_phrase
找出一个属性中的独立单词是没有问题的,但有时候想要精确匹配一系列单词或者短语 . 比如, 我们想执行这样一个查询,仅匹配同时包含 "rock" 和 "climbing&q ...
- 字符设备 Vs. 块设备 Character Device Vs. Block Device
字符设备是指驱动发送/接受单个字符(例如字节)的设备. 块设备是指驱动发送/接受整块数据(例如512个字节为一个块)的设备. 常见的字符设备:串口,并口,声卡. 常见的块设备:硬盘(最小读取单位为扇区 ...