过滤器、按键修饰符、自定义指令

1、定义一个 Vue 全局的过滤器 filter

过滤器调用的格式： {{ name | 过滤器名称}}

实例：
将msg中的某个字符串进行替换

<p> {{ msg | msgFormat }} </p>   //调用过滤器

//定义一个Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat',function(msg){
	/*return msg.replace('爱','喜欢')*/    =====> 我喜欢你，就像老鼠爱大米
				
	//字符串的 replace 方法，第一个参数 可以定义一个正则
	return msg.replace(/爱/g,'喜欢')    =====> 我喜欢你，就像老鼠喜欢大米
})


msg:'我爱你，就像老鼠爱大米'

1.1 过滤器传递参数

<p> {{ msg | msgFormat('喜欢') }} </p>

Vue.filter('msgFormat',function(msg,rep)
    return msg.replace(/爱/g,rep)
})

1.2 多个过滤器之间的作用

<p> {{ msg | msgFormat('喜欢123') |test}} </p>

Vue.filter('msgFormat',function(msg,rep){
	return msg.replace(/爱/g,rep)
})
			
Vue.filter('test',function(msg){
	return msg+'============='
})

result:
我喜欢123你，就像老鼠喜欢123大米=============

2、定义一个私有的过滤器 filters

filters:{
	//定义私有过滤器：【过滤器名称  和  处理函数】
	//过滤器调用的时候采用的是就近原则，如果私有和全局的过滤器名称一致，就调用私有的过滤器
	dateFormat:function(){
		处理函数				
	}
}

3、在字符串前面或者后面补位 padStart

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString=’’) 或
String.prototype.padEnd(maxLength, fillString=’’)来填充字符串；

如：在不够两位数的前面加上0

var mm=dt.getMinutes().toString().padStart(2,'0')
var ss=dt.getSeconds().toString().padStart(2,'0')

4、全局按键修饰符

4.1 系统自带的按键修饰符
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• enter
• tab
• delete (捕获“删除”和“退格”键)
• esc
• space
• up
• down
• left
• right
  使用：

<input type="text" class="form-control" v-model="name" @keyup.enter="add"/>

4.2 自定义按键修饰符

1 通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名：​

//自定义全局按键修饰符 f2
Vue.config.keyCodes.f2 = 113;

2 使用自定义的按键修饰符：

<input type="text" class="form-control" v-model="name" @keyup.f2="add"/>

5 定义全局的指令
1、自定义全局 自定义指令： directive

// 自定义全局指令 v-focus，为绑定的元素自动获取焦点：
 Vue.directive('focus', {
      inserted: function (el) { // inserted 表示被绑定元素插入父节点时调用
        el.focus();
      }
});

 // 自定义局部指令 v-color
 directives: {
 color: { // 为元素设置指定的字体颜色
     bind(el, binding) {
         el.style.color = binding.value;
     }
}  

总结：

//使用Vue.directive() 定义全局的指令 v-focus //其中：参数1：指令的名称，注意在定义的时候，指令前面不需要加 v- 前缀 //但是：在调用的时候，必须在指令前面加上 v- 前缀来进行调用 //参数2：是一个对象，在这个对象身上有一些指令相关的函数，这些函数可以再特定的阶段，执行相关的操作

2、自定义指令的使用方式：

<input type="text" v-model="searchName" v-focus v-color="'red'">

总结bind,inserted,updated

• 和样式相关的操作，一般都可以在bind 中执行
• 和JS行为相关的操作，最好放在inserted中去执行，防治JS行为不生效

3、指令钩子函数会被传入以下参数：

• el：指令所绑定的元素，可以用来直接操作 DOM 。
• binding：一个对象，包含以下属性：
  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
  • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1"中，表达式为 “1 + 1”。

<input type="text" v-model="searchName" v-focus v-color="'green'">

bind:function(el,binding){
	//和样式相关的操作，一般都可以在bind 中执行
	//console.log(binding.value)   //   green
	//console.log(binding.expression)  //  'green'
    el.style.color=binding.value
}

4、定义私有指令
1 指令的使用方式

//指令的调用
<div id="app2">
	<h3 v-fontweight="900">{{dt | dateFormat }}</h3>
</div>

2 自定义私有指令

var vm=new Vue({
	el:'#app2',
	data:{},
	directives:{
		//自定义私有指令
		'fontweight':{
			bind:function(el,binding){
				el.style.fontWeight=binding.value
			}
		}
	}				
})

3、指令函数的简写形式

//相当于在bind和update中都写了如下的代码
'fontsize':function(el,binding){
	el.style.fontSize=parseInt(binding.value)+'px'
}