VUE过滤器的使用与按键修饰符

全局过滤器
用法：{{item.ctime | 过滤器名称('') }}，可以同时使用多个过滤器{{ msg | 过滤器名称1 | 过滤器名称2}}

过滤器语法：Vue.filter('过滤器名称',function(){})
过滤器格式 {{ name | 过滤器名称 }}

这是日期过滤器例子

Vue.filter('dateFormat',function(dateStr ,pattern){
			var dt = new Date(dateStr)
			var y = dt.getFullYear()
			var m = (dt.getMonth()+1).toString().padStart(2,'0')
			var d = dt.getDate().toString().padStart(2,'0')
			if(pattern.toLowerCase() === 'yyyy-mm-dd'){
			return `${y}-${m}-${d}`
			}else{
				var hh = dt.getHours().toString().padStart(2,'0')
				var mm = dt.getMinutes().toString().padStart(2,'0')
				var ss = dt.getSeconds().toString().padStart(2,'0')
				return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
			}
		})

私有过滤器

var vm2 = new Vue({
			el:'#app2',
			data:{
				msg:'1231623456'
			},
			methods:{},
			//私有过滤器对象
			//调用过滤器采用就近原则,如果全局和私有相同名字优先调用私有
			filters:{
				msgFormat:function(msg){
					return msg.replace(/1/g,'8') 
				}
			}
		})

按键修饰符
例子：@keyup.enter="方法"
也可以全局按键修饰符Vue.config.keyCodes.f2 = 113
然后调用@keyup.113="add"

全局按键修饰符

Vue.directive('focus',{
     bind:function(el){},
     inserted:function(el)
     			{	
     				el.focus()	
     				},
     updated:function(){}
     )}

解释：

• el就是绑定的元素
• 元素刚绑定了指令时候,还没有插入到DOM中
• bind:每当指令绑定在元素的时候,会立即执行这个bind指令,只执行一次
• inserted:表示元素插入DOM中会执行函数,执行一次
• updated:当VM更新的时候,执行,可能触发多次

另vue中使用事件绑定函数，如果加了小括号，就可以传参