【Vue基础知识再巩固】--混入，自定义指令，过滤器

1. 混入Mixin

       混入类似于公共参数或者方法的初始化，使一些公共的变量或方法定义到组建中，与vuex功能类似却不相同。（混入中可以定义vue的各个变量入craeated,methods等，但是合并后，重复的以组件内为主）

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}
new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

2.自定义指令

      自定义指令用处很多，我常用在检验上，这里只介绍用到以及可能用到的。

     directives的常用钩子函数：bind(初始化调用，只调用一次)；inserted(被绑定元素插入父节点时调用)；update(虚拟节点VNode更新时候，指令有可能也没变，通过钩子参数对比新旧值判断)

     directives的常用狗子参数：el(当前节点)；binding(对象，常用name,value,oldvalue)

import Vue from 'vue'
// 正整数
const int=Vue.directive('int',{
  bind: function(el) {
    el.handler = function() {
      // el.value = Number(el.value.replace(/\D+/, ''))
      el.value = Number(el.value.replace(/\D+/, ''))>100?(Number(el.value.replace(/\D+/, ''))+'').substring(0,2):Number(el.value.replace(/\D+/, ''))
      setTimeout(()=>{
        el.dispatchEvent(new Event('input'));
      },100)
    }
    el.addEventListener('input', el.handler)
  },
  unbind: function(el) {
    el.removeEventListener('input', el.handler)
  }
})
export{int}
引入后v-int使用

3.过滤器

   介绍提交数据或渲染时候对数值的过滤：{{value|过滤器1|过滤器2}}，案例如下

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
全局可以用Vue.filters('capitalize',function(value){})进行定义

使用：{{msg|capitalize}}