VueJS - 指令
指令是告诉 VueJS 以特定方式执行操作的指令。我们已经见过诸如 v-if、v-show、v-else、v-for、v-bind、v-model、v-on 等指令。
在本章中，我们将看看自定义指令。我们将创建类似于组件的全局指令。
语法
Vue.directive('nameofthedirective', {
bind(e1, binding, vnode) {
}
})
我们需要使用 Vue.directive 来创建指令。它接受指令名称，如上所示。让我们看一个示例来展示指令工作原理的细节。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle>VueJS Directive</div>
</div>
<script type = "text/javascript">
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
在这个示例中，我们创建了一个自定义指令 changestyle，如下代码所示。
Vue.directive("changestyle",{
bind(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "30px";
}
});
我们将以下 changestyle 分配给一个 div。
<div v-changestyle>VueJS Directive</div>
如果在浏览器中查看，它将以红色显示文本 VueJs Directive，并且字体大小增加到 30px。
输出
我们使用了 bind 方法，这是指令的一部分。它接受三个参数 e1，即需要应用自定义指令的元素。binding 类似于传递给自定义指令的参数，例如 v-changestyle = {color:green}，其中 green 将在 binding 参数中读取，vnode 是元素，即节点名称。
在下一个示例中，我们控制台输出了所有参数，并显示了每个参数提供的详细信息。
以下是一个向自定义指令传递值的示例。
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-changestyle = "{color:'green'}">VueJS Directive</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 = "30px";
}
});
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
</script>
</body>
</html>
输出
文本颜色已更改为绿色。值使用以下代码传递。
<div v-changestyle = "{color:'green'}">VueJS Directive</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 = "30px";
}
});
过滤器
Vue.js 支持过滤器，用于帮助文本格式化。它与 v-bind 和插值（{{}}）一起使用。在 JavaScript 表达式末尾需要使用管道符号来表示过滤器。
示例
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<input v-model = "name" placeholder = "Enter Name" /><br/>
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
name : ""
},
filters : {
countletters : function(value) {
return value.length;
}
}
});
</script>
</body>
</html>
在上面的示例中，我们创建了一个简单的过滤器 countletters。countletters 过滤器计算在文本框中输入的字符数量。要使用过滤器，我们需要使用 filter 属性并定义使用的过滤器，如以下代码所示。
filters : {
countletters : function(value) {
return value.length;
}
}
我们定义了方法 countletters 并返回输入字符串的长度。
要在显示中使用过滤器，我们使用了管道运算符和过滤器的名称，即 countletters。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters}}</b></span>
以下是在浏览器中的显示效果。
我们也可以使用以下代码向过滤器传递参数。
<span style = "font-size:25px;"><b>Letter count is : {{name | countletters('a1', 'a2')}}</b></span>
现在，countletters 将有三个参数，即 message、a1 和 a2。
我们也可以使用以下代码向插值传递多个过滤器。
<span style = "font-size:25px;"><b>Letter count is : {{name | countlettersA, countlettersB}}</b></span>
在 filter 属性中，countlettersA 和 countlettersB 将是两个方法，countlettersA 将细节传递给 countlettersB。