VueJS 指令
VueJS 指令
指令是VueJS以某种方式做事的指令。我们已经看到了以下指令:v-if, v-show, v-else, v-for, v-bind , v-model, v-on, etc.
在本章中,我们将了解自定义指令。我们将创建类似于我们对组件所做的全局指令。
语法
Vue.directive('nameofthedirective', { bind(e1, binding, vnode) { } })
我们需要使用vue.direction创建一个指令。它采用了如上所示的指令名称。让我们考虑一个例子来展示指令工作的细节
例子
<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指令,字体大小将增加到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>
并且使用以下代码访问它。
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"; } });
Filters
VueJS支持帮助设置文本格式的筛选器。它与v绑定和插值({{}})一起使用。我们需要在过滤器的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。