Vue中过滤器和自定义指令详解

1，局部过滤器

1.1定义：

1.2案例

2，全局过滤器

2.1定义：

2.2案例

3.自定义指令

3.1定义：

3.2案例

3.3自定义指令全局写法

1，局部过滤器

1.1定义：

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：。需要用到关键配置项filters

1.2案例

实现一个不规则字母，1，全部变成大写,2，全部变成小写。

html代码
<body><div class="app"><h3>原形态：{{str}}</h3><h3>转大写：{{str | toUpper(1)}}</h3><h3>转小写：{{str | toUpper(2)}}</h3><HR></HR></div>

js代码
new Vue({el: '.app',data() {return {str: 'aBaDE'}},filters: {toUpper(value, flag = 1) {if (flag ==1) {return value.toUpperCase()//转大写} else {return value.toLowerCase()}}}

2，全局过滤器

2.1定义：

在全局中格式化文件，全局组件都可以公用，是一种传递参数，串联的回调。

2.2案例

实现前四个字母转变大小写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head><body><div class="app"><h3>原形态：{{str}}</h3><h3>转大写：{{str | toUpper(1)}}</h3><h3>转小写：{{str | toUpper(2)}}</h3><HR></HR></div><div class="app2"><h3>原形态：{{str2}}</h3><h3>截取前四位并转大写：{{str2 | toUpper(1) | mySlice}}</h3><h3>截取前四位并转小写：{{str2 | toUpper(2) | mySlice}}</h3></div>
</body>
<script>Vue.filter('toUpper', function (value, flag = 1) {if (flag == 1) {return value.toUpperCase()//字符串转大写} else {return value.toLowerCase()//字符串转小写}});Vue.filter('mySlice', function (value) {return value.slice(0, 4)})//全局过滤器new Vue({el: '.app',data() {return {str: 'aBaDE'}},filters: {toUpper(value, flag = 1) {if (flag ==1) {return value.toUpperCase()//转大写} else {return value.toLowerCase()}}}// filters:{    局部过滤器//     toUpper(value,flag=1){//         if(flag==1){//             return value.toUpperCase()//字符串转大写//         }else{//             return value.toLowerCase()//字符串转小写//         }//     }// }});new Vue({el: '.app2',data() {return {str2: 'qweYYY'}}})</script></html>

3.自定义指令

3.1定义：

自定义指令，顾名思义，就是我们使用者自己创建指令，如同vue给我们内置好的指令如v-model,v-on,v-band一样。我们自定义创建，然后去操作DOM元素。

3.2案例

实现数字放大10倍

html代码
<body><div class="app"><h3>原数据：{{num}}</h3>放大10倍数据：<h2 v-big="num"></h2><input type="text" v-Myfocus="num"><button @click="num++">点我+1</button></div>
</body>

js代码
<script>Vue.config.productionTip = false;Vue.directive("myfocus1",{//一上来绑定的时候bind(element,binding){element.value = binding.value*10;//绑定的值element.focus();},//当元素插入页面的使用调用inserted(element,binding){element.focus();},//更新的时候update(element,binding){element.value = binding.value*10;//绑定的值}})new Vue({el:"#root",data:{num:10,},directives:{//绑定和更新时调用big(element,binding){// console.log("指令名称：",binding.name);// console.log("绑定的名称或者表达式",binding.expression);// console.log("指令的参数",binding.arg);element.innerText = binding.value*10;//绑定的值},myfocus:{//一上来绑定的时候bind(element,binding){element.value = binding.value*10;//绑定的值element.focus();},//当元素插入页面的使用调用inserted(element,binding){element.focus();},//更新的时候update(element,binding){element.value = binding.value*10;//绑定的值}}}})</script></body>
</html>

3.3自定义指令全局写法

 Vue.directive('Myfocus',{bind(element, binding) {element.value = binding.value * 10},//元素插入页面的时候inserted(element, binding) {element.focus()},update(element, binding) {element.value = binding.value * 10},})

注意：

1，自定义指令在什么时候去调用，1，当指令和元素绑定成功的时候（一上来） 2，当指令所在模板重新解析的时候。

2，指令分为创建，绑定，使用，三个步骤。自定义指令创建完整写法应该是对象键值对形式，分为绑定时，元素插入页面时，页面更新时。