在上一节中,我们学习了VueJS过渡和动画(transition
&
animation)的用法,无论是实现过渡还是动画,在VueJS它们的使用都是类似的,你可以根据标准过渡或动画类自定义然后使用。
指令是指示VueJS以某种方式进行操作,我们之前已经看到了诸如v-if、v-show、v-else、v-for、v-bind、v-model、v-on等指令。在这一节中,我们将学习自定义指令,创建类似于组件的全局指令,同时学习Vue过滤器的创建和使用。
一、VueJS自定义指令和使用指令自定义指令的语法如下:
Vue.directive("指令的名称", {
bind(e1, binding, vnode) {
}
})
【VueJS自定义指令和过滤器用法详解】自定义指令使用Vue.directive创建一个指令,它使用如上所示的指令名。下面看一个例子来理解指令的用法和工作原理。
<
div id="app">
<
div v-changestyle>VueJS自定义指令<
/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 app = new Vue({
el: '#app',
data: {
},
methods: {
},
});
<
/script>
在本例中,我们创建了一个自定义指令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自定义指令<
/div>
我们在浏览器中看到,它将显示红色的文本,并且它字体大小增加到30px,这是因为自定义指令的作用。
文章图片
代码中使用了bind方法,它是指令的一部分,并且它有三个参数,e1为需要应用自定义指令的HTML元素。Binding为传递给自定义指令的参数,例如v-changestyle = {color: green},其中green可以在binding参数中读取,而vnode是元素,即节点名。
在下面的一个例子中,输出所有的参数,显示了每个参数的细节。下面是一个将值传递给自定义指令的示例。
<
div id="app">
<
div v-changestyle="{color:'green'}">VueJS自定义指令值传递<
/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 app = new Vue({
el: "#app",
data: {
},
methods: {
},
});
<
/script>
文章图片
二、VueJS过滤器的创建使用VueJS支持帮助文本格式化的过滤器,它与v-bind和插值表达式{{}}一起使用。我们需要在过滤器的JavaScript表达式末尾添加一个管道符号。
<
div id="app">
<
input v-model="name" placeholder="输入内容" /><
br />
<
span style="font-size:25px;
"><
b>字数为 : {{name | countletters}}<
/b><
/span>
<
span style = "font-size:25px;
"><
b>字数为 : {{name | countlettersA, countlettersB}}<
/b><
/span>
<
/div>
<
script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
name: ""
},
filters: {
countletters: function (value) {
return value.length;
}
}
});
<
/script>
在上面的例子中,我们创建了一个简单的过滤器countletters,这个过滤器用于计算文本框中输入的字符数。要使用过滤器,我们需要使用过滤器属性,并通过以下代码段定义所使用的筛选器。
filters: {
countletters: function (value) {
return value.length;
}
}
我们定义方法countletters并返回输入字符串的长度,为了得到预期的显示效果,我们使用了管道操作符和过滤器的名称。
<
span style="font-size:25px;
"><
b>字数为 : {{name | countletters}}<
/b><
/span>
文章图片
也可以和上面自定义指令一样,将值或参数传给过滤器,如下代码:
<
span style = "font-size:25px;
"><
b>字数为 : {{name | countletters('a1', 'a2')}}<
/b><
/span>
现在,过滤器countletters有三个参数,即message、a1和a2。
我们还可以使用下面的代码段将多个过滤器传递给插值表达式。
<
span style = "font-size:25px;
"><
b>字数为 : {{name | countlettersA, countlettersB}}<
/b><
/span>
过滤器的两个属性countlettersA和countlettersB是两个方法,countlettersA将细节信息传递给countlettersB。
推荐阅读
- VueJS路由使用完全解读
- VueJS过渡和动画(transition & animation)使用详细教程
- VueJS渲染指令v-for、v-if、v-else、v-show用法详解
- VueJS事件处理v-on用法全解
- Python字典(Dictionary)完全解读和用法详解
- jQuery 带有示例的detach()用法代码
- 算法库(C++魔术师STL算法用法示例)
- 文件处理(如何在Python中读取文件())
- 算法设计(通过最多买卖k次股票获得最大利润)