自定义指令，自定义过滤器，混入

自定义指令

全局定义

​ 类似全局变量，一经定义，哪里都能使用

​ Vue.directive(指令的名称，options)

​ 指令格式：v-xxx v-会自动添加

参数：el：elment  

	 binding：一个对象，包含以下属性

		name：指令名，不包括 v- 前缀；

		value：指令的绑定值；

		oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用；

		expression：字符串形式的指令表达式；

		arg：传给指令的参数，可选；

		modifiers：一个包含修饰符的对象。

	vnode：Vue 编译生成的虚拟节点。

	oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

	Vue.directive('指令名',{
      	bind(el,binding，vnode){//将定义的指令绑定到元素身上时触发
            //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        }
      	inserted(el,binding，vnode){//自定义指令绑定的元素插入页面时触发，当我们在视图能看到这个元素时，它触发了
      	
      	//这里是操作DOM
          
      	}
      	componentUpdated(el,binding，vnode，oldVnode){//表示组件以及子组件发生更改时触发
          
      	}
      	update(el,binding，vnode，oldVnode，vnode，oldVnode){//表示元素以及子元素发生更改时触发
          
      	}
      	undind(el,binding，vnode){//解绑时触发，指令绑定的元素被删除
            //只调用一次，指令与元素解绑时调用。
          
      	}
      
  	})
    
    new.Vue({})

局部定义

​ durectives 选项

new.Vue({
	el:'#app',
	data:{
        
	},
	methods:{
        
	},
	directives:{
        '指令名'：{
        bind(el,binding，vnode){//将定义的指令绑定到元素身上时触发
            //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        }
      	inserted(el,binding，vnode){//自定义指令绑定的元素插入页面时触发，当我们在视图能看到这个元素时，它触发了
      	
      	//这里是操作DOM
          
      	}
      	componentUpdated(el,binding，vnode，oldVnode){//表示组件以及子组件发生更改时触发
          
      	}
      	update(el,binding，vnode，oldVnode，vnode，oldVnode){//表示元素以及子元素发生更改时触发
          
      	}
      	undind(el,binding，vnode){//解绑时触发，指令绑定的元素被删除
            //只调用一次，指令与元素解绑时调用。
          
      	}
      
	}
})

自定义过滤器（’|’）

​ 1. 过滤器用于格式化数据的一个封装函数

​ 特点：复用

​ 常见的过滤器： 时间，小数位数，货币符号， 大小写，对图片url进行格式化

​ 2.定义形式

​ 全局定义

​ Vue.filter ( 过滤器名称， 过滤器回调函数 )

​ 局部定义

​ filters 选项

<div id="app">
	<div>
      <h3> {{ money | currencyFilter('￥') }} </h3>
    </div>
</div>

//全局定义
Vue.filter('currencyFilter',( val,type ) => {
	return type + val 
})
new Vue({
    el: '#app',
    data: {
      money: 2000,
    },
    methods: {
	},
    //局部定义
	filters:{
       currencyMoneyFilter ( val,type){
           return type + val 
       }
	}
  })

混入 minxin

1. 作用： 将选项分离出去，单独管理

2. 使用形式

   全局定义

   ​ Vue.mixin()

   局部定义

   ​ mixins