Vue.js 自定义指令
Vue.js 自定义指令
Vue.js应用程序中使用了Vue.js指令，以使其可重用和直接。指令就像可以在Vue.js应用程序中用于以特定方式执行操作的指令一样。我们已经在https://www.javatpoint.com中使用了简单的条件指令，例如v-if，v-show，v-else，v-for，v-bind，v-model，v-on等。/ vue-js-conditions-and-loops页面。
在这里，我们将学习如何创建自定义指令和全局指令，并像在Vue中一样使用它们。js组件，因为Vue.js允许我们创建自己的自定义指令。
语法:
Vue.directive('name_of_the_directive', {
bind(e1, 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(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.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(e1,binding, vnode) {
console.log(e1);
e1.style.color = "red";
e1.style.fontSize = "20px";
}
});
现在，自定义指令" changestyle"已分配给div，如下所示:
<div v-changestyle>Vue.js Custom Directive Example</div>
如何将值传递给自定义指令？
我们可以通过将值绑定到自定义指令来将值传递给自定义指令。绑定就像传递给自定义指令的参数一样。
语法:
v-changestyle = "{color:'the_color_name'}".
让我们以一个示例来演示如何将值传递给自定义指令。
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 = "{color:'green'}">Passing value to custom directive example</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'}">Passing value to custom directive example</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绑定和插值({{}})一起使用。我们要求在过滤器
JavaScript 表达式的末尾使用管道符号。
JavaScript 表达式的末尾使用管道符号。
让我们看一个示例演示在自定义指令中使用过滤器。
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">
<input v-model = "name" placeholder = "Enter Your Name" /><br/>
<span style = "font-size:20px;"><b>Letter count is : {{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属性并定义使用的过滤器，如下所示:
" countletters"的简单过滤器。
countletters 过滤器会计算在文本框中输入的字符数。我们必须使用filter属性并定义使用的过滤器，如下所示:
filters : {
countletters : function(value) {
return value.length;
}
}
在这里，我们已经定义了方法
countletters ，然后返回了输入字符串的长度。
countletters ，然后返回了输入字符串的长度。
现在，我们使用了管道运算符和过滤器名称
"计数器" ，以在输出中显示过滤器的结果:
"计数器" ，以在输出中显示过滤器的结果:
<span style = "font-size:20px;"><b>Letter count is : {{name | countletters}}</b></span>