复习Vue18、自定义指令
18.1 自定义指令基本用法
为什么需要自定义指令呢?
因为内置指令不满足需求。
下面看一下基本的创建自定义指令语法:
Vue.directive('focus',{
inserted:function(el){
//获取元素焦点
el.focus();
}
});
自定义指令用法
<input type="text" v-focus>
下面看一下具体的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义指令基本使用</title>
</head>
<body>
<div id="app">
<input type="text" v-focus />
</div>
<script src="vue.js"></script>
<script>
Vue.directive("focus", {
inserted: function (el) {
//el:表示指令所绑定的元素
el.focus();
},
});
const vm = new Vue({
el: "#app",
data: {},
});
</script>
</body>
</html>
在上面的代码中,我们通过directive
方法创建了一个focus
指令。
在使用该指令的时候,一定要加上v-
的形式。
inserted
表示的是指令的钩子函数,含义是:被绑定元素插入父节点时调用。
18.2 自定义指令-带参数
带参数的自定义指令创建的语法(改变元素背景色)
Vue.directive('color',{
inserted:function(el,binding){
//binding表示传递过来的参数
el.style.backgroundColor=binding.value.color;
}
})
指令的用法
<input type="text" v-color='{color:"orange"}' />
下面,看一下完整的代码案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义指令带参数</title>
</head>
<body>
<div id="app">
<input type="text" v-color="msg" />
</div>
<script src="vue.js"></script>
<script>
//自定义指令-带参数
Vue.directive("color", {
bind: function (el, binding) {
el.style.backgroundColor = binding.value.color;
},
});
const vm = new Vue({
el: "#app",
data: {
msg: {
color: "blue",
},
},
});
</script>
</body>
</html>
通过上面的代码,可以看到定义了一个color
的指令,在使用的时候传递了msg
对象。
所以这个对象会给binding
这个参数,我们通过这个参数的value
属性获取msg
对象中的color
属性的值,然后用来设置文本框的背景色。
这里使用了bind
这个钩子函数:只调用一次,第一次绑定指令到元素时调用,我们可以在此绑定只执行一次的初始化动作。
18.3 自定义局部指令
局部指令的基本语法:
directives:{
focus:{
//指令的定义
inserted:function(el){
el.focus()
}
}
}
在Vue
实例中添加directives
具体实现的代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>局部指令</title>
</head>
<body>
<div id="app">
<input type="text" v-color="msg" />
</div>
<script src="vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
msg: {
color: "red",
},
},
directives: {
color: {
bind: function (el, binding) {
el.style.backgroundColor = binding.value.color;
},
},
},
});
</script>
</body>
</html>
局部指令只在所定义的组件中使用。