[vue] filter&&directive

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 9 天，点击查看活动详情。

过滤 —— filter

1、作用及使用场景

• 作用

  常用作文本格式化，传入一个值，然后返回对这个值处理后的新值。

• 使用场景

  如：处理后台返回的日期时间，一些价格单位的显示

2、如何定义使用

• 使用

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

①定义一个过滤器
②把它放到表达式的后面中间有管道 符号( | )指示

<!--过滤器：dateFilter-->
<div :title="currentDate | dateFilter">
    {{currentDate | dateFilter}}
</div>

• 全局过滤器 通过 Vue.filter 定义全局过滤器

如处理价格单位:

<div :title="price | priceFilter">
    {{price | priceFilter1}}
    {{price | priceFilter2('￥')}}
    {{price | priceFilter1 | priceFilter2('￥')}}
</div>

Vue.filter('priceFilter1', function(val) {
    return '$' + val
})


Vue.filter('priceFilter2', function(val, symbol) {
    return symbol + val
})

1. 过滤器函数接收到的表达式的值始终作为第一个参数；同时也可以接收其他参数
2. 过滤器可以多个连起来使用，过滤器返回的值值作为下一个过滤器的次一个参数

• 局部过滤器 在组件内部通过 filters 选项定义本地过滤器

filters: {
    priceFilter(val, symbol) {
        return symbol + val
    },
    dateFilter(data) {
        return new Date(data).getFullYear()
    }
}

自定义指令 -- directive

当需要对普通dom元素进行底层操作时，可以使用自定义指令。

例如：需要根据登录用户权限控制是否显示组件内容，使用自定义指令如何实现呢？代码如下

<div>
    <input type="text" :value="value" @input="handleInput" @keydown.enter="addCourse"> 
    <button @click="addCourse" v-permission="'admin'">按钮</button>
</div>

const role = 'user'
Vue.directive('permission', {
    inserted(el, binding, vnode, oldVnode){
        if(role != binding.value) {
            el.parentElement.removeChild(el)
        }
    }
})

• 1、使用Vue.directive 注册全局指令，或在组件中使用directives选项定义多个指令

• 2、指令使用时，其前缀是v-

• 3、指令的钩子函数

• 4、指令钩子函数的参数 钩子函数的参数 (即 el、binding、vnode 和 oldVnode)