自定义指令 VUE基础回顾7
vue除了有v-if等内置指令,我们也可以创建自定义指令。
例:我们可以实现一个可以每隔一秒闪烁的节点,类似于<blink>标签的行为。添加一个指令类似于添加一个过滤器,可以将他传入vue实例或组件的directives属性,或者使用vue.directive()注册一个全局指令。传入指令的名字以及包含钩子函数的对象,这些钩子函数会在设置了该指令的元素的生命周期的各个阶段运行。
<div v-blink>闪烁的盒子</div>
5个钩子函数
bind:会在指令绑定到元素时被调用。
inserted:在被绑定的元素被添加到父节点时被调用。和mounted一样,并不能保证元素被添加DOM上。可以使用this.$nextTick保证
update: 节点被更新时调用,但是该组件的子组件可能还没有更新
componentUpdated: 更新完成后调用
unbind: 用于指令拆除,指令被解绑调用。
以上钩子函数不必每次都调用所有钩子,他们是可选的。bind和update钩子常用,如果想同时调用,可以传入一个函数作为参数,这个函数会分别被这两个
Vue.directive('test',(el)=>{
//代码会被 bind update 两个钩子调用
})
钩子函数参数
在前面已经回顾了指令可以接收参数,修饰符和值。可以传入钩子函数的第二个参数---binding---来访问这些所有内容,binding对象会包含以下属性
例:v-my:example.one.two="test"
name: 属性指令的名称,不包含v-。所以name的值为my
value: 传入指令的值。在这个例子中它将是test表达式的计算值。{test:hello world},那么value值就是hello word
oldValue: 属性上次传入得值,它只有子在update和componentUpdated中使用,如果改变test得值update被调用,此时得value得值是新的
expression: 指令表达式的字符串形式,之后会对该表达式求值。在这个例子中它的值为test
arg:传入指令的参数 也就是example
modifiers: 属性是一个包含所有传入指令的修饰符对象 也就是 one tow。
Vue.directive('blink',{
bind(el,binding){
let isVisible = true
setInterval(()=>{
isVisible = !isVisible;
el.style.visibility = isVisible ? 'visible' : 'hidden';
},binding.value || )
}
})
上面的代码中添加了binding参数,并设置了计时时间。但是例子缺少了用于处理该指令值变化后更新组件的逻辑。要实现这一点需要将setInterval返回的ID存到元素的data属性上,然后再update钩子函数中清除旧定时器,之后再创建一个新的定时器。
自定义指令 VUE基础回顾7的更多相关文章
- vue中自定义指令vue.direvtive,自定义过滤器vue.filter(),vue过渡transition
自定义指令 默认设置的核心指令( v-model,v-bind,v-for,v-if,v-on等 ),Vue 也允许注册自定义指令.注意,在 Vue2.0 里面,代码复用的主要形式和抽象是组件——然而 ...
- 自定义指令directive基础用法
官方链接:http://doc.vue-js.com/v2/guide/custom-directive.html#simplest-directive-example 在main.js中注册自定义指 ...
- 一、VUE基础回顾1
1.v-if和v-show v-if 和v-show都可以显示和隐藏元素: 区别:(1)v-if初始值为false那么这个元素不会被渲染 ,v-show不管初始值为何值都会被渲染 (2)v-if是控制 ...
- VUE基础回顾2
1.响应式 vue修改了每个添加到data上的对象,当该对象发生变化时vue会收到通知,从而实现响应式.对象的每个属性都会被替换为getter,setter方法. 有两种方式实现data对象的监听 ( ...
- VUE基础回顾6
1.ref ref可以直接访问元素,而不需要使用querySelector或者其他dom节点的原生方法. <div ref = "box"></div> 在 ...
- 动画 VUE基础回顾8
过渡和动画 使用<transition> 组件包裹 例: <transition name="fade"> <div v-if="true& ...
- vue基础回顾 router
vue-router 1. 底层原理 hash 或者h5 histroy(有兼容性) 2. 使用的时候Vue需要引入VueRouter Vue.use(VueRouter) //VueRouter 底 ...
- vue 基础-->进阶 教程(2): 指令、自定义指令、组件
第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...
- Vue基础进阶 之 自定义指令
自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...
随机推荐
- OpenCV2 与opencv3 问题解决
本文链接:https://blog.csdn.net/ling_xiobai/article/details/79691785今天使用opencv运行一个脚本,但是出现cv2.cv.BoxPoints ...
- java中HashSet对象内的元素的hashCode值不能变化
因为不管是HashMap(或HashTable,还是HashSet),key值是以hashCode值存进去的,加入key值变了,将无法从集合内删除对象,导致内存溢出.
- vscode配置python之settings.json 智能提示
vscode编写Python的智能提示,搞了好久,参考了各种网上配置,如下,备份方便自己查找. { "workbench.iconTheme": "material-ic ...
- python初级(302) 6 对象(二)
一.复习 1.什么是对象 2.什么是类 3.什么是属性 4.什么是方法 5.创建一个dog类,dog的属性有颜色,方法有汪汪叫 随堂练习: class Dog: def __init__(self, ...
- xpath和contains模糊匹配
xpath可以以标签定位,也可以@任意属性: 如:以input标签定位:driver.find_element_by_xpath("//input[@id='kw']") 如:@t ...
- 配置Pods和containers--为Containers和Pods分配内存资源
指定内存请求和内存限制 要为容器指定内存请求,在容器的资源清单中使用resources:requests字段.要指定内存限制,使用resources:limits. memory-request-li ...
- (转载)极大似然估计&最大后验概率估计
前言 不知看过多少次极大似然估计与最大后验概率估计的区别,但还是傻傻分不清楚.或是当时道行太浅,或是当时积累不够. 这次重游机器学习之路,看到李航老师<统计学习方法>中第一章关于经验风险最 ...
- EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器出现no compatible source was found for this media问题的解决
背景分析 EasyDSS流媒体解决方案总体可划分成三个部分:前端视频源设备(PC.手机.摄像机)流媒体数据获取并即时回传.流媒体服务器端直播和录像与回放.客户端直播播放与录像检索回放.前端推流我们使用 ...
- mysql新建用户host使用%但使用localhost无法连接
今天新建了一个用户,权限也给了,host设置的为% 但是使用该用户连接时出现如下错误 查看用户 mysql> select host,user,password from mysql.user; ...
- PHP pdo单例模式连接数据库
PHP pdo单例模式连接数据库<pre><?php class Db{ private static $pdo; public static function getPdo () ...