VueJS – 指令（13）
指令是 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";
}
});我们将以下更改样式分配给 div。
<div v-changestyle>VueJS Directive</div>如果我们在浏览器中看到，它会以红色显示文本 VueJs Directive，并且字体大小增加到 30px。
输出
我们使用了 bind 方法，它是指令的一部分。它需要三个参数e1，即需要应用自定义指令的元素。绑定就像传递给自定义指令的参数，例如 v-changestyle = ”{color:’green’}”，其中绿色将在绑定参数中读取，而 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>
And it is accessed using the following piece of code.
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";
}
});过滤器
VueJS 支持有助于文本格式化的过滤器。它与 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 过滤器计算在文本框中输入的字符数。要使用过滤器，我们需要使用过滤器属性并通过以下代码定义使用的过滤器。
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>在过滤器属性中countlettersA和countlettersB将是两个方法，并且countlettersA将细节传递给countlettersB。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
