一、vue之过滤器
1、什么是过滤器？
过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
2、定义过滤器
-
全局过滤器
Vue.filter('过滤器名称', function (value1[,value2,...] )
{ //逻辑代码})
-
局部过滤器
new Vue({
filters: {
'过滤器名称': function (value1[,value2,...] ) {
// 逻辑代码
}
}
})
3、全局过滤器
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ msg | msgFormat('进攻+1', '123') | test }}</p>
<!-- 可以针对一个字符串使用多个过滤器 ，在第一个过滤器之后加|再加过滤器即可-->
</div>
<script src="./lib/vue.js"></script>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
//第一个参数固定的为过滤器之前的原有字符串，之后的arg为过滤器的参数
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/前进/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '前进！前进！不择手段的前进！ ——托马斯·维德'
},
methods: {}
});
</script>
</body>
</html>
显示效果如下
4、局部过滤器（私有过滤器）
局部过滤器的有参和无参的定义和使用方法与全局的过滤器一样。唯一的区别在于局部过滤器是定义在vue的实例中。其作用的区域也是vue实例【#app】控制的区域
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{ msg | msgFormat('进攻+1', '123') | test }}</p>
<!-- 可以针对一个字符串使用多个过滤器 ，在第一个过滤器之后加|再加过滤器即可-->
</div>
<script src="./lib/vue.js"></script>
<script>
// 定义一个 Vue 全局的过滤器，名字叫做 msgFormat
Vue.filter('msgFormat', function (msg, arg, arg2) {
//第一个参数固定的为过滤器之前的原有字符串，之后的arg为过滤器的参数
// 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
return msg.replace(/前进/g, arg + arg2)
})
Vue.filter('test', function (msg) {
return msg + '========'
})
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: '前进！前进！不择手段的前进！ ——托马斯·维德'
},
methods: {
},
//定义一个局部过滤器
filters:{
msgFormat:function(msg) {
return msg+'xxxxx局部过滤器';
}
}
});
</script>
</body>
页面显示效果
注意：
1、 当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
2、 一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右。
二、es6中填充字符串
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='')
或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
参数（接收两个参数）：
-
第一个参数，指定字符串的长度。如果当前字符串小于指定的长度，则进行补全；反之，不进行任何操作，返回原字符串。
-
第二个参数，用于补充的字符串，如果字符串长度过长，则会删除后面的多出的字符串，进行补全。如果不写，默认空格补全。
适用场景：
-
格式化时间时，个位数补0
-
字符串拼接
‘wen’.padStart(8, '12') // '12121Wen' 指定8位字符长度，不够用来12补全 'wen'.padStart(5, '12') // '12Wen' 'wen'.padEnd(8, '12') // 'wen12121' 'wen'.padEnd(5, '12') // 'wen12'
三、es6新增的padStart()方法和padEnd()方法
-
padStart() 用于头部补全；
-
padEnd() 用于尾部补全。
padStart()和padStart()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串。
padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。
'1'.padStart(10, '0') // "0000000001" '12'.padStart(10, '0') // "0000000012" '123456'.padStart(10, '0') // "0000123456"
另一个用途是提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12" '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"
四、vue自定义键盘修饰符
在很多时候，我们想要在键盘上按一个指定的键，实现，新增，删除的目的，比如按一下回车键，就要实现新增数据的目的
这样我们就需要监听键盘事件。比如 keydown：按键按下，keyup：按键抬起，keypress：按键按下抬起
在Vue中允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `keyCode` 是 13 时调用 `vm实例中的submit方法` 这个13对应的键其实就是Enter回车键--> <input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上：这个enter就是键盘码13的别名 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">
Vue默认为我们提供了如下键盘码的别名：
.enter（回车键） .tab（Tab键） .delete (捕获“删除”和“退格”键) .esc（Esc按键） .space（空格键） .up（方向上键） .down（方向下键） .left（方向左键） .right（方向右键）
也可以自定义按键设置别名
（1）通过Vue.config.keyCodes.名称 = 按键值来自定义按键修饰符的别名：
Vue.config.keyCodes.f2 = 113;
（2）使用自定义的按键修饰符：
<input type="text" v-model="name" @keyup.f2="add">
五、vue自定义全局指令
Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。
就像vue中有全局过滤器和局部过滤器件一样，也分全局自定义指令和局部指令。
对于全局自定义指令的创建，我们需要使用Vue.directive接口
Vue.directive('demo', Opt)
对于局部组件，我们需要在组件的钩子函数directives中进行声明
Directives: {
Demo: Opt
}
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选)，即Opt是一个对象，包含了5个钩子函数，我们可以根据需要只写其中几个函数。如果你想在 bind 和 update 时触发相同行为，而不关心其它的钩子，那么你可以将Opt改为一个函数。
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode： Vue编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
全局指令
示例
// 使用 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 (el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次
}
})
指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀, 但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
示例二
// 自定义一个 设置字体颜色的 指令
Vue.directive('color', {
// 样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
// 将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// 和样式相关的操作，一般都可以在 bind 执行
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
调用方式
<h3 v-color="'pink'">are you ok?</h3>
局部指令（私有指令）
可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项
var vm = new Vue({
el: "#app",
data:{},
directives:{
focus:{//自动获得焦点
inserted: function (el) {
el.focus()
}
},
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'color':{
bind:function(el, binding){
el.style.color = binding.value
}
},
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}
})
调用方式
<div id="app">
<label>
搜索名称关键字：
<input type="text" class="form-control"v-focus v-color="'green'">
</label>
<h3 v-color="'pink'" v-fontweight="900" v-fontsize="50">hello world</h3>
</div>
自定义指令的简写形式
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写：
Vue.directive('color-swatch', function (el, binding) {
el.style.backgroundColor = binding.value
})