Vue(九)---自定义指令(directive )
2024-10-08 15:20:58
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>
最新文章
- win10使用技巧之如何打出偏僻字母
- NPOI操作Excel导入DataTable中
- JavaScript——DOM操作——Window.document对象
- oracle 条件:1=1或1=0,动态添加条件
- 初学者的checklist:对于QTP,你应该知道的9个基本概念
- 【转】特斯拉CEO马斯克:关于创业的几件重要事情
- Java经典面试题
- poj1849
- 如何用Dreamweaver编辑rails的html.erb文件
- python_01
- NodeJS:(一)特性&;环境&;测试
- HashMap在JDK1.8中并发操作,代码测试以及源码分析
- Linux记录-CentOS配置Docker
- 『MXNet』第二弹_Gluon构建模型
- swift 要点
- apache配置中ProxyPassReverse指令的含义
- Linux关闭Tomcat为什么要用Kill,而不是shutdown.sh
- Android使用Handler造成内存泄露的分析及解决方法
- ALTERA FPGA Quartus 指定memory综合使用 M4K块
- linux驱动程序:控制发光二极管