Vue(九)---自定义指令(directive )
1.无参数
自定义指令的方式：
1. 使用Vue.directive 来自定义
2. 第一个参数就是 指令名称 xart
3. el 表示当前的html dom对象
4. 在方法体内就可以通过 innerHTML style.color 等方式操控当前元素了
<body>
<div id="app">
<div v-xxx>
商店
</div>
</div>
<script type="text/javascript">
Vue.directive('xxx',function(el){
el.innerHTML = el.innerHTML + ' ------------ '
el.style.color = 'blue'
})
new Vue({
el:'#app'
})
</script>
</body>
2.有参数：
<body>
<div id="app">
<div v-xxx='{color:"red"}'>
商店
</div>
</div>
<script type="text/javascript">
Vue.directive('xxx', function (el,binding) {
el.innerHTML = el.innerHTML + '( ' + binding.value.color + ' )'
el.style.color = binding.value.color
})
new Vue({
el:'#app'
})
</script>
</body>
3.钩子函数：又叫做回调函数，或者事件响应函数。 指的是，一个指令在创建过程中，经历不同生命周期的时候，vue.js 框架调用的函数。
指令定义函数提供了几个钩子函数（可选）：
bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次， 指令与元素解绑时调用。
钩子函数参数
钩子函数的参数有：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
- name: 指令名，不包括
v-前缀。 - value: 指令的绑定值， 例如：
v-my-directive="1 + 1", value 的值是2。 - oldValue: 指令绑定的前一个值，仅在
update和componentUpdated钩子中可用。无论值是否改变都可用。 - expression: 绑定值的表达式或变量名。 例如
v-my-directive="1 + 1"， expression 的值是"1 + 1"。 - arg: 传给指令的参数。例如
v-my-directive:foo， arg 的值是"foo"。 - modifiers: 一个包含修饰符的对象。 例如：
v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
- name: 指令名，不包括
- vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在
update和componentUpdated钩子中可用。
<script src="https://how2j.cn/study/vue.min.js"></script>
<div id="div1">
<div v-xart:hello.a.b="message"> </div>
</div>
<script>
Vue.directive('xart', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '<br>' +
'value: ' + s(binding.value) + '<br>' +
'expression: ' + s(binding.expression) + '<br>' +
'argument: ' + s(binding.arg) + '<br>' +
'modifiers: ' + s(binding.modifiers) + '<br>' +
'vnode keys: ' + Object.keys(vnode).join(', ')
},
update: function (newValue, oldValue) {
// 值更新时的工作
// 也会以初始值为参数调用一次
},
unbind: function () {
// 清理工作
// 例如，删除 bind() 添加的事件监听器
}
})
new Vue({
el: '#div1',
data:{
message:'hello vue.js'
}
})
</script>
Vue(九)---自定义指令(directive )的更多相关文章
- Vue(九) 自定义指令
前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...
- vue之自定义指令directive
<template> <div> <input v-model="dir1" v-my-directive1="dir1"/> ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- 最简单的方式理解Vue的自定义指令与混合
vue.js 自定义指令 钩子函数:bindinsertedupdatecomponentUpdatedunbind 钩子函数完整实例:html: <div id="hook-argu ...
- vue 通过自定义指令实现 置顶操作；
项目需求:要求当前项目每个页面滑到超出一屏的距离时,出现 backTop 按钮,点击则回到最顶端:俗称置顶操作: 因为涉及到的页面较多,每个页面都加肯定显得重复累赘,最终想到了 Vue 的自定义指令 ...
- vue怎么自定义指令？？
最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大 <script> //指令钩子函数: /* bind 只调用一次,指令第一次绑定到元素的时调用 inserte ...
- vue中自定义指令
//vue中自定义指令 //使用 Vue.directive(id, [definition]) 定义全局的指令 //参数1:指令的名称.注意,在定义的时候,指令的名称前面,不需要加 v-前缀; 但是 ...
- Vue 3自定义指令开发
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 什么是指令(directive) 在Angular和Vue中都有Direct ...
随机推荐
- iOS中统计平台的使用
iOS腾讯Bugly使用 https://www.jianshu.com/p/f672e0d202ef iOS 百度统计的使用技巧 https://blog.csdn.net/yy1992320/a ...
- 了解Web的相关知识
一.WWW基础 WWW(world wide web, 万维网)是Internet上基于客户端/服务器体系结构的分布式多平台的超文本超媒体信息服务系统.它利用超文本(hypertext).超媒体(hy ...
- 了解js闭包
定义:闭包是由函数以及创建该函数的环境组合而成.这个环境包含了这个闭包创建时所能访问的所有局部变量 理解:能够读取其他函数的内部变量的函数,并开辟新的作用域(环境) 例子1 function pare ...
- spm_hrf
a=spm_hrf(0.72); n1=MOTOR_taskdesign(1,:);cn1=conv(n1,a);plot(cn1); block design hrf
- Linux centosVMware Apache 配置防盗链、访问控制Directory、访问控制FilesMatch
一.配置防盗链 通过限制referer来实现防盗链的功能 配置文件增加如下内容 vim /usr/local/apache2.4/conf/extra/httpd-vhosts.conf //改为如下 ...
- Maven项目-端口被占用java.net.BindException: Address already in use: JVM_Bind <null>:8080解决方法
异常显示: 问题所在:之前启动的tomcat未停止,端口被占用. 解决方法: 养成良好的习惯,用完之后停掉服务.
- 1.requests+正则表达式爬猫眼电影TOP100
import requests from requests.exceptions import RequestException def get_one_page(url):try: response ...
- 【动画演示】：JS 作用域链不在话下
作者:Lydia Hallie译者:前端小智来源:dev 点赞再看,养成习惯 本文 GitHub https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类, ...
- 查漏补缺之go依赖管理
vendor 使用vendor进行包管理,首先要保证项目在$GOPATH/src/路径下(踩过坑),然后build时就会按照如图所示的优先级进行包的搜索. 一个没有找到包的实例: module 其他 ...
- 中山DAy2——普及
今天挺不友好的,早上忘记定闹钟,晚了半小时起床,然后早上信心满满打算弄他个300分.结果……132.2分·.WTF??? T1:disease 题意:有n头奶牛,k种细菌(k<=15),给你每头 ...