vue2 过滤器 自定义指令

过滤器

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

// 语法
// 插值表达式
{{ '常量或变量' | 过滤器 }}
{{ '常量或变量' | 过滤器1 | 过滤器2 }}
// v-bind

1.全局

Vue.filter(过滤器名称，过滤器执行的函数(管道符前的值，传进来的参数..)){

            函数体

return 返回需要展示的数据  

}

不返回数据的话，数据为空

// html

{{ msg | addN(msg) }}    //  20

// js 中
Vue.filter("addN",function(data,format){
  console.log(data)  // 10
  console.log(format) // 10
  return data + format
})
// vue
data: {
    msg:10,
}

2.组件中

和 data 同级 filters ： {} 大括号中是 n 个过滤器函数

// html
{{ msg | add1 }}  // 11
// vue
const vm = new Vue({
    el: '#app',
    filters: {
        add1(data) {
            return data + 1
        }
    },
    data: {
        msg: 10,
    }
})

 注： 多个过滤器同同时使用时，后一个接收到的数据就是前一个过滤器的返回值，过滤器结束展示最后一个过滤器的值

自定义指令

除了核心功能默认内置的指令 (v-if/ v-for)，Vue 也允许注册自定义指令

使用的语法

自定义指令钩子函数 和 参数

钩子：

bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted	被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update	所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind	只调用一次，指令与元素解绑时调用。

这几个钩子函数的参数是几乎一致的 数据如上使用自定义指令的案例

el	指令所绑定的元素，可以用来直接操作 DOM。
binding	一个对象（包含以下数据）
binding.name	指令名，不包括 v- 前缀 name: "focus"
binding.value	指令的绑定值， value: {age: 18}
binding.oldValue	指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
binding.expression	字符串形式的指令表达式。expression: "{age:18}"
binding.arg	传给指令的参数，可选。arg: "{name:zs}"
binding.modifiers	一个包含修饰符的对象。modifiers: {test: true}
binding.rawName	命令行行名称字符串 rawName: "v-focus:{name:zs}.test"
vnode	Vue 编译生成的虚拟节点。
oldVnode	上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

注： 官方提示-除了 el 之外，其它参数都应该是只读的，切勿进行修改。

创建也分全局和组件内

// 全局
Vue.directive('指令名称', {
    bind: function () {}，
    inserted: function (el) {}
})
// 组件内 和 data同级
directives: {
  focus: {
    bind: function () {}，
    inserted: function (el) {}
  }
}

// html 使用

直接看计算的例子 

// html
加法 num+2 ：
减法 num-2 ：
乘法 num*2 ：
除法 num/2 ：
n次方 num 3 次方：
向上取整 1.6 ：
向下取整 1.6 ：
// js
Vue.directive('tomath', {
    bind(el,binding) {
        let num
        switch(Object.keys(binding.modifiers)[0]) {
            case 'plus': 
            num = binding.value + Number(binding.arg)
            break;
            case 'minus': 
            num = binding.value - Number(binding.arg)
            break;
            case 'times': 
            num = binding.value * Number(binding.arg)
            break;
            case 'divided': 
            num = binding.value / Number(binding.arg)
            break;
            case 'pow': 
            num = Math.pow(binding.value,Number(binding.arg))
            break;
            default: 
            num = Math[Object.keys(binding.modifiers)[0]](binding.value)
        }
        el.innerText = num
    }
})