极客教程Vue.js 自定义指令
Vue.js 的指令用于使 Vue.js 应用程序可重复使用且简单。指令就像是指令，可以在 Vue.js 应用程序中用于以特定方式执行操作。我们已经使用过简单的条件指令，如 v-if、v-show、v-else、v-for、v-bind、v-model、v-on 等。
在这里，我们将学习如何创建自定义和全局指令，并像在 Vue.js 组件中一样使用它们，因为 Vue.js 允许我们创建自己的自定义指令。
语法：
Vue.directive('指令名称', {
bind(el, binding, vnode) {
}
})
要创建自定义指令，我们必须使用 Vue.directive 和指令名称，如上面的语法所示。让我们看一个示例，展示如何创建自定义指令以及如何使用它。
Index.html文件:
<html>
<head>
<title>Vue.js Custom Directive</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "directive">
<div v-changestyle>Vue.js Custom Directive Example</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(el, binding, vnode) {
console.log(el);
el.style.color = "red";
el.style.fontSize = "20px";
}
});
var vm = new Vue({
el: '#directive',
data: {
},
methods : {
},
});
</script>
<script src="index.js"></script>
</body>
</html>
Index.js文件:
var vm = new Vue({
el: '#directive',
data: {
},
methods : {
},
})
让我们使用一个简单的 CSS 文件使输出更具吸引力。
Index.css文件:
html, body {
margin: 5px;
padding: 0;
}
程序执行后，您将看到以下输出：
输出：
示例说明
在上面的示例中，您可以看到我们创建了一个自定义指令“changestyle”，如下所示：
Vue.directive("changestyle",{
bind(el, binding, vnode) {
console.log(el);
el.style.color = "red";
el.style.fontSize = "20px";
}
});
现在，将自定义指令“changestyle”分配给了一个 div，如下所示：
<div v-changestyle>Vue.js Custom Directive Example</div>
如何将值传递给自定义指令？
我们可以通过将值绑定到自定义指令来传递值。绑定类似于传递给自定义指令的参数。
语法：
v-changestyle = "{color:'颜色名称'}".
让我们通过一个示例来演示如何将值传递给自定义指令。
Index.html:
<html>
<head>
<title>Vue.js自定义指令</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "directive">
<div v-changestyle = "{color:'green'}">将值传递给自定义指令示例</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "20px";
}
});
</script>
<script src="index.js"></script>
</body>
</html>
Index.js:
var vm = new Vue({
el: '#directive',
data: {
},
methods : {
},
})
程序执行后，将看到以下输出：
输出：
您可以看到该值已经传递给指令，并且文本的颜色已更改为绿色。使用以下代码传递值：
<div v-changestyle = "{color:'green'}">将值传递给自定义指令示例</div>
使用以下代码进行访问：
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
console.log(binding.value.color);
console.log(vnode);
e1.style.color=binding.value.color;
e1.style.fontSize = "20px";
}
});
在自定义指令中使用过滤器
Vue.js支持过滤器，可以用于文本格式化。过滤器通常与v-bind和interpolation({{}})一起使用。我们需要为过滤器的JavaScript表达式末尾使用管道符号。
让我们看一个示例，演示如何在自定义指令中使用过滤器。
Index.html:
<html>
<head>
<title>Vue.js自定义指令</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "directive">
<input v-model = "name" placeholder = "输入您的姓名" /><br/>
<span style = "font-size:20px;"><b>字母计数为: {{name | countletters}}</b></span>
</div>
</script>
<script src="index.js"></script>
</body>
</html>
Index.js:
var vm = new Vue({
el: '#directive',
data: {
name : ""
},
filters : {
countletters : function(value) {
return value.length;
}
}
})
程序执行后，你将看到以下输出：
输出：
当你在上面的文本框中输入任何文本时，您可以得到字母计数，如下所示：
示例解释
在上面的示例中，我们创建了一个名为“countletters”的简单过滤器。countletters 过滤器计算在文本框中输入的字符个数。我们需要使用 filter 属性并将所用的过滤器定义如下:
filters : {
countletters : function(value) {
return value.length;
}
}
在这里，我们定义了方法 countletters 然后返回输入字符串的长度。
现在，我们使用管道运算符和过滤器的名称 “countletters” 来显示过滤器的结果：
<span style = "font-size:20px;"><b>字母个数为：{{name | countletters}}</b></span>