Vue定义全局过滤器，按键修饰符和全局指令

Vue定义全局过滤器

• 语法：

Vue.filter('msgFormat',function (msg,arg,arg2) {
	return msg.replace(/单纯/g,arg,arg2)
})

• 参数说明

  msgFormat表示过滤器名

  msg表示通过管道传来的数据

  arg表示在调用过滤器时在圆括号中第一个参数

  arg2表示在调用过滤器时在圆括号中第二个参数

Vue自定义按键修饰符

• 语法：

Vue.config.keyCodes.f2 = 113;

Vue自定义全局指令

//使用 Vue.directive() 定义全局的指令 v-focus
//其中：参数1：指令的名称，注意，在定义的时候，指令的名称前面，不需要加v-前缀
//但是：在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
//参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
	bind: function(el){	//每当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
		//注意：在每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素这个el参数是一个原生的JS对象
		//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法没有作用
		//因为，一个元素，只有插入DOM之后，才能获取焦点
		//el.focus()
	},
	inserted: function(){	//inserted 表示元素插入到DOM中的时候，会执行inserted函数（触发一次）
		el.focus()
		//和js行为相关的操作，最好在inserted中去执行
	},
	updated: function(){	//当VNode更新的时候，会执行updated，可能会触发多次
	}
})

//自定义一个设置字体颜色的指令
Vue.directive('color', ){
	//样式,只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联样式
	//将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
	bind: function(el，binding){
		//el.style.color = 'red'
		//和样式相关的操作，一般都可以在bind执行
		el.style.color = binding.value
	}
}
<input type="text" v-color="'blue'">