Vue.js -自定义指令
一、钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
二、自定义指令的基本用法
作用:eg:加载页面后自动获得焦点
<script type="text/javascript">
window.onload = function () {
Vue.directive('fo',{ fo表示该自定义指令的名字
inserted:function(el){ el就是个变量,表示所选定的元素,谁用这个指令,el就是指谁
el.focus(); 该选定的元素聚焦
}
});
var vm = new Vue({
el:'#app',
data:{
message:'我是一个div'
},
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-fo>
</div>
</body>
结果:加载完页面后,光标自动聚焦到该输入框
- 举例2:(改变元素的背景色)
自定义指令格式:
Vue.directive(‘color’,{
bind:function(el, binding){ 此处的bind换成inserted额可以
el.style.backgroundColor = binding.value.color;
}
})
指令的用法:
< input type=“text” v-color = ‘msg’>
<script type="text/javascript">
window.onload = function () {
Vue.directive('color',{ color表示自定义的名字
bind:function(el, binding){ binding表示传入的参数,el表示调用该函数的元素
el.style.backgroundColor = binding.value.color;
}
})
const vm = new Vue({
el:'#app',
data:{
msg:{ 此处的msg表示的是一个对象
color:'orange'
}
},
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-color = 'msg'>
</div>
</body>
结果显示:
三、局部指令
用法:data域中:
directives:{
color:{
bind:function(el, binding){
el.style.backgroundColor = binding.value.color;
}
}
}
<script type="text/javascript">
window.onload = function () {
const vm = new Vue({
el:'#app',
data:{
msg:{
color:'red'
}
},
directives:{ 只是在局部组件中有用
color:{
bind:function(el, binding){
el.style.backgroundColor = binding.value.color;
}
}
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-color = 'msg'>
</div>
</body>
显示结果: